08 February, 2015


How to Make Your Blog Mobile Friendly

Who isn't glued to their smart phones these days? I know I'm always scrolling through my social media apps. I love Instagram and find it so easy to connect with new blogs! I'm pretty sure a lot of us are reading blogs more and more on our mobiles than on desktops - what do you guys think? Not all websites are smart phone friendly, the sizes and dimensions can be out of whack and you have to zoom in and out to read the page. If you're on Blogger, there are some super simple ways to make your blog interface more mobile friendly.


You most likely already have this function switched on but just in case you don't, go to template from your Blogger dashboard and then select the Mobile gear wheel. It will bring up this window, select Yes, show mobile template on mobile devices.

Before you hit save you can select your blog template rather than the default one. The default mobile template is grey and has none of your design features. It also adds padding to your photos, which I personally dislike - the border around your images. You can't carry everything over such as fonts but you can make it look more like your design.

In the same window open above, click on the drop down menu where is says choose mobile template and select the last one custom. Hit preview, if you're happy with how it looks then hit save.


An issue I find with Blogger mobile templates is that is doesn't include your widgets, you know the ones on your sidebar, so there's no where for you to follow someone on social media or send them a message. If I come across a blog I love, I always follow them on Bloglovin to keep up with their posts, which by the way you can for mine here!


To include certain widgets on your mobile template, firstly go to your Blogger layout page and select the widget you want to include. In my case I've included my social media icons, search bar, follow by email and the Disqus comments system. 

You need to find the widget tag ID, so to do that click on the widget you want to add first and click edit. This window should pop up, you want to look for the name of the tag at the very end of the address bar. For the search bar widget, the ID is HTML7.

Next, go to your template setting and edit HTML (please back up your template first!) In the main body of HTML text select cmd find and search for HTML7.

<b:widget id='HTML7' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  <div class='widget-content'>

  <b:include name='quickedit'/>

You then want to add this code: mobile='yes' inbetween locked='false' and title.

Click save and check out your page on your mobile. Your widget should be at the bottom of your mobile template. Do this to all the widgets you want to include. I find a super handy one is adding the Disqus widget as it makes it so easy for people to leave comments. The standard Blogger commenting doesn't always work on mobiles.

I hope you found this post useful, I know it's not applicable to all you guys but I wanted to help anyone who wanted to make their blog more mobile friendly on Blogger!

Do you read blogs on your desktop or mobile?

Follow me on


  1. I don't usually read blogs on mobile, and I'm always so obsessed with fiddling with my normal template that I don't even know what my blog looks like on mobile. This was a really useful tutorial, will have a look into this!

    Yet Another Makeup Blog.

  2. I can't seem to get my blog looking right in mobile custom view. The photos aren't fitted and the fonts are weird haha. But thank you for this, I'll have to play around a bit more.

  3. Love these tips! I need to work on the mobile version of my blog.

  4. Bookmarked as I was definitely thinking I need to get on top of my mobile layout just this week! It's like you looked into my brain and wrote me the perfect post ;)

  5. I definitely need to add my widgets through my mobile view! Thank you so much for sharing this. x


  6. Love it! Awesome tips, so glad you shared :)

  7. Glad you found it useful, thanks for reading Yige :)

  8. I know it's tricky to get your blog looking right on mobiles! Hopefully this has helped you tweak it a bit :)

  9. Ohhh....great minds and all ;)

  10. I know it's easy to do but hope you found this useful :)

  11. Thanks so much for sharing this Hanh, this is so useful! I prefer to read blogs on my computer, so I can get the full experience and see photos in their original size, and because leaving comments via my phone always plays up. I didn't like the mobile version of my blog, so I switched it off, but with your tips above, I will re-look into it! Thanks again!


  12. Thanks Lucy! Me too if I can I love to read blogs on a desktop but I know more and more people are on the go, so I need to make my mobile version easy to read too :)

  13. This is so useful! thank you, i'm always switching peoples blogs to full page just because i want to see what their blog is all about, but this is really handy!

    Love Vicki | victoriajanex.co.uk

  14. Thanks for reading Vicki, I like to do that do sometimes if I want to see the whole page to follow them on social media!

  15. I must be a weirdo, but I don't really like reading blogs on my phone so much. It's just so much more comfortable to do so on the computer! I have two screens so I'm always reading and watching something on the other screen, or playing and stopping every now and then to read a blog post. xD

    I do use my social media apps a lot, though!

  16. Haha you're not a weirdo I prefer reading blogs on a computer too. I sometimes click on blog links from my phones and it's always easy to check out their page!


Blogger Template Created by pipdig