Skip to main content

How to make Blogger template Responsive & mobile friendly

How to make blogger template responsive

     You are thinking How are Responsive Layouts Designed. For me it's very simple to design responsive blogger template. In fact every template can be changed into responsive template. The only thing you need to know is HTML and CSS. If you know both,  then it will be very easy to make your template responsive.

Every template can be made responsive in just 2 simple ways which are: 
1. Meta viewport.
2. @media queries.
     Normally browsers opens Web Pages in desktop view. It is OK to view Webpages in desktop but when you open your Web Pages in mobiles or low resolution screens, It becomes very hard to read and click on links.

     You have to zoom every time you want to read a portion of Webpage. To overcome this situation we need to help our browser in detecting device-width which is done with metaview ports.

     Meta viewport helps in detecting device width for the browsers. Now the next step is to add media queries. In media queries we use custom CSS for different screen sizes. Media queries acts as the conditional if else tags for the browsers. 

     Example. For desktop view you set 3 column view and for tablet you use 2 column view and similarly you use single column for mobile phones. Now when a person opens your website,  then the browser will detect screen size with the help of meta viewport and then will call appropriate css for that device.

     To make your website responsive you need to follow two basic steps which I will explain below.

Step by step to make responsive templates.

Step 1:  add meta viewport just below the <head> tag of your blogger template.
<meta name="viewport" content=" width=device-width, initial-scale=1, maximum-scale=1"/>

Step 2: Add media queries to your css file.
/* Laptops & Desktops */
@media only screen and (max-width : 1280px) {
/* css here will be rendered if and only if device width is less than 1280px */
/* Tablets 1024px */ @media only screen and (max-width : 1024px) { /* css here will be rendered if and only if device width is less than 1024px */ }
/* Tablets 768px */ @media only screen and (max-width : 768px) { /*  css here will be rendered if and only if device width is less than 768px */ } /* Phones 640px */ @media only screen and (max-width : 640px) { /*  css here will be rendered if and only if device width is less than 640xpx */ }
/* Phones 480px */ @media only screen and (max-width : 480px) { /* css here will be rendered if and only if device width is less than 480px */ }
/* Small Mobiles 320px */ @media only screen and (max-width : 320px) { /* css here will be rendered if and only if device width is less than 320px */ }

Helpful Tips:

1. Always Use percentages in writing CSS values instead of numeric values to define width of columns. This will make your template highly responsive.
2. Always use  max-width, box-sizing, and min-width properties.
3. Use css like below and only make changes with percentages.
@media only screen and (max-width : 320px) {
.sidebar{ width: 100% ; float: none; }
4.  If you want to hide any particular section just use Display:none; in the css.
         Note: there are many breakpoints for media queries but here I show only common breakpoints that are sufficient for every type of device width. You can see my template which is highly responsive and I use only these media queries.

How to enable responsive template for blogger mobile.

     If you successfully followed all the above steps then it's time to activate your responsive template for blogger mobile view.
Step 1: Go to Blogger Dashboard.
Step 2: Click on Template.
Step 3: You will see a gear icon in mobile template. Click on that icon.
Step 4: Now you have to select " Custom ”
Step 5: Save all the changes.

How to make blogger template mobile friendly without editing template and media queries

     If you find about method difficult or you don't know how to use media queries with css. Then you need to use this method to make your blogger blog mobile friendly.
Step 1: Go to Blogger Dashboard.
Step 2: Click on Template.
Step 3: You will see a gear icon in mobile template. Click on that icon.
Step 4: Now you have to select “Yes. Show mobile template on mobile devices.”
Step 5: Save all the changes.


Post a Comment

Comments that are not related to this post will be deleted.
Spammers please stay away.

Popular posts from this blog

Submit your Business Website to 100 Free Search Engines | SEM | add url for free

Friends, the first step to off page SEO is URL submission. This step is mandatory because search engines do not know about your sites. So whenever you publish a new blog or website please submit your site to top search engines.
      Here you will get free search engine submission sites list to add URL to all search engines. You can use URL submitter to submit your site in one click but it will be good if you manually do URL submission. The reason for manually submitting your site is keywords. If you use URL submitter then you will not able to provide exact keywords to all search engines. 
     So do a free web submission by using top 100 search engines which are listed below. You don't need to register for submitting your Homepage Links in all major search engines. Example: In google you can directly add your site's address for free.
     The need for doing search engine submission is to get organic traffic + backlinks to your website from all major search engines. Yes,  …

22+ Social Bookmarking Sites List Without Registration | Working

Social bookmarking sites are very helpful in gaining quality backlinks no matter they are no follow or do follow ones, but they are of very good quality and high Page Rank.

      These sites gives you boost in traffic and also help you in better search engine rankings(SEO benefit ) without doing any user registration. 
     However, some people tried to get back links of do follow type and then their balance of dofollow vs nofollow  backlinks becomes unstable. In this case when you have more do follow back links as compared to  no follow ones, a manual review of backlink profile is done by google's anti-spam team.
     So its better if you create both dofollow and no follow backlinks to your site. So I am giving you below a list of dofollow social bookmarking site for 2020-2021(Updated). 
     Register there and start optimizing social sites. Don't start spamming because these sites are trusted ones. In future they can help you in many ways, so its better to run your account,…

How To SEO Optimize Your Blogger Blog Titles For Higher Search Results

SEO that is search engine optimization is a vital part of marketing your blogger blog. Blogspot blogs are well known for fully optimized but still need some tweaks in the templates like swapping of blogger/blogspot Title for higher search results. Bloggers blog are fully optimized because these are Google's blog and everyone knows Google defines the algorithms and rules for search engine optimization. When I check my template I found everything is well managed like heading tags, blog titles, blockquotes, backlinks( no follow if links are external), comment links are no follow, and many more tweaks are done in google's blogger.

Read: 7 Seo friendly Template edits for Blogger Blogs.

     Today we are giving a way to SEO Optimize your Blogger's blog post titles. Swapping blog titles can give your higher search visibility, higher click through rates, and boost in your search engine rankings. If you ask a SEO expert about post titles then he will tell you how important ar…

Top 100 forum sites list in india

Forums are the best way of generating quality backlinks and to make a online business successful. In India we should have quality backlinks from Indian forums to get Indian business, that's why I decided to create a list of 100+ do-follow forum sites which are based in India and have high Page Rank and domain authority. These sites have 90% of Indian traffic, so it is easy to target Indian traffic for free.
      We also have list of forums which are USA and UK based. In this post I created a list in 4 parts, 1st part consist of SEO related forums, 2nd contains forums of webmaster, 3rd is of gaming type forums and 4th is for chatting and discussion forums. I hope you will get appropriate forum for developing your business and niche. Feel free to comment below if these sites helps you.

Social Bookmarking Sites List Without RegistrationDofollow social bookmarking sites listDofollow Photo Sharing Sites100 Top Indian Classified sites

55+ list of SEO related forums. http://w…