Tuesday

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 help the visitor to view other posts related to 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 thier  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(http://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>');
}
//]]>

</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 post you want to appear both on mobile and I 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.

No comments:

Post a Comment

Feel free to comment anonymously no need forward verification.....

Back to Top