Responsive designs have become a part of professional web designing these days. Even you have a website or blog. Everyone prefers responsive web design. Many big blogs are now using responsive web design instead of separate mobile versions.
Responsive design also reduces loads and even SEO friendly. But the main question is we can design a website template as responsive, but can we design Blogger based model as sensitive? Yes, you can. Blogger is the largest CMS platform for blog development.
Template designing is much more comfortable in blogger as compare to WordPress. But we always think that the blog theme is not such professionals as the WordPress theme, but I don’t think so. But if you still don’t want to try, then We recommend you review this list of best responsive blogger template.
For attractive template designing, we need to use HTML, CSS, JS, jQuery, Bootstrap. These are enough to design a beautiful template for blogger. Today we will teach you how you can make a responsive blogger template easily.
What Does Responsive Design Means. ?
Responsive Design is a way to use the same theme for devices. In other words, responsive make design compatible for different size devices like Desktop, Laptop, Tablet, Smartphones.
We Make a responsive blogger template by using style sheets means it reduces the load of coding. These days, every blog prefers responsive instead of a separate mobile version. ,
And, the major problem with the mobile version is it’s not useful for different screen sizes, like if the website design is according to the smartphone, then it may not work correctly on tablets. So this problem is solved by Responsiveness.
To Check or Test the Responsiveness of your design you need the Test Responsiveness tool.
How To Make Responsive Blogger Template. ?
Before continuing with this process, make sure that it requires basic knowledge about HTML5 and CSS3. We only can guide the method to create a responsive blogger template. Implementation depends according to your template codes. It means all the class and id vary from model to model, so there is no fixed pattern to do this.
- First of all, open your Blogger Blog >> Then Go to the template section.
- Click on Edit HTML and then paste below-given meta code just below <head> tag.
- Now Add Responsive Style sheets search for code which looks like ]]></b:skin>
- Then paste responsive codes just above it.
Here is the sample of all CSS queries need to make a responsive blogger template. you have to paste them and then start adding your current classes and id of CSS for responsiveness.
@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 format and replace /* CSS CODE HERE —*/ for all devices with CSS codes of all classes and id of Header, Post Body, Sidebar, Footer, and other section of your blog.
@media screen tag is to make CSS responsive for working different screen sizes.
(max-width : **px) is for maximum width up to which codes will work just like if you place code in the section of 320 it means when the screen size is smaller than 320 then your code will work and if the screen size is larger than 320 then it will not works.
But one the other suppose if you place CSS in size 480 but not in 320, that means code to place in 480 works from the Range of Size (0 – 480). But if place any CSS for the same class or id in 320, then CSS codes of 480 will work in range (320 – 480).
Let’s See an Example.
{
#wrapper { width:100{e66e6f15cd857a101efbf20a7a941ba5467be7d37c5afcb20afd7fa48b899e63}; margin:0px auto; }
#header { width:100{e66e6f15cd857a101efbf20a7a941ba5467be7d37c5afcb20afd7fa48b899e63}; }
#content { margin-right:0; width:100{e66e6f15cd857a101efbf20a7a941ba5467be7d37c5afcb20afd7fa48b899e63}; float:left; }
#sidebar { display:none; }
#footer { display:none; }
}
Note:- Don’t use the same classes, ids, and CSS shown in the example. This is just to explain the format become for each media screen. In the same way, you have done for all sizes.
Use classes and ids used in your blogger template for Wrapper, Header, Content, Sidebar, Footer, and other small sections, and then add CSS codes.
Some Important CSS Queries For Responsiveness.
1. Always use Width in {e66e6f15cd857a101efbf20a7a941ba5467be7d37c5afcb20afd7fa48b899e63} instead of pixels just like Width:50{e66e6f15cd857a101efbf20a7a941ba5467be7d37c5afcb20afd7fa48b899e63}; or adjust percentage according to our requirement.
2. Always use em for size instead of px like 10em instead of 10px.
3. Margin: auto; for alignment into the center and it using values for margin from the left or right then use them in {e66e6f15cd857a101efbf20a7a941ba5467be7d37c5afcb20afd7fa48b899e63}
4. Display none; to hide any particular section.
Important Note:- Sometimes, while designing a responsive template, we may feel that our codes are not working. The responsive system will open works if the width of your whole section should be in {e66e6f15cd857a101efbf20a7a941ba5467be7d37c5afcb20afd7fa48b899e63}. For example, if you make a responsive header but not content and sidebar, then it will be difficult for you to check whether it is working or not. Because in case if your section has a fixed width, then it will don’t let your code work to show responsiveness.
So the best way is to upload a template on the testing blog and remove all other sections and then add only responsive to test.
Responsive Design Or Mobile Version? Which Is Better?
- Responsive Design is SEO Friendly as compare to a separate Mobile version.
- Responsive design adjusts itself according to all dimensions Like on smartphones, tablets, or other devices.
- It reduces site loading speed, which means your overall performance will increases.
- Responsive Designs also increase your Earnings, and you can use a responsive AdSense ad unit to maximizing your earning.
In conclusion, we hope you like this blogging tutorial and learn how to make a responsive blogger template. This article is to explain how sensitive codes work, but if you are not familiar with HTML and CSS, then we only suggest you hire someone to make a responsive blogger template.