How I Added Related Post Wigdet to Both Mobile and Desktop Page.

Related posts widget is very important for a blog because it increases the number of page views and also helps the visitor to view other posts related to the blog.

I have been trying to get exactly where related post widget will fit in my blog
Although I have read some professional tips and tutorials which helped me in solving the problem I have adding the widget to my weblog. Many tutorials I found online only place their  focus on the mobile aspect

But here am attaching both the mobile and desktop method all at once.
I was able to add the widget to both my mobile and desktop view with this tips am sharing.

To add this awesome feature to your blog, follow the instructions provided below do not rush this article read it carefully and place every code accordingly

Demo
⇒Step 1
Log in to your blogger dashboard
After login in navigate
 to •••> theme•••> Edit HTML•••> Click inside the HTML 
Use CTRL+ F to find </head>
⇒Step 2
Copy and paste the code below right above the head tag </head>
<!–zethag related post widget–>
<style>
#related-posts {
float : left;
width : 350px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(https://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>

<script type=’text/javascript’>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length – 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length – 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = 0;
document.write(‘<ul>’);
while (i < relatedTitles.length && i < 20) {
document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(‘</ul>’);
document.write(‘<a href=”http://www.zethag.com/2017/07/how-i-added-related-post-wigdet-to-both.html” target=”_blank” rel=”nofollow”><font size=”1″ color=”black”>[Get Related Posts Widget for Your Blog]</font></a>’);
}
//]]>

Read Also  FisrtMobile: First bank Mobile app - How to recharge your DSTV at home [ Easily]

</script> 

<!–Related Posts Scripts and Styles End–>

Click save theme
⇒Step 3
press  CTRL+F on your PC
search for 
class=’post-footer-line post-footer-line-1′>
Press the enter button twice to get the two codes below.
<div class=’post-footer-line post-footer-line-1′> 
And
<p class=’post-footer-line post-footer-line-1′>
⇒Step 4
and paste the code below  right after each of lines above
<!– 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=10&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–>
You can change the highlighted number in yellow to determine the number of posts you want to appear both on mobile and me desktop mode.

Now save the theme and preview both desktop and mobile mode.

Put in mind that if you did not assign a particular post to a label ( categories ) it won’t display the related Post widget.

If you have any questions please feel free to contact me or drop your question in the comment section of this article.

Written by Yusuf Bitrus

I'm a Digi-Preneur, Affiliate Marketer, SEO intermediate and Blogger by heart.
I Help bloggers and business by writing and providing solutions digitally via my blogs, social media, and online/offline events.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.