How I Add The Simple Version of Blogger Related Posts Widget To My Blog



 How To Add The Simple Version of Blogger Related Posts Widget

1. Go to theme - EDIT HTML then use Ctrl F to find  ]]></b:skin>  and after it paste this CSS code:


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'> .related-postspace{position:relative;margin:0;padding:20px 0}.related-postspace h4{margin:0 0 15px 0;font-weight:700;font-size:18px;padding:0 0 20px 0;border-bottom:1px solid rgba(0,0,0,0.05);text-align:center}.related-post-simple-2,.related-post-simple-2 li{list-style:none;margin:0;padding:5px}.related-post-simple-2 li{overflow:hidden;margin:0 auto 10px auto;transition:all .3s}.related-post-simple-2 li:hover .related-post-item-title{color:#e74c3c}.related-post-simple-2 .related-post-item-thumbnail{border-radius: 2px; width: 120px; height: 80px; max-width: none; max-height: none; background-color: transparent; object-fit: cover; border: none; float: left; margin: 2px 15px 0 0; padding: 0; transition: box-shadow 0.3s ease 0s; -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); }}.related-post-simple-2 .related-post-item-title{color:#222;font-size:16px;font-weight:700}.related-post-simple-2 .related-post-item-title:hover{color:#e74c3c}.related-post-simple-2 .related-post-item-summary{display:block;font-size:13px;margin:5px auto 0 auto;color:#999}.related-post-simple-2 .related-post-item-summary .related-post-item-more{display:none} @media screen and (max-width:750px){ .related-post-simple-2 li{width:100%;float:none} .related-post-simple-2,.related-post-simple-2 li{padding:5px 0} .related-post-simple-2 .related-post-item-summary{display:none}} </style> </b:if>

2. Find  <data:post.body/> and after it paste add:

<div class='related-postspace' id='dtostrelated-post'/> <div class='clear'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: &quot;<data:blog.homepageUrl/>&quot;, widgetTitle: &quot;&lt;h4&gt;Related Posts&lt;/h4&gt;&quot;, numPosts: 5, summaryLength: 160, titleLength: &quot;auto&quot;, thumbnailSizew: 120, thumbnailSizeh: 80, noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTOX0cLVpxk1kwPhetQJXISSlj-okyejQydYD7IiR7wwWELeveobXNyoVgSGfteamqt2E4dJBZa_EB9ggqfN3XnNW3Ae6QG1MNw3mrU6JAnKuI5fm7nYJgIk332AG4h3i8ODmpVsvLLvg/s1600/noimage1.png&quot;, containerId: &quot;dtostrelated-post&quot;, newTabLink: false, moreText: &quot;Read More&quot;, widgetStyle: 2, callBack: function() {} }; </script> <script type='text/javascript'> //<![CDATA[ /*! Related Post Widget */ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Recommended</h4>",widgetStyle:1,homePage:"https://blogger.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSizew:150,thumbnailSizeh:100,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-simple-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSizew!==false)?x[q].media$thumbnail.url.replace('s72', 's200'):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]> </script>


That is! Save and check the result on your blog.


25 Merits of Related Posts on Blogs


Related posts on blogs offer several merits that can enhance the user experience, improve engagement, and benefit both readers and bloggers. Here are some of the key merits of including related posts on your blog:

Improved User Engagement:

Keeps readers on your site: Related posts encourage readers to explore more of your content, reducing bounce rates and increasing the time spent on your blog.

Enhanced navigation: It makes it easier for users to find more content relevant to their interests, which can lead to increased page views.
Increased Page Views:

Related posts can lead to increased page views as readers click through to additional articles. This can positively impact your blog's ad revenue and overall traffic.


Internal linking: Related posts provide an opportunity for natural internal linking, which can improve SEO by distributing link authority and helping search engines understand the structure and content of your site.

Reduced bounce rate: A lower bounce rate can signal to search engines that your content is relevant and valuable, potentially improving your search rankings.
Higher Retention Rates:

Encourages repeat visits: When readers discover more of your valuable content through related posts, they are more likely to return to your blog in the future.
Enhanced User Experience:

Personalization: Many related posts plugins and tools use algorithms to suggest relevant content based on a reader's current article. This personalization can enhance the user experience by tailoring content recommendations to individual interests.

Easy navigation: Related posts sections typically include thumbnail images and brief descriptions, making it easier for users to decide which articles to explore next.
Increased Content Visibility:

Highlighting older content: Related posts can bring renewed attention to older but still relevant articles, increasing their visibility and potentially revitalizing their engagement.
Cross-Promotion:

Opportunity for cross-promotion: You can strategically place related posts to promote specific content, products, or services that align with the current article's topic.
Encourages Deep Learning:

Encourages readers to delve deeper into a subject: Related posts can guide readers to explore different aspects of a topic or delve into more advanced content, promoting deep learning.
Improved Content Monetization:

Increased ad impressions: With more page views and longer user sessions, you have more opportunities to display ads, resulting in increased revenue for bloggers who monetize their blogs with ads.

Enhanced Content Discoverability: Helps readers discover content they might have missed: Not all readers explore a blog in a linear fashion, and related posts can lead them to hidden gems they might have otherwise missed.


Lower Bounce Rates: Related posts can reduce the bounce rate, which is the percentage of visitors who leave your site after viewing only one page. Lower bounce rates indicate that visitors are finding relevant and interesting content, which can be beneficial for search engine rankings and user satisfaction.
Increased Social Sharing:

If your related posts are well-targeted and engaging, readers are more likely to share them on social media, expanding your blog's reach and potentially attracting new readers.
Targeted Promotion:

You can strategically promote specific content, such as your latest articles, evergreen content, or affiliate marketing posts, by including them in the related posts section.

Better Content Organization: Related posts help organize your content in a cohesive and logical manner, making it easier for readers to navigate and find information on specific topics of interest.
Enhanced Mobile Experience:

Mobile users often appreciate related posts as they provide an efficient way to explore more content without navigating through complex menus or search bars.

Opportunities for Call to Action (CTA): You can use related posts to strategically place call-to-action buttons or links, such as encouraging readers to subscribe to your newsletter, follow you on social media, or explore your products and services.

Reduced Content Silos: Related posts help break down content silos by connecting articles on related topics. This interlinking can contribute to a more cohesive and interconnected blog.
Enhanced User Satisfaction:

By offering readers additional content that aligns with their interests, you enhance their overall satisfaction and make them more likely to becomes loyal followers and return visitor.

Data Insight: Many related posts plugins and tools provide analytics and insights into which related posts are most popular and effective, allowing you to refine your content strategy based on user behavior.

Improved Monetization Strategies: Bloggers can use related posts to strategically promote affiliate products, sponsored content, or premium services, potentially increasing their revenue streams.
Increased Email List Building:

You can use related posts to direct readers to lead generation content or opt-in pages, helping you grow your email subscriber list.

Enhanced Cross-Promotion with Partners: If you collaborate with other bloggers or businesses, related posts can be a valuable tool for cross-promotion, benefiting both parties by increasing exposure to each other's content or products.

In summary, related posts on blogs can significantly benefit both bloggers and their readers by improving engagement, increasing page views, enhancing SEO, and creating a more personalized and enjoyable user experience. They are a valuable tool for keeping readers on your site and encouraging them to explore more of your content.

In conclusion, related posts are a versatile and valuable feature for blogs, offering numerous benefits that enhance user experience, increase engagement, and support various content and marketing objectives. Integrating related posts effectively into your blog can contribute to its overall success and growth.

Comments