STCnetwork's Exclusive Interview by NED Entrepreneurship Society


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.


The interview was partly in English and partly in Urdu. For our readers, we have translated the interview and retold the story in a narrative form. Hope you find it useful and inspiring :)







Q 1: Tell us about your business - how and when did you start?



It�s not easy to identify a particular point in time when it all started. A lot of things in life can be attributed to fate and circumstance. After A-levels, I � like my peers � applied for higher education in the United States. But was unable to secure a visa owing to unfavorable financial circumstances. Studying and working hard all your life to realize your dream of getting a scholarship, and then having that dream snatched away takes its toll on a person�s mind. Heart-broken, I felt reluctant to pursue higher studies. I guess that�s when it all started.





I spent some of my time learning about and making a small personal website for friends. That�s when I realized that all the things I was learning, I can write about it and teach others as well. And thus began the foray into the world of blogging. That crazy hobby turned into a full-time profession.



Q 2: Where did you start, and where does your business stand now?



STCnetwork Official website


I brought a laptop during my second year of Computer and Systems engineering. The earnings I generated blogging, I invested them into resources that would help me along the way. It started from a Pentium 3 in a small room where I used to write articles, and slowly and gradually it started taking the shape of a network. Now, this network has many websites under its umbrella.





Many people think that the major source of income is the advertisements on these websites. That is not the story. The story behind any professional blogger is the services that he provides at the backend. The biggest difference us and most other publishers is that we learn, we practice and then we share. To do a specific task, not everyone has the time or the energy to learn everything about it. It�s just better to find someone who already has the know-how. That�s where we, as professional bloggers, come in. As compared to a freelancer, a professional blogger has a portfolio and more credibility and people trust him more.





We currently have a large client-base, and right now we�re into phase one of our venture whereby we have set up an office and registered our company STCnetwork, which is Pakistan�s first registered company of professional bloggers. We plan to take this nationwide and to develop the first ever SEO academy in Pakistan, and we�re working hard day and night to realize that dream!



Q 3: Did you always plan on becoming an Entrepreneur?




To be honest, I didn�t even know how to pronounce �Entrepreneurship� until a few years ago, which was when I looked it up and realized that this is what I have been doing all along � I�m an Entrepreneur. I guess the freedom of creativity was the one thing that attracted me towards entrepreneurship, and I often associate the term �slave mentality� with having a job, because you are not free to do what you want and you have to do what your supervisor says to you.



Q 4: What was your family�s reaction to you becoming a professional blogger?




One of the biggest dilemma with any serious blogger � or any such professional for that matter � is the lack of support from parents. Blogging is something that has picked up pace in the last few years, and the older generation has a hard time following the concept. It takes at least 6 months for you to set up an identity for yourself, and another 6 months to get the hang of what you�re doing. When I started blogging, initially I had a very low income, and that didn�t serve as much of a motivation for my parents who couldn�t see the point of it all.





But money is never the point. My passion was to learn and to share what I have learnt. Having someone read and comment on my articles was motivation enough for me. That and my mentors helped me stay persistent and focus on my goal. My first mentors were Indians and I will never forget their help.



Q 5: You have always referred to blogging as an art. Why is that?




A blogger is a complete package of everything that exists online. A blogger needs to know the basics of web design and development, a blogger needs to be more pro-active than a journalist, because he needs to stay up to date with the latest in technology, latest in his field, and latest out there on the internet.



Q 6: What does "STC" stands for?




Back in O levels, our English teacher instructed us to write a poem to be featured in the school magazine. The poem I wrote was titled �Death Was What I Met Last Night� and it was about a boy who tries to bribe the Angel of Death to save himself. But the Angel reminds him that everything in life was just temporary, and death is an eventuality everyone has to face. The poem had a rhythmic phrase �Soon To Come�, and I adopted this phrase as a trade mark, serving to keep me grounded and to remind me that no matter how successful you are in life, you must never lose sight of the truth which each and every one of us has to face one day.



Q 7: How do you manage the workload of running multiple websites at once?




