How to Create a Responsive Layout View For Blogger Templates?
Before some days, I have written a post about Google Started Showing Mobile Friendly Labels in Search Results and there, I have mentioned that Responsive Templates get Mobile Friendly Label on their site's description. So today, I am going to tell you how to make your template responsive.
What's the mean of Responsive Templates? - Responsive Template are Templates that adjust itself according to the screen sizes. Their are @media tags which enable widgets to change their place on different screen size. Like: If you resize your browser when surfing on Blogger Guiders, you will see that some widgets change their place on small screen and even some hide itself.
If you are a owner of your blog and wanna get it popular and let it easily found by the use of Google Search, it is important that you must make your template responsive because template responsiveness is also a part when Google rank your site. All popular blogs like MBT, MBL, Blogger Yard, Helplogger make their template responsive to make their mobile visitors comfortable when they read their post. If you have a blog whose template is not responsive, your mobile visitors will simply leave your site and think that you are careless about mobile visitors of your blog.
How to Make Your Template Responsive?
Making your template responsive is not an hard work but also not so easy. You have to choose which widget you want to show on mobile and which to not. Here are the Cheatsheet by which you can make your template responsive.
First, You have to add this viewport meta tag. This meta tag will auto adjust your blog's content according to the screen size. Without this viewport tag, your blog's content wont adjust as smoothly in mobile phones as it does when you stretch and shrink the browser window in desktop computers.
- Add this tag just bellow <head> in your template's HTML.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
- Use the following Responsive Stylesheet while adding mobile Classes
/* -----------Responsive Styles Cheat Sheet-----------------*/
@media only screen and (max-width:320px) {
}
@media only screen and (max-width:380px) {
}
/*-----iPhone 2G, 3G, 4, 4S ----------*/
@media only screen and (max-width:480px) {
}
/*-----iPhone 5,6 ----------*/
@media only screen and (max-width:568px) {
}
/*-----iPad, Tablet, Kindle, Nexus ----------*/
@media only screen and (max-width:930px) {
}
@media only screen and (max-width:1024px) {
}
@media only screen and (max-width:768px) {
}
- This Cheatsheet work with both best platforms which are Blogger and WordPress. Remember to add this Cheatsheet above ]]></b:skin> to make sure that they override all previous styles.
.classname{display:none}
OR
#idname{display:none}Remember: In HTML, classes are denoted with dot (.) and ids are denoted with hashes (#). So don't forget to take care of these dot and hash when adding any command for mobile views.
Suggestions:
1. Try to remove everything from header. Only show your blog's logo or title.
2. Make the content wrapper's width 100% because mobile visitor don't see your template. They just read your posts.
3. Try to show only 1 widget at footer.
4. Try to add display:none on mostly all sidebar widgets. Show only some widgets like Social Box.
5. Edit the font sizes, margins and padding according to screen sizes.
6. Check your template at mobiletest.me and observe which widget is not looking good in which screen size and edit it.
Final Words from Author
Yeah! Its a time taking work. You can't do it in some minutes or in some hours. You have to give at least 2 days to your blog's template. Any person who have small knowledge and little experience of HTML can do this work easily but any real newbie can't do this work. They can try Responsive Templates for blogger and learn little html. If you find this post knowledgeable, kindly share us on your favorite social networks. Thank You!
0 Response to "How to Create a Responsive Layout View For Blogger Templates?"
Posting Komentar