October 7, 2015

Viewing Blogger Json and XML feedsFor web technologies like "Google Blogger blogs" also known as "blogspot blogs", a flexible medium for transporting data from one platform to another is mandatory. For this purpose blogger blogs uses XML to serve Feeds in Atom/RSS formats as a flexible source of data transport and data sharing between third party Content Management systems like Wordpress. With the introduction of JSON in Blogger Data API, it has now become even faster to fetch data and interchange it between blogspot server and browser. Since the default XML and JSON files are compressed in size and all data is presented without indentation in a single line, it becomes difficult to understand the Parent/child relationship of data and view the structure properly. In this part of the tutorial series you will learn how to view Blogspot JSON Feeds and XML Feeds in a human friendly format with clear indentation and tree structure. What you will learn today is a serious Post Mortem about blogspot blogs!


October 5, 2015

Blogger JSON Feeds - IntroductionAfter the introduction of Blogger Data API v3 and its support with JSON Feeds, blogspot blogs have become the new hub of UI creativity for web designers. Almost every developer is busy creating fancy Blogger templates using JSON feeds to fetch important data such as Post Summary, Title, Timestamp, Comments count, Thumbnail image, Label List, Author info and so on. Developing of all these useful widgets and templates was never that easy before until Google provided support for JSON Feeds using the parameter ?alt=json . You might be confused on what techy stuff are we talking here but if you really wish to start developing Blogspot widgets from scratch and start designing professional templates then this tutorial series will take you on the most interesting and easy-to-understand ride. We will be publishing around 10+ interesting tutorials first time on internet to help a newbie blogger to learn how to communicate better with data stored on his blog and how to start talking to it!


September 10, 2015

Fish aquarium keeps one punctual in officeAround 22 beautiful and colorful Malawi, guppy and tropical fishes joined STCnetwork! These fishes were brought in for a purpose that is extremely related to work productivity and performance. The most difficult of all things for an entrepreneur is remaining punctual with office work. When you have no boss at top to monitor and supervise your activities, as a human we are all bound to become lazy and lethargic at some point and especially unpunctual when it comes to Office timings.  I love sleeping a lot and barely open my eyes unless I have slept enough for 12 hours! As a result my office opening timings are never fixed, sometimes I go at 11:00 AM while sometimes I go at 3:00PM. Indeed this habit will make me dump and lazy in future if I don't take precautionary steps to avoid sleeping a lot and making sure I setup a fix time to go office every morning. Neither did exercise help me with this lazy habit nor did sleeping early at night. The only best solution that I came around was placing a "Fish Aquarium" or "Fish Tank" at the Office!


September 3, 2015

how to design responsive blogger templatesFinally we are done with the most comprehensive and descriptive tutorial series on Google powered  blogger blogs. We have discussed the core basics to create and develop a mobile responsive layout using simple CSS3 @media queries and some built-in scripts. This series will help you understand the step-by-step effort involved in transforming an ordinary static, inflexible and non-responsive blogger template into a fluid and responsive one that may help you improve your Mobile Search traffic and better entertain your users with a mobile friendly user-interface (UI). A Mobile UI is an important SEO ranking metric and helps you improve your mobile pageviews and thereby the site CTR revenue.


August 31, 2015

STCnetwork Exclusive Interview
It is not very often that we get to learn the secrets of success from successful people. Many are very secretive about what they do and how they achieve success. But it has always been our understanding that if you limit knowledge, knowledge will in turn limit you. It is our aim here at STCnetwork to spread our knowledge and to provide guidance to aspiring people looking to make a name for themselves online. To that end, I'd like to share with all our readers some words of wisdom passed on by our Mohammad Mustafa, who was cordially invited by the NED Entrepreneurship Society (NES) to an interview as an alumni where he shared some insights about his professional life and online business secrets, and how he started STCnetwork and reshaped it into what it is today. The interview took place at STCnetwork's head office in karachi.

August 25, 2015

fix XML errors in blogger editorMost often when you insert a Facebook JavaScript or AdSense JavaScript in your blogger template editor, you often come across XML Parsing errors that prompts and says "The reference to entity "version" must end with the ';' delimiter." Blogger blogs are coded in XHTML and  XML is quite strict in following correct syntax formatting than HTML. XML is surely unforgiving in this case. Blogger interprets all your document as XML rather than as HTML. XML is PCDATA (Parsed Character Data) by default which means that XML parsers will normally parse all the text in a document. As a result when we insert JavaScript inside blogspot templates, all script inside the JavaScript tags is treated as a text and due to the presence of some illegal special characters like "<" , ">" and "&" , you often face the following error:


Error parsing XML, line 1458, column 64: The reference to entity "version" must end with the ';' delimiter.

error parsing xml in blogger

What are the special characters in XML that causes error?

XML is a human readable form of textual data. It parses all the text in a document and gives errors for the following 5 special characters:

  1. (<)  - less than

  2. (&) - ampersand

  3. (>) - greater than

  4. (")  - double-quote

  5. (')  - apostrophe or single-quote

The following three are more crucial:
  • "<" will generate an error because the parser interprets it as the start of a new element.
  • ">" will generate an error because the parser interprets it as the end of a start-tag or an end-tag
  • "&" will generate an error because the parser interprets it as the start of a character entity.

Two ways to fix XML errors in Blogger

XML errors can be avoided by using two methods:

  1. Use CDATA
  2. Escape HTML entities


1. Use CDATA

The term CDATA refers to (Unparsed) Character Data which is used about text data that should not be parsed by the XML parser. To avoid errors, all script code is enclosed inside a CDATA section. Everything inside a CDATA section including the 5 special characters is ignored by the parser.

A CDATA section starts with "<![CDATA[" and ends with "]]>":

Next time when you add your Facebook code, enclose it inside CDATA as shown below:


(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); = id;
  js.src = "//";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


All your script code will exists inside the CDATA and blogger editor will not parse the script code and thus wont give any errors.

The reason why Facebook script gives errors in blogger is due to the presence of a special character (&) that is used before the variable "version" as highlighted in the code above. "&" will generate an error because the XML parser interprets it as the start of a character entity and thus it prompts an error that says:

The reference to entity "version" must end with the ';' delimiter.


2. Escape HTML entities

Another simple method is to escape all 5 special characters and instead use the legal characters as alternatives to the above 5.

  • Replace < with &lt;
  • Replace  > with &gt;
  • Replace  "  with &quot;
  • Replace  '  with &#039;
  • Replace  & with &amp;

PS: Note how every alternative character set ends with a delimiter (;)

This method will help you encode your AdSense code and paste it inside your template without errors. It will also help you paste HTML code inside blogger comments!

This method is also called as HTML encoding and we have built a Special tool for this purpose to help you encode HTML characters with ease.

Need Help?

I hope now you will be able to add social media plugins and third party scripts inside your blogger templates without any errors. Do let me know if you need any further assistance or clarification on any point. Would love to give a hand buddies! =)


August 21, 2015

mobile friendly responsive imagesWe have covered most important core concepts of responsive designs and have shared almost every tip to design mobile friendly layouts in blogspot blogs, now it is time to learn how to make blog images to auto adjust their dimensions in mobile phones and tablets without effecting its resolution. Images with large sizes often don't fit in small screen devices and as a result gives a bad UI impression. Images must be fluid in its behavior, their width and height dimensions should be stylized such that they may instantly change their overall size as the browser screen goes smaller or bigger. Our approach is based on CSS @media Queries unlike adaptive image methods which makes use of JavaScript of php.