Entrepreneurship isn�t a one man job. You need a team, and you need to learn how to delegate your work. We have a team of authors; Nida Zaidi who writes from Karachi, Qasim Zaib from Islamabad, Yusra Adil from Dubai, and our latest addition Rohan from India. These are our �Ninjas� managing our sites while I handle working with our clients. The important thing isn�t just to work hard, but to work smart as well.




STCnetwork Team





Q 8: What other hobbies do you maintain apart from your work?




I love swimming, and I love riding bikes � though I wish I had a horse to ride. The best thing about life is to enjoy your leisure time, which I spend with friends. I love spending quality time with friends, and I think you�re being cruel with your life if you spend 6 days of the week working but don�t take out leisure time for yourself.





I love riding bikes, and I currently have a 125 which is my second bike. My first 125 was stolen from university grounds on my last day at university when I went to get my degree. In that sense, I like to think of my degree as having cost me a bike. Other than that, I have a family car but for leisure time and spending time with friends, a bike is your best friend, although I do not indulge in stunts because that�s not what a responsible family and business man does � gambling with your life and health for no apparent reason.



Q 9: What hurdles did you face in your business initially?




I think the biggest fear every new-comer faces is coping with the challenge of client expectations. The client pays you for a job, and expects you to do it well. The expectation serves to instill fear into new-comers, which is why I adopted a strategy � and I would recommend this to others as well � to work free of charge initially. When there are no charges, there are no expectations and it leaves you free to explore and experiment. That learning you gain from completing projects grooms you and makes you become a professional.



Q 10: If you weren�t an entrepreneur, what would you have been?




I would have looked like a spoilt kid who hangs out often with friends. But one thing I am sure of � I would never have worked at a regular job. I would have been out on the streets selling vegetables or French fries. Most people look down on such vendors and attribute their place in society to their lack of education. But the fact is, education has little to do with how happy and successful you are at your own life. The French fries vendor owns his own bicycle, his own stall, and his own stalls, and he sleeps peacefully at night, knowing that everything he has, he owns it himself.





Compare this to a corporate employee who sits in an air-conditioned room where nothing, not the chair he is sitting on, not the laptop he is working, not the company car he drives, nothing is his own. He may have more money, but I ask you, who is rich at heart? There are countless food businesses around us that began as stalls, and are now earning millions. Success is life has less to do with your education, and more to do with your hard work and good ethics.




STCnetwork Team



Q 11: What would you have done for students if you were the Prime Minister of Pakistan?




God forbid :) If I was ever the Prime Minister, I would revise university curriculum and cut down the theory to only about 30%. Our emphasis should on the practical aspects, and students should be given gadgets and resources to play around and experiment with. University curriculum is heavily padded with unnecessary skills that are of little use in the practical field. What rule book says that what you are taught in your 4th semester, you can�t learn in your 1st?





Nick D'Aloisio was a 15 year old when he developed an app Summly which summarizes long articles into one short paragraph. Yahoo bought his app for $30 Million, and now he is an internet entrepreneur working at Yahoo without having ever attended university. The founder of Whatsapp was turned down by Facebook when he applied for a job there, because he was �under-qualified�. Two years later, he sold Whatsapp to Facebook for $19 Billion.





Unless you take control of your learning, develop your skills and do the thing that puts your mind to rest, you will not be happy with your work.



Q 12: Advice for NED students who are pressured into settling?




If you are pressured into settling, if you have developed your mindset, then it is very difficult to change that mindset. So my advice to you would be to not let a single day go to waste. Work on developing a skillset. Skills and education makes you a perfect person � it makes you a scholar. Do something extra to get an edge over other fellow students, take a professional course or complete a project. If you can�t find a job, then don�t worry! Start working with someone free of cost and learn. Learn to develop the skills that are relevant to your field. Don�t pursue an irrelevant degree such as an MBA simply because you�re unable to find employment.





Time is money � don�t squander it away.


Q 13: Any words for NES (NED Entrepreneurship Society)?


NED Entrepreneurship Society




Thanks you NED Entrepreneurship Society for the interview. It is nothing short of an honor for me as an alumnus, and I will always remember this kind gesture of coming out to our office and giving us time. What you guys are doing is brilliant, and only people with great minds do it. God bless you with everything. Thank you!


