How to Make Blogger Template Responsive and Google Friendly
In this Article you will learn to make Your Blogger template responsive in 2 Minutes.
Google change their search algorithm on 21 April 2015 and Now Google ranks those websites more in the search results which are Mobile Friendly and more responsive.
Now every Blogger who have already setup his/her blog on non Responsive Template is in hurry to move to a responsive template, many of them changing the whole template and Uploading the new on BUT some genius Bloggers are making their existing template a responsive one.
There are many Bloggers who don't know about the basic HTML editing so they are very sad about How to make a Blogger Template responsive, If You one of those Bloggers and Want to Make Your Blogger Template responsive than Keep on Reading this Article is for You.
Now put the following code just below the <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
You can also add your own CSS with your Choice and Flavor.
This is a very simple and easy way of making a Blog Template responsive, you do not need to change the entire template or pay some for Modifying your Template.
If you have any Problem then just use the comment box of this page, any author of Ready 24 will help you anytime.
Google change their search algorithm on 21 April 2015 and Now Google ranks those websites more in the search results which are Mobile Friendly and more responsive.
Now every Blogger who have already setup his/her blog on non Responsive Template is in hurry to move to a responsive template, many of them changing the whole template and Uploading the new on BUT some genius Bloggers are making their existing template a responsive one.
There are many Bloggers who don't know about the basic HTML editing so they are very sad about How to make a Blogger Template responsive, If You one of those Bloggers and Want to Make Your Blogger Template responsive than Keep on Reading this Article is for You.
What is a responsive Template?
Responsive Template is template which can fit on any Computer Screen without any horizontal Navigation, Responsive Template or Website/Blog can be open on Desktop, Net-book, Tablets, small tablets or on Mobile of any size. Just The Template of this Blog.
How to make a Blogger Template Responsive?
Making a Template or Modify a Template is all about Coding and CSS, so CSS is must for you to make the Blog Responsive. You can use Media Queries Special tag (@media) for making Blog template responsive, (@media) tag has different Values for different Screens Thats what we are going to set in the Tutorial.
One thing we should do before adding CSS and (@media) tag is adding <meta> tag just below the <head>.
So lets Move on to the Steps for making the Blog template responsive.
One thing we should do before adding CSS and (@media) tag is adding <meta> tag just below the <head>.
So lets Move on to the Steps for making the Blog template responsive.
Step 1:
Go to www.Blogger.Com and Sign in with your blogger account. Now go to Template >> Edit HTML.
Click inside the code area and press CTRL+F, a search Box will open up Just type <head> and press Enter to find it.
Click inside the code area and press CTRL+F, a search Box will open up Just type <head> and press Enter to find it.
Warning: Don't Forget to Save a Copy of your original Template before modifying it.
Now put the following code just below the <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
Step 2:
Next thing is adding (@media) with its values, So here is the media tag with different queries,
Add this code above ]]></b:skin> after searching ]]></b:skin> in the search box and it will start working.
@media screen and (max-width : 1280px) {
/* CSS FOR NET-BOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
After Adding the code don't forget to Click the SAVE button.
Add this code above ]]></b:skin> after searching ]]></b:skin> in the search box and it will start working.
@media screen and (max-width : 1280px) {
/* CSS FOR NET-BOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
After Adding the code don't forget to Click the SAVE button.
You can also add your own CSS with your Choice and Flavor.
This is a very simple and easy way of making a Blog Template responsive, you do not need to change the entire template or pay some for Modifying your Template.
If you have any Problem then just use the comment box of this page, any author of Ready 24 will help you anytime.
It works on my blog. Inamworld.blogspot. com
ReplyDelete