8/29/2013

How To Make Related Posts To Show On Blogger Mobile View



After showcasing the redesigned mobile view of Ogbongeblog yesterday when I published "how to make addynamo ads appear on blogger mobile view", I have received mails from some blogspot users, asking me how I make the related posts widget to appear on the mobile view of my blogger blog.


Well, you can get it done if you've switched to blogger custom mobile template and would be easier for you if you've installed my related posts widget to your blog. All you will just need to do is to carefully add some few lines of code to your blog's html.

How To Get Started

==> Click here to install my related posts widget

*** Change the width in the css from 350px to 300px; perfect for the screen of most mobile phones.

==> If you have not enabled custom mobile template, login to your Blogger dashboard, go to "Template". Under "Mobile", select "Yes. Show mobile template on mobile devices" and choose "Custom" from the "choose mobile template" dropdown box and save your settings.

==> Now, we need to find the code for the default mobile share buttons so we can place the related posts gadget directly below it.

==> So, back up your template and go to "Template" > "Edit HTML"

==> Click inside the HTML and use CTRL F to find <b:if cond='data:top.showMobileShare'>

==> Carefully find the ending </div> as seen in the screenshot below



==> Directly below it, copy and paste the code below:


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


==> Save your template

==> View any blog post that has labels and you should see related posts links appearing right below the mobile share buttons.

Note: If you did not add a label (category) to a post, you might not see the related posts below it.

Did it work for you? Please, let me hear from you via comments.


Share :


29 comments:

  1. You rock bro. Will definitely try it when on PC. I hope you will share more tutorials on how you really customized that mobile view of your blog. God bless

    ReplyDelete
  2. Cool Tip Jide. I was about writing a tutorial about this on my blog after I came across your last article and a comment requesting this tutorial. Anyway, you've just beaten me to that, Nice job well done.

    ReplyDelete
  3. Gud day sir, please, how can I customize my blogger template to display fast on web version view without being slow on small mobile Devices like java phone

    ReplyDelete
    Replies
    1. Use Google PageSpeed Insights Tool to analyze your site and follow the recommendations.

      Delete
  4. Thanks for the help. Please how or where do i get a good seo optimized template for my blog that will be friendly to google adsense and also with a good mobile template. Pls i seriously need your reply

    ReplyDelete
    Replies
    1. Just google it bro. Loads of them right there. Can't give you a list...

      Delete
  5. Thank you oga jide for this cool article, i have ben hearing about you. i just kick-off in blogging now, my blog is http://koborecruitment.blogspot.com/
    . thank you, i,m already ur fan on facebook

    ReplyDelete
    Replies
    1. Thanks for been a fan. Wish you success with your new blog.

      Delete
  6. nice tips boss, and i must say i love the new mobile view for ogbonge blog.i once wrote a post on how to make some pages show on custom mobile template but yours is totally different. tnx for sharing

    ReplyDelete
    Replies
    1. You're welcome bro. Glad you lobe the new new mobile view. :)

      Delete
  7. Oga Jide. Pls I don't know how to do this "*** Change the width in the css from 350px to 300px; perfect for the screen of most mobile phones."

    Would be glad if u could explain

    ReplyDelete
    Replies
    1. If you check the linked tutorial on how to install my related posts widget, you will see 350px in the code. Change it to 300px.

      Delete
  8. Thanks a lot for this boss Jide. But i did everything as stated clearly above, but it is not working for me on the mobile template. When i changed the mobile template to custom view even with 'show mobile template on mobile' set to on, it was showing the desktop version, so i had to change to awesome mobile templete. Just hoping it might come up later,.. or is there something else i am not getting?

    ReplyDelete
    Replies
    1. You are probably using one of those old third party templates. You need to add the Blogger mobile class and some codes to the template before it can display the mobile view when set to "custom".

      Delete
  9. Perfectly working, yu are truly a king. Respect man

    ReplyDelete
  10. Jide pls is there a way to make it show only on mobile only, because I prefer Using Linkwithin which has thumbnails for web version (pc view). Thanks

    ReplyDelete
  11. I've been trying this out for a while now but i only got the pc view. Mobile view is kinda hard. But will give it a try once more.

    ReplyDelete
  12. Pls hw can I add facebook comment box to my mobile view just like ur own Sir

    ReplyDelete
    Replies
    1. I will try and come up with a tutorial on that.

      Delete
  13. I saw this on Google search and i really appreciate ur writeup bro. it works

    ReplyDelete
    Replies
    1. Thanks for confirming that it works. Enjoy bro!

      Delete
  14. Thanks Jide!! This has really worked well for me..infact i'm truly a fan of your blog..check it out please..:www.junejacobsblog.blogspot.com..
    You're the best!!!

    ReplyDelete
  15. I am using engageya widget for my related post...how can i make it appear on mobile site of my blog http://mygistertainment.blogspot.com pls help!

    ReplyDelete
  16. Thanks Mr. Jide it worked for me please keep it up

    ReplyDelete
  17. Can any one help please? The related Posts widget is not appearing on Desktop View

    ReplyDelete
  18. Nice work boss.... after coping the code i noticed something which you should edit, the
    and end tag..... it shows errors not until i remove those tag. Thanks....now working perfectly on my blog http://temmyguru.com

    ReplyDelete
  19. Please sir it's displaying on my mobile view but not on desktop view. What should I do?

    ReplyDelete

We love to hear from you!

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post, please drop it at my Facebook group here.

THANKS.

Designed by Jide Ogunsanya.