أغسطس 10, 2022تحميل افضل برامج الخطوط العربية

Do you think related posts widget is one of the important widget that a blog should have? For me it is, let me tell you the reason why I think it is important. You probably drive traffic from search engines, social media and other sites, once your visitors saw what they are looking they might immediately exit on your blog without visiting another page. That effect of that is a high bounce rate on your Google Analytics. So, to avoid this kind of scenario we should install related posts widget that will surely reduce our bounce rate and it probably increases our page views.

Today in this article we will create related posts widget with thumbnails just after our blog post body. Just imagine when your readers finished reading the article that can solve their problem and then saw other articles that are related to their intention, our visitors will surely feel very interested to read them. The major purpose why we should add related post widget is to prevent our visitors exiting on our blog. Below are some benefits of this widget:

• It will increase page views.
• It reduces bounce rate.
• It will improve internal linking.
• It will improve user interaction

How to Add Related Posts Widget in Blogger

Important note:
To make this widget work properly, you should change the default Site Feed setting. Just go to Settings ->> Other then set Allow Blog Feed to Full.

1. As always, we should go to Blogger Dashboard ->> Template ->> Edit HTML and find this code  <div class='post-footer'>. If you are having problem in finding the codes just use the CTRL+F on your keyboard, refer to the image below. If you are using the default template of Blogger you may found the code two times, but you should stop at the second.

2. Just above <div class='post-footer'> copy and paste the following codes provided below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.related-post-title{font-size: 2em;padding: 0px 0px 15px;margin: 5px 0px;border-bottom: 1px dotted #000;} #related-posts {margin: 0px 0px 15px 0px;border-bottom: 1px dotted #000;padding-bottom: 10px; } #related-posts a { font-size: 1.2em; color: #525252; text-transform: capitalize; text-decoration: none; line-height: 20px;} #related-posts a:hover { text-decoration: none; color: #06c; } #related-posts ul { list-style-type: none; color: #000000; } #related-posts li { padding: 8px 2px; border-bottom: 1px solid #E2E2E2; clear: both; font-family: Helvetica; font-size: 12px; overflow: auto; border: 1px solid #CCC; margin: 5px 5px 8px 5px; border-radius: 4px; box-shadow: 0px 0px 5px #B6B6B6;background:#FAFAFA;} .image_left{ float: left; margin: 0px 10px 10px 2px; border: 1px solid #fff; padding: 0px; width: 80px; height: 56px; box-shadow: 0px 0px 4px #777; } #related_here{ float:left; width: 49%; padding: 0px; margin:0px; } #related_here2{ float:right; width: 49%; padding: 0px; margin:0px; } .related_all_ul{overflow: auto;}
</style>

<script type='text/javascript'>
//<![CDATA[
function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZBqxZknactCiRfF5vBF2QrvYTDcHBkMFL26-mRjCXbbacx69FsuydPq-N6yyLvlsTBCqgbIxa9vRqtIr-ZRxHfrlsiuSxVGDc6rvjCE51GU9anxUZQ2DseKmBZLqh94CbizBtwGwxi0/s250-Ic42/no-thumbnail.png";relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if("alternate"==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById("related_here2").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>":document.getElementById("related_here").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>",t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<div id='related-posts'>
<h4 class='related-post-title'>You may also like:</h4>
<div class='related_all_ul'>
<ul id='related_here'/>
<ul id='related_here2'/>
<div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://www.internetsmash.com/2016/01/related-posts-widget-with-thumbnail.html" rel="nofollow">Related Posts Widget</a></div>
</div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var maxposts=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>
</div>
<div style='clear: both;'/>
</b:if>

Note: Sometimes the  Related Posts Widget will not able to load after putting the codes on the second <div class='post-footer'>, if that is the case, you may save it on the first <div class='post-footer'> and see if it's working.

Customization

max-results=7: Make sure the value of max-results is greater than maxposts. This is the safest thing to do if your blog posts having only one label in order to maintain the number of posts to appear in our related posts widget.
maxposts=6: Just change this value if you want to increase or decrease the number of posts to be displayed. Again, this value should be less than the max-results.
height: 56px, width: 80px: Just change the value 80/56 to increase or decrease the width/height of the images.

Some FAQS About this Related Posts Widget

Question No.1 - How this widget chooses what post to be included?

Answer: Blog posts are chosen based on the same label. It will simply check and get the label of the current post and it will use that label name to request the data from the blogger API. The number of data request will depends on how many category your blog post have.

Question No.2 - How this widget chooses what thumbnail to be used in every post?

1. The related posts widget will check first if you uploaded an image file through Blogger in your blog post if it returns true it will pick that one and use it as a thumbnail.
2. Second, if the first statement returns false it will check your blog post body if you are using images from third party site, then it if returns true it will pick the first image and make it as a thumbnail.
3. If the two statements return false or your post does not have any images the default thumbnail which I set on the codes will be used.