T Saturday, June 06, 2015

Related Posts Widget For Blogger Mobile

related posts widget for blogger mobile 101helper

A very important factor of off page seo is internal linking, it means to inter link other posts with the post you write. Internal linking is good for seo as well as it increases your page views because it is the way by which visitors reach to your posts. Internal linking is of two types one is to mention links of older posts in new post and the second is to add a related, recentrecommendation or featured posts widget in your blog. It helps visitors to reach to more posts and read them. Related post widget is most popular in desktop sites but now you can add related posts widget in your blogger mobile site to engage your mobile visitors to your blog. So in this post I will show you how to add related posts widget in blogger mobile site.

You can see a live demo of this widget in my blog either in your smartphone or on desktop. Just visit my blog's mobile site by this link 101helper.blogspot.com/?m=1

Before we start, first optimize your blog's mobile site by reading this post. After optimizing your blog for mobiles just follow below steps to add related posts widget in your blog(mobile site).

Also Read: Text Only/Links Only Related Posts Widget For Blogger Mobile Site.

Step 1: Go to blogger dashboard and navigate to layout > add a gadget > Html/javascript.

Step 2: Copy code of mobile related posts widget from below:

Step 3: Paste the copied code into Html/javascript and click on save.

Step 4: Grab the newly added gadget(related post mobile widget) and drop it at the bottom in the layout page. As shown in below image.

related posts widget for mobile

Widget Not Appearing In Mobile Site?

If the related post widget fails to show in your blog's mobile site then follow below steps.

Step 1: Go to blogger dashboard, navigate to template and click on Edit Html.

Step 2: Jump to the widget(related posts mobile) by its id or find it by using Ctrl+F


Step 3: Search for a line similar to this:

<b:widget id='HTML7' locked='false' title='' type='HTML'>

Step 4: Add this piece of code mobile='only' before locked='false' like this:

<b:widget id='HTML7' mobile='only' locked='false' title='' type='HTML'>

Step 5: Click on save template and you are done. Open your template and scroll to the end to see your related posts widget!

I hope this widget is working fine on your blog, if you are facing any problem tell me by leaving a comment below. Follow and subscribe to get latest news about blogger widgets.

