How to add a badge to mobile view on Blogger

**Collaborative post**

Over 75% of my blog traffic comes from mobile/tablet views. This makes complete sense to me, as it is how I read all the blogs I like to keep up with.  Keeping track of them using Bloglovin, or browsing those which catch my attention from Facebook or Twitter. The only time my laptop comes out is to write these posts so I keep social media tabs closed to save from distraction. It is for this reason I haven’t realised that many of my badges don’t appear on mobile view. Here is a tutorial on How to add a badge to mobile view on Blogger.

How to add a badge to mobile view on Blogger

1. • Locate your badge in your sidebar and label it if you haven’t done so already (you can remove this label later on if you wish) – for ease I label it with Tots100 as that’s what the badge is. To label, go into your dashboard, click on layout and find the badge, click edit and add a title and save.
     

• Next, click template in your dashboard. Under mobile view, you will see a cog, click on that and ensure you have checked ‘Yes, show mobile template on mobile devices’, then click on the grey box which says ‘display mobile template’ – choose custom which is at the bottom and press save. (this will allow you to edit your html for mobile views)

  

   

• Now you need to click on edit html (on your dashboard, select template)

   

  

   

• How you do the next part is up to you – there are 3 ways: Firstly you can use the ‘Jump to widget tab at the top’ – this is a little trial and error, it will be one of the HTML codes, you’ll notice there are a few – you know you are looking for Tots100 (or whatever your badge is named) so click each until you find the correct code.

  

   

  Secondly, you can use Ctrl F to search and find the code you are looking for – I find this very temperamental, and 80% of the time I can’t find what I am looking for.

  Thirdly, and my preferred method is just to scroll through the code until you find what you are looking for – this obviously takes the longest but once you have an idea where you are looking it is rather quick (I promise)

  Locate your sidebar (mine is one the right – but it could be yours is on the left), unless of course your badge is in your footer then you need to scroll down a little further and locate the title.

   

• Now you need to add a snippet of code to your html to make this show up on mobile view – the code you need to add is: mobile=’yes’
  this is added between ‘false’ and title (you need to remember to add a space after ‘false’ and after your code before title.Without the code it will look like this (the HTML number will be different depending on the location of the badge in your sidebar): <b:widget id=’HTML14′ locked=’false’ title=’Tots100′ type=’HTML’ visable=’true’>—</b:widget>
  With the code it will look like this: <b:widget id=’HTML14′ locked=’false’ mobile=’yes’ title=’Tots100′ type=’HTML’ visable=’true’>—</b:widget>Click save and you are done.
  
  You can remove the title of the badge if you prefer (go back to layout, find the badge and remove title – remember to save your changes)To check this has worked click on template, and the cog under mobile view, select preview and your badge should display at the bottom of your posts in mobile views.

  If you want a badge to display on mobile view only, replace the above code with mobile=’only’     (don’t forget to add a space either side of the code and save)

  There are lots of ways to make income from a blog.

  *EDIT* You’ll notice that this blog is no longer on the Blogger platform as I made the move over to WP in August 2016.  The instructions for this tutorial are all still correct.