Pages

Tuesday, November 3, 2015

How to Add Related Post Widget in Blogger Mobile Version

A post on how to add related post widget in blogger mobile version. The related post widget in the mobile version of your blogger blog can increase your blog's pageviews especially if a higher number of visitor/readers access your blog from their phone. Since this blogger widget displays related posts without the images, it does not affect page load time of your blog. It can also reduce your blog's bounce rate beacause there is interlinking of one post to other and your visitors don't leave immediately without checking out any other post on your blog. If your blog posts have been categorized using labels, then you can follow the guidelines below on how to add related post widget without thumbnails in blogger mobile version.

Also Read: How to Add IP Widget In Blogger Blogs
                   Numbered Page Navigation Widget For Blogger Blogs
                   Most Commented Posts Widget For Blogger With Thumbnails

How to Add Related Post Widget Without Thumnails In Blogger


Step 1
  • From your blogger dashboard,
  • Goto Template.
  • Click on the gear mobile settings icon 
How to Add Related Post Widget in Blogger Mobile Version

  • Select the button option, 'Yes show mobile template on mobile devices'
  • From the drop down menu, choose the option 'custom'
  • Click on 'Save' to enable your changes.
How to Add Related Post Widget in Blogger Mobile Version




Step 2

  • Next, Still in your template
  • Click on 'Edit HTML'
  • Using Ctrl+F keys, search for the tag </head>
  • Copy the code below and paste above </head>


<!--Related Posts Scripts and Styles Start-->
<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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYDhaGTi4tbXghYvmKG9rDvzEZRxnvucmRkunKA-yMECyYR-CsWHj6Rbr-vrUmtWmXgEQJkAG0vPxqHikCd8xaZ3ry5QKbU0p6tU_T0pXy4Ut2qGvW7J89Phqrw_B8hWmJuBKrO4CS-3A/s200/greentickbullet.png&quot;) 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.wegist.com/2015/04/jlos-ex-marc-anthony-and-new-wife.html " target="_blank" rel="dofollow"><font size="1" color="black">[Get Related Posts Widget]</font></a>');
}
//]]>

</script> 

<!--Related Posts Scripts and Styles End-->


Step 3

  • In your template, Search for
<div class='post-footer-line post-footer-line-1'> 


OR  SEARCH FOR



<p class='post-footer-line post-footer-line-1'>
  • Copy the code below and paste below any of the lines of code above which you could find in your template. 


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


 Update:06/09/2015  Save your template without including this last step 'step 4'.

Step 4



  • Still in your template, use CTRL+ F keys to search for this line of code below

 <b:if cond='data:top.showMobileShare'>
  • Below the line of code above, scroll down and search for the fourth  </div>
  • Copy the code below and paste below the fourth </div> as shown in the image 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.
Also Read: Link to This Post Widget For Blogger
                   Add Stylish Custom Search Box To Blogger

Following the steps above, the related post widget without thumbnails should show up in the mobile and desktop version of your blog. If it doesn't, it's probably because you've not added labels in your blog posts.
    Posted by at
    Labels: , ,