Skip to content

Adding related post widget on blogger blog mobile view

Blogger blog is one of the blogging platforms that give its users privilege to do whatever they feel like doing with their blog. It gives you room to edit your template, add whatever widget you feel like adding, they give you the opportunity to monetize your blog, no CPU usage to worry about, they even give you the opportunity to change your sub domain to a custom domain. I love blogger blog as much as I love wordpress but, blogger mobile view doesn’t give you the access to edit or change its codes. None of the widget/ gadget you add to your desktop view is going to show on your mobile view – hope you’ve notice that? But right now, there are some things you can add to your mobile view if you wish to, like how to add the related post widget I am about to show you on this post :).

related-post-for-mobile

If you want to keep your site healthy, using related post is a must for your blog. Having a related post widget is not hard, but in-case you have not started using the related post widget on your blogger blog, I will suggest you read this two (2) posts.

ADDING A COOL RELATED POST WIDGET TO YOUR BLOGGER BLOG

ADDING RELATED POST WIDGET WITH THUMBNAIL TO YOUR BLOGGER BLOG

Adding related post widget on blogger blog mobile view

Remember that before you can add the related post widget to your blogger blog mobile view, you must first have one on your desktop view. Now let’s roll to the main tutorial :).

Note: Please before you start playing with your blog codes, do backup your template so that you can revert anytime you make a mistake… to learn how to back up your blogger template, click HERE

Must Read: Adding A Drop Down Menu To Your MobilePress

Go to your blogger blog dashboard >>> Click “Template” >>> Click “Edit HTML”… and you’re in your html editor.

Now search for the below code.

[php] <b:if cond=’data:top.showMobileShare’> [/php]

Remember: To make the search easy click inside the code box and simultaneously press the CTRL + f key to bring out a search bar.

Have you seen the above code? Here is how the complete code looks like;

[php] <div class=’post-footer-line post-footer-line-2′>

<b:if cond=’data:top.showMobileShare’>

<div class=’mobile-link-button goog-inline-block’ id=’mobile-share-button’>

<a href=’javascript:void(0);’><data:shareMsg/></a>

</div>

</b:if>

<b:if cond=’data:top.showDummy’>

<div class=’goog-inline-block dummy-container’><data:post.dummyTag/></div>

</b:if>

</div>

</div>

</div> [/php]

Below the last </div> tag, Place the below code

[php] <br>

<div style=’float:left;’>

<!– Related Posts with Thumbnails Code Start–>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<div id=’related-posts’>

<font face=’Arial’ size=’3′><b>Related Posts: </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>

<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font>

<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();

</script>

</div>

</b:if>

<!– Related Posts with Thumbnails Code End–>

</div></br> [/php]

Have you done that? Now click “Save template” and you’re done.

Note: This trick will work only to those bloggers who already have related post widget on their main blog. And do note that the codes are working 100% because it was given to me by my trusted buddy :).

Over to you

Now let’s make this post more interesting; do you believe that keeping your readers for long will engage your site even more? Are you using any related plugin or widget to keep your blog readers for long? If not, please tell us why by using the comment box below.

Must Read: 3 Major Reasons Why You’re Not Making Money With Google Adsense

Do you have questions, comments or thoughts you’d love to share with us? Then please do by using the comment box below. Remember that your comments, questions and thoughts are highly welcomed and most appreciated :).

Be Social

Was the post helpful? Then do click the like button, share us and recommend us to friends because you will never know who among your friends might be in need of a lovely post like this one :).

Do not forget to subscribe to our feed for your latest updates on the go. Have a blessed week start…