Have Something To Share?


That was it for the interview. We got to learn a lot about Mohammad and STCnetwork, and how it all started. The story is nothing short of inspirational. From a guy who didn't have very favorable circumstances to someone who has established a reputable profession online, and is now working with a team to bring help and guidance to thousands of other aspiring entrepreneurs online - Mohammad has not only earned the confidence of his large client base, but has also earned respect from us and from thousands of followers of the STCnetwork. This sort of commitment is truly inspirational, and may it serve to motivate others into utilizing their time and efforts to create something productive, something unique.



All the best to the STC Network for its future endeavors, and the best of luck to you, our beloved readers and followers who aspire to make a name for yourselves and contribute positively to the society.

Let us know if this company has helped you the little in reshaping your life in some manner, do share your precious views with us. Would love to hear from you all. Peace, and God bless you all!


2 ways To Fix XML Parsing Errors in Blogger

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:

<script>
//<![CDATA[

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


//]]>
</script>

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! =)

Make Blog Images and Post Thumbnails Responsive!

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.

Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
5. Using Mobile Friendly Images in Blogger.
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

Why do you need Mobile Friendly Images?

Your blog is being increasingly viewed on smaller, slower, low bandwidth devices. On Such small screen devices your desktop-centric images will load really slowly, which can cause UI lag, and cost you and your visitors un-necessary bandwidth and money.

Therefore responsive images is the only solution to fast load speed and better SEO ranking of your blog.

Image Size differ For Different Pages

Images are used all over your blog. Inside header, footer, sidebar and mostly inside your Post content. You may wish to display small thumbnail images on your homepage posts list but you would choose to display a large image when the post page is viewed. Thus image sizes may differ for different types of pages.

On Homepage: Index Page

index page thumbnail

On Post Page : Item page

image on item page

In order to achieve this we will make use of both @Media queries and Conditional Tags to better control image appearance of our UI.

The images in Header and Post content are often wider in size compared to images in footer and sidebar. So we will style the images accordingly.

Find Parent ID's or Classes

I have written a detailed tutorial that you can read to learn how to find what is the parent class or parent ID of any HTML element on your webpage using browser inspection method.

In our case the parent classes or IDs are as follow:

  1. The Header widgets have classes - .headerright  and .headerleft 
  2. The Sidebar Column has ID (Same for you) - #sidebar .widget-content
  3. The Footer has ID - #lowerbar-wrapper
  4. The Post has the following class (Same for you) - .post

Since we are styling images and we know that all images have the <img> tag therefore we will append img class next to all the above IDs and classes and for images which are hyperlinked we will use the class a img.

Select Device Breakpoints

Now you just need to add the following CSS codes in their respective breakpoints using the CSS Responsive Cheat Sheet (Refer Part#2) . We will choose the 786px breakpoint which is ZONE4 . You will add the following CSS code inside this zone as shown below:

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

.headerright a img,.headerleft a img{
  max-width: 75%!important; 
  margin-left: 0;
  position: absolute; height:auto;
  left: 30px;}

.post a img, .post img{max-width:95%; height:auto;}

#sidebar .widget-content a img , #sidebar .widget-content img { max-width:98%; height:auto;}

#lowerbar-wrapper a img , #lowerbar-wrapper img { max-width:98%; height:auto;}

}

Importance of max-width:

A max-width property of 98% will ensure that your image width may not exceed 98% of to parent container width. Never keep this property equal to 100% else the images will overlap the parent container.

In short your image will be neatly displayed on screen, no matter how big or small it be.

Display different sized images on Homepage and Posts

If you want to display thumbnails on homepage and larger images on post page or if you wish to float images to left on homepage but display them center aligned on post page then  you can make use of the conditional tags and enclose the media queries inside it as shown below:

You will need to add this code just below ]]></b:skin>


HOMEPAGE IMAGES or Thumbnails:

<b:if cond='data:blog.pageType == "index"'>

<style>

/*-----iPhone 2G, 3G, 4, 4S Landscape View ZONE2 ----------*/

