How to Create a Responsive Layout View For Blogger?


#1

Hello to One n All, I want one little help from you guys. I have created a template on my own blog, PFCI Tech! Now, I am on the way of making it responsive, I know a bit that how to make a template responsive. But I really can’t think which widget I will show on mobile or desktop. Can You guys provide a responsive code according to my template? I want to make some widgets responsive Like Notification bar, Blogger Yard Subscribe Box at Sidebar.

Please Help me Guys, And Thanks for Creating this Forum


How to "Fix mobile usability issues found" In Blogger Templates?
How to customize Blogger Navigation menu bar code
#2

While designing responsive stylesheets for your blogger blog, you just need to make sure to focus a lot on the Content area and Header but less on sidebar widgets and the footer widgets because they mean little when it comes to Mobile load time.

Here are some tips that will help you to create a fluid and flexible layout for your blog

Creating a Responsive Layout

Add the following viewport meta tag that will auto adjust your blog content to device screen size, Without this viewport tag your content wont adjust as smoothly in mobile phones as it does when you stretch and shrink the browser window in desktop computers.

Add this tag just below <head> tag

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
  1. Use the following Responsive Stylesheet while adding mobile Classes

Responsive Styles Cheat Sheet For Blogger Blogs

/* -----------Responsive Styles Cheat Sheet by MBT -----------------*/
@media only screen and (max-width:320px) {
}

@media only screen and (max-width:380px) {
}

/*-----iPhone 2G, 3G, 4, 4S ----------*/
@media only screen and (max-width:480px) {
}

/*-----iPhone 5,6 ----------*/
@media only screen and (max-width:568px) {
}

/*-----iPad, Tablet, Kindle, Nexus ----------*/
@media only screen and (max-width:930px) {
}

@media only screen and (max-width:1024px) {
}

@media only screen and (max-width:768px) {
}

The above breakpoints is what I use while designing templates for blogger and wordpress and it works best in both platforms. Remember to add the cheat cheat just above ]]></b:skin> to make sure they override all the previous styles.

  1. Start from the Header and try to show nothing there but your blog logo and a simple responsive menu. Check the MBT responsive view

  2. Next give a 100% width to your Content area. i.e the post-body class. Edit the font sizes and margin/padding accordingly

  3. Give 100% width to Sidebar section and widgets and try to add the display:none CSS property to all widgets that you don’t want to show in mobile view but never to ADS.

  4. Give 100% width to Footer widgets

  5. Play with your stylesheet and test the changes at mobiletest.me which offers several device emulators

A Responsive layout is nothing but adding a viewport tag and then the Cheat sheet that I shared above where you will add the customized CSS classes. Let me know if you need more help


Is it possible to make a custom blogger template only for mobile?
How to modify number of posts on Mobile Template
Tonight Blogger Blogs will see a Massive Traffic Drop by Mobile-Friendly Google's Algorithm
Is your site mobile-friendly? April 21st - Change will affect mobile searches in all languages worldwide
How to Remove Duplicate Meta Descriptions in GWT Under HTML Improvements?
How To Make HTML Tables Responsive in Blogger Posts?
#3

@Shivansh You can customize the appearance of the widget using the value “%” instead of “px”. I did it and it worked fine. However there are some widgets do not work. example “like facebook” so I choose to hide

@Mohammad I have tried to make my blog responsive, but when it appears on the screen 240px, but displays 300x250 ad unit then it gives additional space so that forced me not to display 300x250 ads unit on the display 240px.

is there a way to help?


#4

For that you must use the asynchronous code provided by Adsense which automatically adjusts its size based on device screen size. It is the responsive version of Ad unit


#5

@Mohammad, I use a 300x250 ad on the post like MBT, if I change it to ad-responsive, it will turn into a post size (500px) when displayed on the desktop. so I still use 300x250 ad but using code ( display:none ) when the display screen below 320px


#6

Never use display:none for AdSense, it will simply ban your adsense account and it is against their Terms of Service. CSS Display property only hides the ad but the JavaScript is still executed and rendered, the ad will still run.

You can continue using 300 X 250 , the rectangular version only improves revenue


#7

but at less than 300px wide screen, 300x250 ads will add a vertical scroll. I tried to avoid it but have not found a way

when I let the 300x250 ad appears on 240px screen, it will appear like this.

Additional vertical scroll so my template becomes not really responsive.

I wanted to like MBT, advertising display truncated, but no additional vertical scroll


#8

then which method is good for hiding Adsense ads ??


#9

Then which method you suggest for blocking adsense on specific posts or pages?? using Blogger


#10

Up to 3 days and no Response!!!.. ?? No reply…


#11

Sir Please help me to create a mobile responsive table in my blogger post/page. My conventional data tables are not responsive to mobile devices. Pls help


#12

@tijutss Kindly ask this question in a seprate topic


#13

@fadlybiluping you can check it out here

There was a tutorial on it.


#14

Thank you for your suggestion @HassanTahir . I have tried it but then ad does not appear. so I returned it to the ad unresponsive


#15

Brother I have used all the same method which you have just mentioned to make my template responsive but i think there in not change here ==> www.azhblog.com you can have a look please

regards


#16

Please Reconfirm that you have added this code in your template between <head> to</head>


#17

You can use the z-index CSS property to hide adsense ads.


#20

Means? You are not a posting?

If you are looking for button to create new topics for help, just fill up your bio and get some badges and then you will get basic TL. After this all, you will be able to create a new topic.


#22

can you give an example of a mobile theme for blogger?


#23

Yeah of course. Now, I am good at making a template responsive. You can see this template by re-sizing your blog’s window.