51 thoughts on “Adding related post widget on blogger blog mobile view”

  1. Hi Baba !
    Thanks for sharing the tutorial brother . I would try this out on my test blogspot blog .I had used linkwithin plugin when i was blogging with the blogger platform before but i didn’t show related posts on mobiles . Hence ,am excited to test this tutorial .

    1. Hey Pramod,
      Glad you liked the tutorial :). Yeah, it is difficult to add widgets to our blogger mobile view, but with little trial and error we can make our mobile view as good as we want :).
      Thanks for stopping by and dropping your comment, do have a great week ahead…

  2. HI Babanature,

    Each time I read your posts about Blogger, I DO wish I had my blogs perhaps on that older platform as before 🙂

    I know we all love WordPress, and there can be nothing better than that, but there are some wonderful things on Blogger that WordPress doesn’t have either. I liked your little tutorial on how we can add related post widget on a blogger blog mobile view, wishing I’d known this long time ago – but it’s information many on Blogger can use for sure.

    Thanks for sharing. Have a nice week ahead 🙂

    1. Hello Harleena,
      Ahah… blogger is indeed interesting but believe me, its not as beautiful as wordpress :).

      Yeah, information as this is rare because it is not all bloggers using the blogger platform that do have this feature on their mobile view.
      Thanks for the comment Harleena, i do appreciate it. Have a nice week ahead 🙂

  3. Nice tutorial, Babanature!

    How does Blogger integrate with mobile phones? My blogging experience with Blogger was quite some time ago; I don’t remember whether blogger really supported mobile phones. Does it now? (I know that now Blogger has better in-built responsive templates).

    I do appreciate the tutorial. Could be useful if I decide to start a blog on Blogger (I love Blogger, but WP offers a lot more features. Still, WP can’t quite outmatch Blogger in certain areas).

    Thank you once again 🙂

    1. Hello Jeevan,
      Ahhh… Yes, blogger blog has a mobile features now… but the only problem they have is, you can’t customize the mobile template to your heart desires 🙂

      Wp is indeed great when it comes to usability and mobility but in the search benefits, it can’t beat blogger 🙂
      Thanks for the comment and do have a wonderful week ahead…

  4. Wow! buddy,

    this is definitely an awesome hack, I just wish that many blogger themes developers will start switching to responsive designs.

    Your styling sure provides great look, though I will still prefer a responsive site to a one that switches between themes on visit with mobile devices.

    It’s great reading your tutorial bro, do have a great day

    1. Hello Obasi,
      No matter how responsive a blogger template is, as long as you enable the mobile feature on your dashboard, your responsive templates features (most of the features) will be disabled once viewed on mobile. Except the mobile view is not switch on.
      Thanks for the comment and do have a nice week ahead 🙂

  5. A very awesome tutorial Baba,
    Though I’m not so good with Blogger of which i think i have to start getting use to but, I’m sure this will help a lot of blogger users.

    Thanks for sharing and, have a great week.

    1. Hello Theodore,
      Blogger is also one awesome blog were you can simply create niche sites that can rank on search engines faster :). I so much love wordpress but blogger is also great for my niche sites.
      Thanks for stopping by and do have a wonderful week ahead 🙂

  6. Hi babanature
    thank you very much for sharing this post, am glad you wrote about the mobile view of the blogspot blog, my blog is on the blogger platform please how can i edit the mobile view of my blog template….. Sammie recently updated his blog

  7. Related post widget is important tool to improve bounce rate. If people stay longer in our blog many business chance may appear.

    I am wordpress though but I believe it very helpful for those who uses blogger blog.

    Thanks for this post

  8. Hi Babanature,
    I am very happy i dropped by at your blog today because i have been looking for a way to add this to my mobile template, Its good you shared this, am trying it out right now.

  9. Hi babanature, Good tutorial to say, I got some of my blog design from your blog. Thanks for this again. I’ve been wanting to show related post like yours on my mobile blog and now I think I can.

    Word of advice; can’t you be using text field whenever it involves codes like this? It makes it easier a lot to copy it purely without some being altered… I think you should know what am saying…(Y)

    1. Hello Emmantope,
      Glad you find the post good enough to comment :). It will surely help your blog gain more engagement from your mobile readers…

      I do take your word of advice :). But i’ll assume that you’re commenting with your mobile phone right? The code is well placed on a desktop view and 100% easy to copy.
      Here is my own advice to you: If you’re a blogger, you should always use a pc to do all your coding works because mobile might ruin a code or two and might render your site useless…

      Thanks for stopping by and dropping your comment Emma, Do have a nice week ahead…

  10. Hello Baba,
    We all need something like this. This is indeed a big advancement to we ‘blogger blog’ users…
    Thanks for this and buy for now 🙂

  11. Hello!
    I appeal to you because I see that you are skilled and can find the answer to this problem. img. .

    All my posts are found with duplicate meta descriptions and duplicate title tags. Link duplicate has to end? Modil m = 1 option. I searched in google but did not find anything to give results for this problem. I am curious if you know and that. Thank you!

  12. Thanks! for the tutorial.

    Why you told that it will work only if Related post exist on desktop view. It is not working on my mobile view. Would you please give me the script required for implementing this only on mobile view.

  13. thank you so much for this wonderful code! now hopefully I’ll be able to increase my mobile traffic as well 🙂 I have checked your blog out as well, it’s wonderful!!

  14. please, hope this code is still working properly. I placed the code in the appropriate place exactly as it is in the screenshot but it didn’t work.

    I have related posts widgets on my desktop version, visit my site to see.
    It’s not working my mobile view. you can also check out the widget I’m using when you visit.

    thanks.

Leave a Reply to Disha Sharma Cancel reply

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