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:


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.


August 17, 2015

create a responsive blog footer

In this tutorial you will learn how to convert your three Column footer into a responsive and auto-adjusting footer wrapper by creating separate stylesheet for different device breakpoints. Your blog footer could be a single column, 2 column, 3 or even 4 column, it may contain multiple rows and columns but the idea behind mobile optimized layouts is a simple concept which if understood would make it really simple for you to play around all elements on your blog and make them mobile responsive. I am sharing below the tutorial for blogger blogs but this methodology can be applied across all platforms. We have already learned how to mobilize Blog header and content area and now we need to play around the footer. Lets get to work then!


August 16, 2015

make content area responsiveI hope you have now learnt the basic steps required to make a layout responsive. You have already learned how to create a responsive stylesheet using CSS3 media queries and choosing the right breakpoints. Now you just need to start making each section fluid by creating separate stylesheet for each section and then adding these styles to the correct breakpoints or ZONES. We have already discussed how to make header widgets responsive and now we will discuss ways to create a mobile stylesheet for Content area which includes your Blog Posts column and Sidebar Column. Lets get to work!


August 14, 2015

design a responsive header in bloggerNow when you are prepared with the core basics of how to use CSS3 Media Queries to design responsive blogger templates, its time to start with the header and then move towards content section, then sidebar and finally the footer. In default Blogspot Templates the Header consists of mostly two wide widget sections where the first section includes Blog Logo while the second section contains space for your Header Menu. In Custom templates the first Header widget section  is further divided into two sub-sections which floats to left and right sides. The left section contains your Blog Logo Image or Title/Description and the right section is often a HTML/JavaScript widget where you can add any advertisement banner or content you may like.