Make Your Blogger Theme Responsive

0
163
Make Your Blogger Theme Responsive

Make Your Blogger Theme Responsive

Make Your Blogger Theme Responsive

How to Make Your Blogger Theme Responsive

This article will help you to Make Your Blogger Theme Responsive. Here am writing this for new bloggers.

Responsive designs have become a part of expert web designing in these days. Even you have a website or blog. Everyone favors responsive web design. Many of big blogs are now practicing responsive web design rather of separate mobile versions. Responsive design also reduces loads and even an SEO friendly. We can create website template as responsive, but the question is, can we create Blogger based model as a responsive? The answer is Yes, you can. Blogger is a largest CMS platform for blogs development. Template designing is much easier in Blogger as compare to WordPress. For attractive template design, we need to use HTML, CSS, JS, jQuery, Bootstrap. These are enough to create a beautiful template for blogger. Today we will share you how you can make responsive blogger template quickly.

Do You Know About Responsive Design?

Developing a responsive design is a way to use the same theme for devices or responsive make design compatible with devices of different sizes like Desktop, Laptop, Tablet, Smartphones. We Make responsive blogger template by using style sheets means it reduces the load of coding. In these days every blog prefers responsive instead of separate mobile version and the biggest problem with mobile version is it is not useful for different screen sizes like if the website has designed according to the smartphone then may not work correctly on tablets. So this problem is solved by Responsiveness.

To Check Responsiveness of your design, Click on the link below.

Test Responsiveness


Here Are The Steps To Make Your Blogger Theme Responsive

Before continue with this process ensure that it requires basic knowledge of HTML5 and CSS3. We only can guide about a method to make responsive blogger template. Implementation entirely depends on according to your template codes. Means all the class and id vary from template to template, so there is not a fixed pattern to do this.

  1. Open your Blogger Blog >> Template Section.
  2. Click on Edit HTML and then paste the meta code given below under <head> tag.
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″/>
maximum-scale=1″/>

3. Add Responsive Style sheets search of code which looks like

]]></b:skin>”

4. Then paste responsive codes just above it.

Here is a sample of all CSS queries require to make responsive blogger template. You have to paste the code in the inverted commas and then add your current classes and id of CSS for responsive design.

@media screen and (max-width : 1280px)
{
/* For Size Screen Less than 1280px —*/
/* CSS CODE HERE FOR DESKTOP —*/

 @media screen and (max-width : 1024px)
{
/* For Size Screen Less than 1024px —*/
/* CSS CODE HERE FOR TABLETS —*/

 @media screen and (max-width : 768px)
{
/* For Size Screen Less than 768px —*/
/* CSS CODE HERE FOR SMALL TABLETS —*/

@media screen and (max-width : 640px)
{
/* For Size Screen Less than 640 —*/
/* CSS CODE HERE FOR IPHONE —*/

@media screen and (max-width : 480px)
{
/* For Size Screen Less than 480px —*/
/* CSS CODE HERE FOR SMARTPHONES —*/

 @media screen and (max-width : 320px)
{
/* For Size Screen Less than 320px —*/
/* CSS CODE HERE FOR SMALL MOBILES —*/

Copy and paste the above codes and replace /* CSS CODE HERE —*/ for different devices with CSS codes of all classes and id of Header, Post Body, Sidebar, Footer and other sections of the blog.

@media screen is a tag used for making CSS responsive for various screen dimensions.

” (max-width : **px) ” is the maximum width up to which codes will work just like as you paste the code in the part of 320 it means when the screen size is smaller than 320 then your system will work and if the display size is above 320, it will not works.

But on the other assume, if you place the CSS in size 480 but not in 320 that means codes are put in 480 works from the Field of  Size (0 – 480). But if place any CSS for same type or id in 320 then CSS codes of 480 will run in range (320 – 480).

Lets look at an Example.

@media screen and (max-width: ****px)
{
#wrapper  { width:100%; margin:0px auto; }
#header {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer { display:none; }
}

Note: – Don’t use similar classes, ids, and CSS shown in the example. It is just to illustrate the format for each media display.

Use classes and ids which used in blogger template for Wrapper, Header, Content, Sidebar, Footer, and other section and add CSS codes.

Also, Read How To Add Image Gallery To Your Blogg

Some Useful CSS Queries For Responsive Interface

1. Use Width in % preferably of pixels just like Width:50%; or set percentage according to our need.

2. Use em for size rather of px like 10em in place of 10px.

3. Margin: auto; for arrangement into the center and it uses values for margin from left or right and then uses them in %.

4. Display: none; to cover any particular section.

Yes now you Make Your Blogger Theme Responsive

Important Note Sometimes while developing a responsive template we may feel that our codes are not working. The responsive system will open works if your whole sections width should be in %. For example, It makes responsive header but not content and sidebar then it will be difficult for you to check whether it is running or not. Because, if your section has fixed width then it will not lets your code run to display responsiveness.
So the best method is to upload template on a testing blog and delete all different parts and then add responsive to check.

Difference Between Responsive Design And Mobile Version

  • Responsive Design is SEO Friendly as relating to separate Mobile version.
  • Responsive design adapts itself according to all sizes Like on Smartphone, Tablet, and another device.
  • Responsive Design diminishes site loading speed that means your overall appearance will increases.
  • Responsive Designs also increase your Earnings, and you can use responsive AdSense ad unit for maximizing your economy.

We hope you like this tutorial about Make Your Blogger Theme Responsive and get some information on how to make the blog theme responsive. This article is just to explain how sensitive codes work but they are not close with HTML and CSS.

We hope this article will help you to Make Your Blogger Theme Responsive. Share this article with your friends and teach them. If you have any doubts or questions please comment below. Our team will reply you within 48 hours.