@media only screen and (max-width:480px) {
.post a img, .post img {width:95%; float:none; height:auto; clear:both; margin-bottom:10px;}
}

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:786px) {
    .post a img, .post img {max-width:50%; height:auto; float:left; margin: 0px 10px 10px 0px;}
  }
</style>
    </b:if>

In the above code:

  • the first breakpoint (480px) will give your homepage post images a 95% width and center alignment in small smartphones having width less than 480px.

Result on 480px screen - Homepage:

center aligned responsive thumbnail image

  • the second breakpoint (786px) will float your images to left of text and give it 50% max width on homepage.

Result on 786 screen - Homepage:

left aligned responsive thumbnail image

POST IMAGES:

Now for Images inside Posts you can use the following breakpoint code that we already shared earlier

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

.post a img, .post img{max-width:95%; height:auto;}

}

  • The code above will center align your images and give it 95% of maximum screen width

Result: Image on Post pages

image

You can do wonders with these conditional tags and customize your blogs for mobile devices the best you can! =)

Need Help?

You will never be able to succeed with responsive designs unless you remove confusions by asking us questions. Post your questions below and I would love to help you with all your queries. I hope this series may help you better understand some complex web designing terminologies and techniques. Wishing you guys the best of blogging and life! =)

Make Your Multi Column "Blog Footer" Responsive

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!

If you have a simple footer and looking for a multi-column footer then try one of this:
 
Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

Layout of a Basic Blog Footer

The basic structure of any blog footer consists of a Parent container followed by Child containers which resides inside the parent node. The illustration below shows a 3-column footer where the black border represents the Parent container and Pink borders represent Child containers.

basic footer layout

All you need to do is to inspect and find the IDs or classes of your Parent and Child nodes using the browser inspect tool found in both Chrome and Firefox.

BEFORE: Desktop version

desktop footer with 3 columns

 

AFTER: mobile version

mobile layout for 3 column footer

 

or you can further simplify the widgets using mobile conditional tags. In our case we have shown only one widget in footer:

responsive Blogger Footer

As you can notice that we have simplified the footer to just single widget (using isMobileRequest tag) in footer because mobile browsers are quite slow machines often due to slow internet connection and it is really recommended that you provide a fast loading experience to your Mobile readers by removing as many unwanted widgets as possible in mobile view.

In our case the IDs or Classes are as follows:

  1. The Parent container has these IDs: #lower, #lower-wrapper
  2. The Child containers have this ID: #lowerbar-wrapper
  3. The menu above footer has this ID: #menubottom-container
  4. The credit links at the bottom of footer has this ID: #credits-wrap

Add Responsive Styles to Device Breakpoints

Now you just need to add the following CSS codes in their respective breakpoints using the CSS Responsive Cheat Sheet (Refer Part#2) .

Start from 786px breakpoint which is ZONE4. You will add the following CSS code inside this zone as shown below:

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}

#lowerbar-wrapper{overflow:hidden!important;width:90%!important;padding:20px}

#credits p{text-align:center!important}

}

Thing to note:

  • At first I assigned 100% width to all parent classes so that they may fit perfectly to screen size.
  • Overflow hidden must be applied on both parent and child containers to ensure no horizontal scrollbar appears in mobile browser.
  • Then I assigned a width of 90% to Child containers to ensure they do not overlap the parent containers and go out-of-screen. The padding 20px center aligns it, making it more readable.
  • Note that I have not used display:none to remove sections that I don't want to display in mobile view, instead I have used the isMobileRequest tag to hide elements. I recommend you do the same. 
  • Finally I have centered align the text in credits container.

The footer does not need further styles to be created for smaller breakpoints. The above format of responsive styles is enough to display the footer nicely and neatly on mobile phones.

That's it! You just learned how to mobile optimize the design of your blogger footer :)

Need help?

Do let me know if you encountered problems in identifying the Parent IDs or classes of your blog footer,  I can help you with that. I am trying my best to make this advance concept as simple as possible. It may sound techy for some but if you read all parts and ask us for help, you will be able to excel the most trending skill in web designing.

Peace and blessings buddies! =)

How to make 'Posts' and 'Sidebar' column responsive?

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!

Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

Layout of content area