Search Tags: Related Posts Widget For Blogger Mobile,blogger widgets and gadget,related posts widget,random posts,featured posts,thumbnails,text only,blogger widgets



  1. its not working for mobile version but for desktop version,

    1. Do you see any error? make sure to follow all the steps carefully, it works properly I personally used it in my blog.

    2. I did all in proper way but its not showing in my blog's mobile view, instead. It shows at desktop view at top even if we put its gadget at bottom,

    3. I have updated this post.. I hope it will work now if not then use another template there is problem with your template!

  2. Thanks anyway but a'int working


    1. If its not working then enable custom template for your site.

  3. Replies
    1. You can style this by CSs... if you don't know css then wait i will add some new styles soon

  4. Hi fahim,
    I'm having problem with the related post and share buttons in mobile template.

    It seems the widget it not inside my template HTML. so i ve searched to enable it in mobile view but can't find it.

    please i need your help on how to go about this, thanks.

    my site url is http://thegistbaze.com

    1. Have you enabled mobile custom template?

  5. Hello.
    The googledrive's link is not working.
    What can I do?
    Thanks in advance.

    1. Sorry the link was broken but I have fixed it, you can now get your code!

    2. Hello Fahim. The code is working. Thanks.
      But now, I have another problem.
      I want to avoid the "related posts" appear in the Main page.
      The idea is that "related posts" widget only appears in each post.
      ¿Can you help me with this?
      Thanks in advance.

    3. Yes you can do it bro, go to the related post widget in template and explore its code and below paste this

      And after this scroll a little and you will see this piece of code:

      You need to paste above it like this:

      When you do that all code will go green which means all good.

      Save template and you are done.

      If you don't understand follow this video or tutorial:



    4. Thanks Bro, it works well, but, only in Computer.
      In Mobile device the "RelatedPots" continues appearing on MainPage.
      Could you help me to fix this?
      Thanks in advance for your great help, amazing work.

    5. It should have worked in mobile too but if you say then give me your site link, let me see what can I do.

  6. Now is working in mobile, may be it was just a delay.
    Thanks for you great help, you are doing a great work bro.

    1. You are welcome, if you like my work share it with others :)

  7. Hello Bro, I have another question.
    This widget displays the title of "Related Posts" and a thumbnail picture which is great, but;
    Is it possible to set it to also shows a part of the text of the post?
    Thanks for your great help.

    1. Yes remove following piece from code

      related-info {
      display: none;

  8. Hello friend, I have a SERIOUS problem with this widget.

    So far it was working perfect, but today I set up my own domains in my blogs.

    The widget still appears on the page, but now when I try to edit my blog: Blogger-> blogs->Template, at this point the whole system becomes a disaster.

    Blogger's page stops, remains stagnant, and finally the only way to solve this, is to restart the browser.

    With Chrome and Firefox happened exactly the same problem.

    This is serious, because it does not allow me to edit the template including the html code, as whenever I get to "template" the system fails and have to again reboot the browser.

    The only solution was to enter to "layout" and remove this Widget.

    This is a shame, because this is the only widget of "related posts" that worked well on mobile devices.
    I know there are other options, as LinkWithin and others, I tried all of them but the only one that looks good and worked well on mobile is this.

    Obviously the cause of the problem was to have changed the original domain in blogger for a own domain. Switching off for a moment this addressing and using again the original blogger's domain, the system works again, but, when I resend the blog to my own domain the same problem appears.

    Could you help me please with this problem?
    Is there a solution to continue using the own domain without delete this widget?

    Thanks so much for your great help.

    1. Try to replace





      /feeds/posts/default?alt=json-in-script&start-index=' + related_current[i] + '&max-results=1&callback=random_posts\

      with http://yourdomain.com/feeds/posts/default?alt=json-in-script&start-index=' + related_current[i] + '&max-results=1&callback=random_posts\

      Hope it works

  9. Hello bro.
    I can't copy the codes from your last answer, in fact I can't copy anything from the whole article, except the original code of the widget, which is embedded in google docs.
    I tried with Chrome, Internet Explorer and Firefox, and I can't copy with any of these.

    Could you please give me an idea to be able to copy the codes?

    Thanks for your great help.

    1. Hello bro, there is nothing that you need to copy except the widget code so I blocked clicking on this post to avoid any copy paste activity !

    2. Yes bro, but in your answer you gave me some extra codes to replace in the original widget code. If I can't copy these codes I won't be able to do the replacement.

      Could you include this new codes maybe in other google docs document to be able to copy them?

      Thanks in advance for your great help.

    3. No I just asked to type mobile='only' after locked='no' .... if I embed another google doc it will slow down this page thats why I don't want to do it bro. Hope you understand

    4. Ohhh, ok, you are right,
      I hadn't realized that the extra code was so short. I'm blind, I need new glasses. Thanks friend. :)

  10. Hi! Thank you for the codes. It's working in my mobile view but I got 1 more problem, thumbnails/images are not showing up in mobile view. Kindly check www.onlineappsfree.com using your mobile phone. Please help!

    1. This is because you have not added jump break in any of your posts.

    2. i see, so what i gonna do? can you help me on how to show the original thumbnail in each posts?

  11. Can you show me how to make it appear directly below the article? I will be very grateful.

    1. Hello Nelson, Unfortunately you can't show it directly below articles but if you want you can show only links(text) related post below your articles and for this read
      Link/text Only Related Posts Widget For Blogger With 6 Different Styles

  12. I have another problem. Its showing on the main page and I want it out of the main page and just the post only. What do I do?

    1. Follow this post it will show you how to hide a gadget in homepage or static pages or how to show gadget in posts only How to show or hide a gadget in blogger pages? if you don't want to read the whole post just go to bottom of post and watch the video it will help you.

  13. Replies
    1. You can edit it with Css but it is for increasing pageviews not beautifying blog.