Cara Membuat Related Posts / Artikel Terkait Di Blog

Cara Membuat Related Posts / Artikel Terkait Responsive Di Blog. Sobat blogger. Di artikel kali ini saya ingin membuat sebuah tutorial bagaimana cara membuat artikel terkait / related post yang cukup simple yang terletak dibawah posting anda. Sudah kita ketahui bahwa artikel terkait ini adalah sebuah widget yang menampilkan post terkait dengan posting atau label yang sudah kita terapkan sesuai isi artikel.

Banyak keuntungan jika kita menerapkan artikel terkait pada blog kita, selain kita bisa menawarkan artikel pilihan posting sesuai label atau yang terkait dengan posting yang dibaca, related post juga bisa meningkat SEO dan menurunkan tingkat bouncing pada blog anda, karena tidak membuka hanya satu artikel di blog anda.

Baca Juga : Cara Membuat Daftar Isi / Sitemap Blog Simple

Bagi anda yang ingin menerapkan widget related post / artikel terkait yang bisa di terapkan dibawah posting blog anda, silahkan untuk ikuti tutorialnya yang cukup sangat mudah.

Cara Membuat Related Posts / Artikel Terkait Di Blog

1. Buka akun blogger anda.
2. Pilih menu template dan klik edit HTML.
3. Selanjutnya silahkan letakan kode di bawah ini tepat diatas kode </style> atau ]]></b:skin>

/* CSS Related Posts */
.related-post{margin:auto;font-size:14px;background:#fff;box-shadow:inset 0 0 1px 0 #bbb;color:#404040}
.related-post h4{font-size:15px;margin:0;padding:15px 20px;font-weight:700;position:relative;font-family:'Open Sans',Arial,Sans-Serif;text-transform:uppercase;overflow:hidden}
.related-post ul{margin:0!important;padding:0!important}
.related-post ul li{padding:12px 20px!important;margin:0!important;border-top:1px solid #eaedee;list-style:none;transition:all .3s;}
.related-post ul li a{padding:0;margin:0;color:#7f939d;}
.related-post ul li a:hover{color:#f17c72;text-decoration:underline;}
.related-post ul li:before{content:"\f08e";font-family:FontAwesome;font-style:normal;top:0;left:0;margin-right:13px;transition:all .3s;}
.related-post ul li:hover:before{color:#398dcc;}

4. Sekarang silahkan letakan kode dibawah tepat di bawah kode </article>

<!-- Related Post Widget Start -->
    <div class='related-post' id='related-post'/>
  <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 Post&lt;/h4&gt;&quot;,
      numPosts: 6,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
   <!-- Related Post Widget End --> 

Selanjutnya letakan kode dibawah diatas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>//<![CDATA[     /*! Related Post => http://gplus.to/tovic */var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,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-style-'+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.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):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.thumbnailSize+'" height="'+d.thumbnailSize+'"><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.thumbnailSize+'" height="'+d.thumbnailSize+'"></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.thumbnailSize+'" height="'+d.thumbnailSize+'"><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.thumbnailSize+'" height="'+d.thumbnailSize+'"><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></b:if> 

5. Jika sudah silahkan save template kamu dan lihat hasilnya.

Baca Juga : Cara Membuat Halaman Contact Us Pada Blog

Oke saya rasa sudah cukup sekian untuk tutorial "Cara Membuat Related Posts / Artikel Terkait Di Blog" untuk lebih dan kurangnya saya mohon maaf, jangan lupa baca update artikel-artikel terbaru di blog oktavialie ya.