A Content area in blogspot is called the section which includes your blog posts and sidebar widgets. As shown in the two-column layout below, the left column includes the main Blog Widget and the right column consists of your Sidebar. Default templates have this layout structure but custom templates could be even 3 column or multi column. No matter whether you sidebar floats to right side or left, the method we will discuss today will give you a clear idea on how to make this static layout responsive.

posts and sidebar columns

BEFORE:

Posts float to left of Sidebar

 

AFTER:

The Post Column will come first in the row and the sidebar column will be pushed down just below it.

responsive posts column

The sidebar column will come second in the row:

responsive sidebar column

Find Elements' Parent Classes or IDs

I have written a detailed tutorial that you can read to learn how to find what is the parent class or parent ID of any HTML element on your webpage using browser inspection method. We will use these Classes or IDs to control their appearances in mobile devices.

In our case the parent classes or IDs are as follow:

  1. #outer-wrapper : This is the parent container that holds columns of Posts and Sidebar
  2. #main-wrapper : This is Posts Column that floats to left.
    • #main-wrapper container also includes .post and .comments classes
    • .post class is used to style the Post body
    • .comments class is sued to style the comments body
  3. #sidebar-wrap : This is Sidebar Column that floats to right.

Select Device Breakpoints

Now you just need to add the following CSS codes in their respective breakpoints using the CSS Responsive Cheat Sheet (Refer Part#2) .

We will first choose the 786px breakpoint which is ZONE4. You will add the following CSS code inside this zone as shown below:

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

#outer-wrapper{overflow:hidden!important;width:100%!important;}

#main-wrapper, .post, .comments {width:98%!important; overflow:hidden; }

.comments .comments-content {width:98%!important;}

#sidebar-wrap{float:none;margin:0 auto}

}

Thing to note:

  • Never give the Parent and Child containers the same width in %. Always keep the First Parent container (#outer-wrapper in this case) at 100% width and Child classes at at 95% or less than 100%.
  • Not keeping a width difference will make the container borders to overlap each other.
  • This is why .post and .comments are given 95% width.
  • Since the post container is given 98% width therefore it will push down the Sidebar column.
  • For sidebar column you just need to make sure to remove the floating property by setting float:none; and center align it by setting margin:0 auto;

Keep testing and adding Styles to new breakpoints

We have set the styles to 768px screen width only i.e. ZONE4. To make sure your blog pages fit in perfectly in smaller screen sizes i.e. ZONE1 ,ZONE2 take care of the widths accordingly by reducing it further.

We have reduced the posts and comments container widths further to 94% and 96% respectively as shown below.

/*-----iPhone 2G, 3G, 4, 4S Portrait View ZONE1 ----------*/

@media only screen and (max-width:320px) {

#main-wrapper, .post, .comments{width:94%!important; overflow:hidden; }

}

/*-----iPhone 2G, 3G, 4, 4S Landscape View ZONE2 ----------*/

@media only screen and (max-width:480px) {

#main-wrapper, .post, .comments{width:96%!important; overflow:hidden; }

}

You can test and play further to make margin and padding of different elements as per your preferences.

A Post body may contain related posts widget, images, post info like labels/Date/Author name/Comments Count . You can now easily customize and optimize their widths and font sizes accordingly if needed. For images I will share a post soon on how to make all images on your blog responsive. Stay tuned for that.

Need Help?

Don't hesitate asking me for help in choosing the correct parent IDs/Classes of your blog Posts and Sidebar column. The above post gives you a clear idea of how to mobile optimize your content area for small screen devices. I hope you find it useful and worth trying. Stay tuned for a lot more fun and interesting posts!

Peace and blessings buddies! =)

How To Make Blogger Header Widgets Responsive?

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.

The header dimensions in Desktop devices are often too big roughly around 1366px to fit in Mobile devices which are 768px-320px in size. Therefore we will learn today how to center align these widgets and compress their container sizes to ensure they fit perfectly in different small screen devices. Lets get to work!

Tutorial Series
1. Design a Responsive Blogger Template
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

 

Replace a Static Header with a Responsive Header

A default header is always static i.e. does not adopt to device screen size, not stretchable.  The header below is static and it contains several sections of gadgets that we need to make mobile responsive.

