Joecalih
  • Blogging
    • WordPress
    • Blogger
      • Blogger Widgets
    • Marketing
      • Content Marketing
      • Social Media Marketing
      • Email Marketing
      • Affiliate Marketing
    • Tips & Tricks
  • SEO
    • What is SEO
      • White Hat SEO
      • Black Hat SEO
    • SEO Tutorials
      • Local SEO
      • Video SEO
      • Image SEO
    • Beginners SEO
    • On-Page-SEO
    • SEO ToolsFree
    • Link Building
    • PPC
  • Graphics
    • Photoshop
      • Photoshop Actions
      • Photoshop Brushes
      • Photoshop Overlays
      • Photoshop Textures
      • Photoshop Tutorials
    • Lightroom
      • Lightroom Presets
      • Lightroom Mobile Presets
      • Lightroom Tutorials
    • Premuire Pro
    • Design
      • Posters
      • Mockups
      • Vectors
  • Photography
  • Shop$69
  • Offers
  • Support
  • Licenses
  • Advertise
Subscribe
Joecalih
Joecalih
  • Blogging
    • WordPress
    • Blogger
      • Blogger Widgets
    • Marketing
      • Content Marketing
      • Social Media Marketing
      • Email Marketing
      • Affiliate Marketing
    • Tips & Tricks
  • SEO
    • What is SEO
      • White Hat SEO
      • Black Hat SEO
    • SEO Tutorials
      • Local SEO
      • Video SEO
      • Image SEO
    • Beginners SEO
    • On-Page-SEO
    • SEO ToolsFree
    • Link Building
    • PPC
  • Graphics
    • Photoshop
      • Photoshop Actions
      • Photoshop Brushes
      • Photoshop Overlays
      • Photoshop Textures
      • Photoshop Tutorials
    • Lightroom
      • Lightroom Presets
      • Lightroom Mobile Presets
      • Lightroom Tutorials
    • Premuire Pro
    • Design
      • Posters
      • Mockups
      • Vectors
  • Photography
  • Shop$69
  • Offers
Joecalih Freebies
  • Landscape Lightroom Presets Landscape Lightroom Presets
    Rated 5.00 out of 5
    $30.00 $0.00
  • Food Lightrrom Presets Food Photography Lightroom Presets $50.00 $0.00
  • Architecture Lightroom Presets Architecture Lightroom Presets $80.00 $0.00
  • petermckinnon presets Peter Mckinnon Lightroom Presets $30.00 $0.00
0
Related Post

Related posts help increase the click-through rate of a website. With the below-related post widget for your blogger blog website, you will be able to automate your revenue by providing your audience with other posts that have related content through labels and titles. We will take a look at how we will integrate the related post under your post with thumbnails that have a good looking scheme. Let’s jump in the tutorial on How To Add  Related Post With Thumbnails For Blogger Website.

How To Related Post Widget To Blogger.

1. log in to your website in blogger.com
2. Click on Theme.
3. Below live view and next to customize click on Edit HTML
4. Click anywhere in the code.
5. Press Ctrl+F to display the search dialogue box.
6. Search for the code </head> or /head
7. Just BEFORE the above code, copy and paste the below code and paste it.

<!--Related Posts with thumbnails joecalih.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
    float:left;
    width:auto;
}
#related-posts h2 {
    margin-top: 10px;
    background:none;padding:3px;
}
#related-posts .related_img {
    margin:5px;
    border:4px solid #f2f2f2;
    width:105px;height:105px;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out;
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opacity:.7;
    -khtml-opacity:.7
}
#related-title:hover {
    text-decoration: underline;
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails joecalih.com End-->

That’s the implementation of the CSS part now let’s add the HTML below the post to make it appear.
8. Now search for the code  <div class=’comments’ id=’comments’>
9. Just BELOW the above code Paste the below Code

<!-- Related Posts -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
            <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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
        <script type='text/javascript'>
            var currentposturl=&quot;<data:post.url/>&quot;;
            var maxresults=6;
            var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs();
        </script>
    </div>
</b:if>
<!-- Related Posts -->

10. Save your template and check your website

Also, Read on :

Total
0
Shares
Share
Tweet
Pin it

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Lattest
  • Joecalih photography 2021 Breakdown
  • Google Translate Widget For Blogger Website
  • Responsive Digital Clock Widget For Blogger Website
  • Page Views Stats Widget For Blogger
  • Facebook Like Box Popup Blogger Widget

Subscribe now to our newsletter

  • Blogger Themes
  • After Effects Templates
  • MockupsNew
  • Blogger Widgets
  • Photoshop Tutorials
  • Blogger TutorialsFree
  • Search Engine Optimization
  • WordPress Tutorials
  • Lightroom Presets$5
  • Camera Raw Presets
  • Premuire Pro Presets
  • Graphic designFree
Joecalih
  • About Us
  • Contact Us
  • Support
  • Cookies
  • © 2020 Joecalih Media inc.

Input your search keywords and press Enter.