How to add a badge to mobile view on Blogger

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 badges to mobile view – blogger blogs.

 

Now many of us bloggers are part of blogging networks which have lovely badges, that we display in our sidebar or footer, telling others you are part of this network . The trouble with this is that when viewed from mobile devices these badges don’t display.  Not a problem if it is just a badge, but some (such as the Tots100, Foodies100 & Hibs100) have badges that contain code which tracks our blog traffic. This is used as part of the metrics which determine our chart positions, with the positions changing monthly. This is the Tots100 badge I display

 

It shows my current chart position (April 2016 = 46, this will change monthly).  Obviously by having this displayed only on desktop views all the mobile traffic isn’t recorded.  The good news is that it is actually very easy to add this to mobile views by adding a very small snippet of text to your html………………..Come back! It’s not that scary, I promise.
Here is how to do just that, in an easy step by step guide: (Top Tip: make sure you backup your template before playing around with the html)

How to add badges to mobile view – Blogger Blogs

    • 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 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.
      blogger, tutorial, how to, how to add a badge to mobile view in blogger

 

  • 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)

    How to add bades to mobile view - blogger blogs

     

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

     

    How to add badges to mobile view - blogger

     

  • 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.

    how to find the code of a badge in blogger, how to find the code of a badge in blogger, html blogger, how to add a bagde to mobile view of a blogger blog

     

    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’ve an idea where you are looking it is rather quick (I promise)

    how to find a badge/widget easily on a blogger blog html
    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.

    codeformobileviewhtmlonblogger

    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)

    *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.

 

signature

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

33 thoughts on “How to add a badge to mobile view on Blogger

  1. Thank you so much, this is really helpful, I have been missing out as didn’t have this on my mobile site and a lot of my traffic comes from instagram and therefore mobiles. It was really easy to follow and I have now successfully added the badge! x

  2. How did you add your badge onto your blog?? I have one and it’s in Photobucket and as I paste the code in the gadget, only the picture comes up…no code (this is in preview). do I need to add the code into CSS too?? TIA!

  3. Tragically my Tots account was deleted and I’m struggling to make this work at all now with my new badge. Thank you so much for posting it though. Without it I’d never have done so well in Tots in the past as 75% of my views are also mobile x

    1. I'm afraid not. The badge need to be on every page to be tracked so if not displayed on mobile views you are loosing all that counted traffic

    1. You are most welcome. Was a good test to see if this tutorial worked. Out of 35 blogs I changed only 1 wouldn't work due to the theme

Leave a Reply

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

CommentLuv badge