Before: www.mybloggertricks.com?m=0

mbt static header

Header consists of:

  1. Top Sticky bar
  2. Left: LOGO
  3. Right: Banner
  4. 2 Menus

Now after applying the CSS3 media queries we will be able to completely change the look of the Header widgets for mobile devices. As shown below, we have made simple changes to make sure every widget adopts automatically to a change in screen size.

After: www.mybloggertricks.com?m=1

mbt responsive header

Header reorganized in this format:

  1. Sticky bar is removed using isMobileRequest
  2. LOGO now covers full width
  3. Banner pushed down and covers full width
  4. Menus replaced with a responsive menu and search box. You will add this menu by reading Part#4 of this tutorial.
  5. Note that we have removed the menus using isMobileRequest (Read Part#3.2)

Liked it? Lets learn how to accomplish it!

Find Elements' Parent Classes or IDs

I have written a detailed tutorial that you can read to learn  how to find what is the parent class or parent ID of any HTML element on your webpage using browser inspection method. We will uses these Classes or IDs to control their appearances in mobile devices.

You can also find what are the classes of your header widgets by visiting the Layout page.  The bolded text that you see are your Parent classes. In my case these are headerleft and headerright as shown below

Header layout

Note: that classes start with a (.) symbol while IDs start with (#) symbol.

So in our case the parent classes or IDs are as follow:

  1. For Sticky bar it is: #bloggernotificationWrap
  2. For Logo it is .headerleft
  3. For banner it is .headerright
  4. For Menus it is #Main-Menu and #secondary-Menu

Select Device Breakpoints

Now you just need to add the following CSS codes in their respective breakpoints using the CSS Responsive Cheat Sheet (Refer Part#2) . Always start with larger screen sizes and then move to smaller break points.

Note: Refer to Part#2 of this tutorial series to understand what I mean by choosing breakpoints or ZONES

We will choose the 786px breakpoint which is ZONE4 . You will add the following CSS code inside this zone as shown below:

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

#header {overflow:hidden!important;width:100%!important;}

.headerleft{top:5px;margin-bottom:10px!important; width:100%;}
.headerright{float:none;margin:0 auto!important;width:100%;}

.headerright a img,.headerleft a img{
  max-width: 75%!important;height:auto;
  margin-left: 0;
  position: absolute;
  left: 30px;}

}

Important points to note:

  • overflow property should always be added to the Parent container to avoid the horizontal scrollbar from appearing. The parent class of header is #header in all templates.
  • Full width or 100% width is set for widgets you want to cover the entire screen and which may not float.
  • !important declaration is added when you want to force this style to override all existing styles. If in case a style is not applied that you added in your stylesheet then add this declaration.
  • I have declared a maximum width of 75% for the images inside Header widgets. They will appear in their original sizes but in case the images were too big for the Mobile screen then this declaration will take care of it and will not allow the width to exceed 75% of the full width available.

Remove Objects using isMobileRequest

Now instead of using Display:none to hide the stickybar and the menus from static header we wil instead use the conditional tag for mobile devices which is isMobileRequest and this method is SEO friendly and really speeds up the webpage.

  • Please read Part#3.2 of this tutorial to learn what this condition does.

All you need to do is to enclose the sticky bar container and menu containers inside the conditional tag as follows

<b:if cond='data:blog.isMobileRequest == "false"'>

<div id="bloggernotificationWrap">
--------------

-----------------

</div>

</b:if>

<b:if cond='data:blog.isMobileRequest == "false"'>

<nav id="Main-Menu">
--------------

-----------------

</div>

</b:if>

<b:if cond='data:blog.isMobileRequest == "false"'>

<div id="secondary-Menu">
--------------

-----------------

</div>

</b:if>

Save your template and you will find your header all responsive in a blink of an eye! :)

Need Help?

The tutorial above may sound a little techy for those who are not well versed with basics of HTML and CSS. But no worries your brother is here and the Forum community is here to help you 24/7 =)

Feel free to ask us as many questions as possible and we would love to help. Peace and blessings buddies and Happy Independence day to both Pakistan and India. May we all prosper and live happy forever. God bless you all! ^_^

