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 :).
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 == "item"’>
<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 != "true"’>,</b:if><b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"’ 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…
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 .
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…
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
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
This is an insightful post. Thanks for the post.
Most welcome Olamide
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
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…
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
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
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.
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
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
I have already drop how to on this post. Just follow the tutorial
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
Thanks for the contribution buddy :). Do have a beautiful week ahead…
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.
Glad you find it useful Olili,
Thanks for the comment and do have a nice week ahead…
Nice… It’s nice & wonderful Article. I was just looking to know about adding widget. It becomes more easy while using simply coding to use for adding widget.
Most welcome Disha, Glad you liked it.
Do have a blessed week ahead
hi baba,
really nice article and going to help a lot. can you please post more ideas or give me more tip for mobile template?
No problem Gautam, you will indeed see more tips on how to customize the blogger mobile view
Thanks for sharing this tutorial bro. Kind regards from I. C. Daniel
Most Welcome Daniel
This is a wonderful post on how to add related post widget on blogger mobile.
Thanks for sharing, Baba!
Glad you liked the post, Mary.
Do have a great weekend
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)
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…
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
Glad you like it Bello, Do use it wisely and have a great week with it
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!
Hello Dan,
Which of the SEO plugin are you using?
nice work bro… loving forward for us to hooke up cos I’m a newbie tech blogger
Most welcome Tunde,
You can always hook me up via my contact page and i’ll be sure holla back
nice post with good information/tutorial on code implementation and.other stuffs. its great
Most welcome Daayur
Hello babanature,
tanks a lot for this tutorial cuz i have been searching for a widget like this.
Most welcome James,
i am sure that other tutorials will surely amaze you…
Nice one.
Thanks for the tutorial going to implement on my blogger
Victor
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.
I followed the tutorial but the mobile view is not showing related post widget. Kindly help.
Do you have a related post on your desktop? I don’t mean the linkwithin related post plugin.
its didnt work on my blog and i have related post on my desktop
yes, it is work, thankss for sharing, my blog be good
I have related posts widit on my desktop blog. But this trick is not working.
Which of the related post widget did you insert on your blog? How does it project its related posts?
Do review and try it again… it is working perfectly well
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!!
thank you so much! it worked for me. PS you have an amazing blog, keep up the good work!!
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.
Hello BABANATURE,
Amazing Post Thanks for share blogger tips. very helpful
Hello Rose, glad you liked the post.
You can check other posts that will help your blog.
Do have a wonderful week ahead.