How to create simple related posts for blogger

How to create simple related posts for blogger

Related posts will be very useful suggestions for your readers. So, how to create simple related posts for blogger. This article will help you.

Why create related posts for your blog?

Related posts or articles on the same topic will help readers access more of the content they are looking for. Both meet their search needs, and keep them longer in your blog.

Because of meeting the needs of users, the professionalism of your blog is greatly enhanced. They will often come to your blog when they want to learn about a certain topic that your blog has.

Related posts benefit your blog and your users as well. So, why don't you try creating it?

Codes create simple related posts

To create related articles you need to use code types (CSS, JavaScript, XML and HTML). To simplify this process, I will break it down into 3 main steps. Each step will be a guide to inserting different types of codes, follow it carefully.

Step 1: Insert CSS code

CSS code you can put it before ]]></b:skin> tag or put it in <style> CSS code </style> tag pair.

/* CSS code create related posts */
#related-posts {border:1px solid #9b9b9b26;border-radius:8px;margin:50px 0 0;}
#related-posts strong{font-size:large;padding:4px 10px;position:relative;top:-12px;left:10px;background:white;border:1px solid #9b9b9b26;border-radius:15px;}
#related-posts ul{padding:0 30px;margin:-2px 0 0}
#related-posts li{font-size:medium}
#relater-posts a {text-decoration:none}{codeBox}

Step 2: Insert JavaScript code

For javascript code, you need to put it before the closing </head> tag. If it's in the wrong place, it won't work.

<script type='text/javascript'>//<![CDATA[
function related_results_labels(a){for(var b=0;b<a.feed.entry.length;b++){var c=a.feed.entry[b];titles[titlesNum]=c.title.$t;for(var d=0;d<c.link.length;d++)if("alternate"==c.link[d].rel){urls[titlesNum]=c.link[d].href,time[titlesNum]=c.published.$t,titlesNum++;break}}}function removeRelatedDuplicates(){var a=new Array(0),b=new Array(0);e=new Array(0);for(var c=0;c<urls.length;c++)contains(a,urls[c])||(a.length+=1,a[a.length-1]=urls[c],b.length+=1,b[b.length-1]=titles[c],e.length+=1,e[e.length-1]=time[c]);titles=b,urls=a,time=e}function contains(a,b){for(var c=0;c<a.length;c++)if(a[c]==b)return!0;return!1}function printRelatedLabels(a){var b=a.indexOf("?m=0");b!=-1&&(a=a.replace(/\?m=0/g,""));for(var c=0;c<urls.length;c++)urls[c]==a&&(urls.splice(c,1),titles.splice(c,1),time.splice(c,1));var d=Math.floor((titles.length-1)*Math.random()),c=0;if(document.write("<ul>"),0==titles.length)document.write("<li>Không có bài viết liên quan → </li>");else for(;c<titles.length&&c<20&&c<maxresults;)b!=-1&&(urls[d]=urls[d]+"?m=0"),document.write('<li><a href="'+urls[d]+'" title="'+time[d].substring(8,10)+"/"+time[d].substring(5,7)+"/"+time[d].substring(0,4)+'">'+titles[d]+"</a></li>"),d<titles.length-1?d++:d=0,c++;document.write("</ul>"),urls.splice(0,urls.length),titles.splice(0,titles.length)}var titles=new Array,titlesNum=0,urls=new Array,time=new Array;
//]]></script>{codeBox}

Step 3: Insert XML and HTML code

Note: this is a very important step.{alertInfo}

This XML and HTML code will specify where the related posts should be displayed. Usually, related posts will be placed at the bottom of your post.

Look for the <data:post.body/> tag and put this code just below it. Some blogger templates will have up to 2 tags above, please try them one by one.

<!-- Code create Related Posts put after tag <data:post.body/> -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <strong>Related posts:</strong>
        <b:loop values='data:post.labels' var='label'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript' />
        </b:loop>
        <script type='text/javascript'>var maxresults=3;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script>
    </div>
    <div style='clear:both' />
</b:if>{codeBox}

Note: maxresults=3 in the above code is the number of posts displayed. You can change it to your liking.{alertInfo}

Conclusion

So, I have finished instructing you how to create simple related posts for blogger. If you have any questions, please leave a comment below. I will answer it.

Finally, wish you success in implementing it. Thank you.

Source code: collection on the internet

Post a Comment (0)
Previous Post Next Post