Create mobile-friendly websites in just a few clicks with uKit!





uKit is an advanced website builder that lets you create business websites with a simple drag and drop interface. A complete framework with excellent 24/7 customer service and support





Design Mobile Responsive WebsitesTechnology is developing rapidly and so is the usage complexity with several new Web tools and Mobile apps. Since more and more internet users are turning into webmasters and publishers, the need for an easy-to-use and drag-and-drop website builder is the biggest demand today. Not everyone is well versed with the technical side of designing and developing a website and not anyone can afford the expensive costs of hiring a web developer.  For people who lack coding skills, we recently came across a Web application called uKit, that really impressed us a lot. The website code that uKit generates is semantic, standards-compliant and highly optimized for SEO. It lets you choose templates from several themes, you can edit and customize your website by simply moving elements around and publish it within seconds. No headache of Coding, Webhosting or Optimization is involved. uKit is so far the simplest solution for Small Startup Businesses to kick start their online business dreams by focusing only on their clients/customers without wasting precious time on website development. It lets you create a mobile friendly and responsive website within seconds without any coding skills required.

The video below explains it all:

 

What Makes ukit unique?

uKit became available to the public in May 2015, offering a free 14 days initial trial, which gives you the opportunity to fully enjoy the system's capabilities before applying for a premium package. If you have any questions or need fast assistance you can directly contact their Technical Support. They also provide Live Customer Support inside the Admin Panel of your Website, and its only thing that outstands them from others. It's surely not a Fly-by-night company but managed and marketed by a corporate firm with an amazing customer service.

They also have a Official Blog where they keep the community informed of recent updates and backstage news.

No business should be trusted unless it has an active customer support or offers a free trial. You can test uKit for free for almost half a month before you could decide to finally upgrade with just $4. This again is a prove of their credibility and the reason which forced us to recommend them to all our readers.

15 days free trial 

Wide Choice of Designs & Design Categories

Appearance matters a lot and we have honestly rarely seen such a comprehensive collection of website designs that we found here.

Partial List of Categories are:

  • Emcee for showmen, event hosts and entertainers;
  • Music for singers, bands and other music-related websites;
  • Construction for businesses providing building and renovation services;
  • Nail Design for nail salons and individual nail artists.
  • Exhibitions,
  • Fashion Model,
  • Tattoo Artist,
  • Flower Shop.
  • Several Designs added weekly!

When you are choosing a design in the Dashboard Wizard, you can click on the Preview button to browse all pages of the design, see how it looks on desktops and mobile devices, and decide whether it suits your needs or not.

Choose a Design theme

If you would like to test a certain design more thoroughly, you can also select it and proceed to website editing.

Test Designs

The number of websites per account is unlimited, and you can experiment with designs as much as you need.

Simple Drag and Drop

For non-techy people, what can be more pleasing than the drag-n-drop feature which lets you to add highly advanced web widgets like Gallery or slider using only your mouse cursor. I really liked this feature because modern portfolio websites or ecommerce sites look great when the landing page has a welcome slider.

Drag and Drop Widgets

Build your Online Store in seconds!

The built-in Business tools like content let you add amazing functions in your website. You can sell products on your website using the ECWID Shopping cart option

Eccomerce tools

you can also collect customer feedback using the Reviews plugin tool and do much more!

Customer Reviews Tool

Strong Backup system

ukit Backup Archive

Unlike Wordpress and Blogger CMS, uKit provides a much better Support for Automatic and Manual Backup. You can manually save your changes before making a new customization. You can then access it anytime through the backup archive. The Automatic Backup function is direct access to the saved copies. It allows you to replicate your site in its previous or earlier states in case you decide that the current one is for some reason not the ultimate one.

What are your Views?

We will keep on sharing such valuable resources to help our community as much as possible with the most trusted, industry-standard tools and applications that may make your online journey even more worthwhile.

Let us know buddies, which feature of uKit inspired you and what are your views on using an automated CMS system like the one we shared today. Is it worth wasting hours on web development or is it much better to invest that extra time in developing your business and Client base and let a tool like Ukit handle all the technical side?

Do share your precious views with us :)