By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
Blogbeast
  • Adsense
  • Blogger
  • WordPress
  • Social Media
  • SEO
  • Tips
  • Offbeat
Search
© 2022 Foxiz News Network. Ruby Design Company. All Rights Reserved.
Reading: How To make your blogger theme responsive
Share
Sign In
Notification Show More
Latest News
What is blogging and how to make money from it?
What is blogging and how to make money from it?
Offbeat
How To Make Money from Blogging
8 Fastest ways on How To Make Money from Blogging
monetization
What is wordpress plugin
20 Best WordPress Plugins for your Websites in 2022
wordpress
How to Uninstall Wordpress Plugins manually
How to Uninstall WordPress Plugins completely with Shortcode
wordpress
What is wordpress plugin
What is wordpress plugin ? How to install WordPress plugin in 4 easy methods?
wordpress
Aa
Blogbeast
Aa
  • Adsense
  • Blogger
  • WordPress
  • Social Media
  • SEO
  • Tips
  • Offbeat
Search
  • Adsense
  • Blogger
  • WordPress
  • Social Media
  • SEO
  • Tips
  • Offbeat
Have an existing account? Sign In
Follow US
© 2022 Foxiz News Network. Ruby Design Company. All Rights Reserved.
bloggertips

How To make your blogger theme responsive

admin
Last updated: 2022/08/27 at 5:48 PM
admin
Share
4 Min Read
SHARE

Responsive Designs becomes a part of professional web designing in these days. Even Your website or blog everyone prefers responsive web design. Many of big blogs are now using responsive web design instead of different Mobile versions. Responsive design also reduce loads and even a SEO friendly. But the main question is we can design website template as responsive but can we design Blogger based template as a responsive? Yes you can. Blogger becomes a big CMS platform for blogs development. Even blogger have many great features as compare to WordPress. Template designing is much easier in blogger as compare to WordPress. But we always think that blog theme are not such professionals like WordPress theme but I don’t think so. For attractive theme designing we need HTML, CSS, JS, jQuery, Ajax like few designing languages which are enough to design an attractive theme and these are compatible with Blogger.

A blogger template is made responsive by using special CSS rule which is called @media query. It works like conditional tags in blogger and If Else statements in JavaScript.

The value which we will use in this @media query is “screen” which will determine and adjust the design layout according to screen widths on different type of devices.

Let’s understand it. As I said above we use this query like conditional tags and adjust the design layout according to screen width using @media query. It means we will set a screen width value in our @media query and then use our desired CSS syntaxes to adjust width, positioning, size and other values of our HTML elements.

Now we proceed to learn their usage for making a responsive blogger template.

Before using CSS @media query in our blog, we have to insert a following Meta tag in the head section of our blogger template.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

To add it in your template go to blogger dashboard> Template > Edit HTML. Click anywhere inside the template HTML editor and press CTRL+F. Now search for <head> tag and just below it paste the above tag. It makes @media query functional to adjust the layout as the screen width changes. To add them in your template, search for ]]></b:skin> tag in template and paste following example codes just above this tag.

@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 SMARTPHONES */ }
@media screen and (max-width : 320px)
 { /* CSS FOR SMALL OLD MOBILES */ }

Replace the example text inside /* with the CSS rules you want to use for the above device types according to their screen widths.

In the above queries, max-width is used to specify the screen width up to which the CSS codes will work. In the above example we have set max-widths for nearly all type of devices. By using separate coding for each class of devices, we make sure that they don’t interfere each other and responsive design works properly on each device.

If this article has become knowledgeable and helpful to you then don’t forget to comment below and share this on social media. Thank You!

You Might Also Like

How to make a Biolink for Instagram on Blogger

How to add a cookie consent notification to Blogger

Difference between Blogger and WordPress | Best blogging platform in 2022

How to Permanently Delete Snapchat Account

Share this Article
Facebook Twitter Copy Link Print
Share
Posted by admin
Follow:
Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.
Previous Article How to Add Simple Stylish Recent Posts Widget For Blogger
Next Article How to become a Game Developer in India ?
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Stay Connected

235.3k Followers Like
69.1k Followers Follow
56.4k Followers Follow
136k Subscribers Subscribe
- Advertisement -
Ad imageAd image

Latest News

What is blogging and how to make money from it?
What is blogging and how to make money from it?
How To Make Money from Blogging
8 Fastest ways on How To Make Money from Blogging
What is wordpress plugin
20 Best WordPress Plugins for your Websites in 2022
How to Uninstall Wordpress Plugins manually
How to Uninstall WordPress Plugins completely with Shortcode

We influence 20 million users and is the number one business and technology news network on the planet

Follow US

© 2023 BlogBeast. All Rights Reserved.

Removed from reading list

Undo
Welcome Back!

Sign in to your account

Lost your password?