How to Get More page Views Using related Post View without thumbnail widget For your Mobile Blogger

How to Get More page Views Using related Post widget For your Mobile Blogger View without thumbnail

Related post without thumbnail is by far the best for mobile blogger view if you ask me because it has has lead to increase in my page views.

It is what am using in my mobile view if you would like to view it click the link below.

To add the related posts widget as seen in that picture above,  you will have to follow the steps below:.

• Log in to your blogger dashboard
• From there go to Layout > Edit HTML and tick the expand your widget templates box (option on the right). If you are using new Blogger dashboard, go to Template > Edit HTML 
• Click inside the HTML and use CTRL+ F to find </head>

Right above </head>, paste the code below.

<!--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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAcoLIrxlA_V3vGybIE2ZnFIEtrZNN6N4nNtZpzagRruf0RNiJ8EnwgyyIifFezsHAOIVCzhoQKQkz3zjjIDUu79wh19oDpEnlmCoI3KOmcStp0C6qWQI2XpcrC_nOw7AqF2xeuhNHev4/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.odiboapeter.com/2017/04/2017-how-to-get-more-page-views-using.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get More From Naijaessentials Blog]</font></a>');}//]]>
</script> 
<!--Related Posts Scripts and Styles End-->

Before you click on Save template read the next step 

Now use CTRL+F again inside your html to find this line of code

<data:post.body/>

Note: this code appear 3 times in some blogger templates and some twice, why because

(1) The <data:post.body> is for you to display the related post widget below in mobile view. It only displayed once don't forget that

(2) For Web view, the <data:post.body> is displaying twice but you will have to work with the second one to make it display below post.

Or you can look for the tags below and display your related post.

Alternatively, you can find the second <div class='post-footer'> and place the ad code directly under it. You can also place it under <div class='post-footer-line post-footer-line-3'>

Now paste the code below immediately after any of these lines (whichever you could find): 

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

Click on Save Template.

Now, go ahead to view one of your blog posts. You should see the Related posts below it.

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

You can alter the CSS rules if you want to customize the look and feel

Feel free to share your recommendations or or questions via the comment form.