Cara Membuat Widget Artikel Terkait atau Related Post di Blog

Posted by at

Setiap pengunjung blog, pasti ingin blog yg dikunjunginya itu kelihatan menarik.
Dan sebagai pemilik blog, tentunya juga ingin mempermudah para pengunjung blog utk membaca artikel-artikel dari blognya.

Menurut saya, salah satu cara yg bisa mempermudah pengunjung blog utk membaca artikel-artikel yg ada di blog yaitu dengan menggunakan widget Artikel Terkait.
Dengan adanya widget Artikel Terkait atau Related Post , maka pengunjung blog bisa lebih mudah membaca artikel yg berkaitan dengan artikel yg sedang dibaca atau yg baru aja selesai dibacanya.

Di artikel saya kali ini, saya ingin sharing tutorial tentang gimana Cara Membuat Widget Artikel Terkait atau Related Post di Blog.
Jika anda berminat membuatnya utk blog anda, maka ikuti langkah-langkah berikut ini :

1. Pada laman dashboard blogger, klik Tema >> Edit Tema

2. Copy kode CSS di bawah ini dan Paste di atas </style>

/* Related Post */
.related-postbwrap{position:relative;margin:0 auto 30px auto;padding:0 0 20px 0;border-bottom:1px solid rgba(0,0,0,0.08)}
.related-postbwrap h4{background:#008c5f;display:table;margin:0 0 15px 0;font-size:14px;color:#fff;font-weight:400;padding:8px 14px;border-radius:3px}
.related-postbwrap h4:before{content:"\f0ae";font-family:fontawesome;margin-right:8px;font-weight:normal}
.related-post-style-2,.related-post-style-2 li{list-style:none;margin:0;padding:0}
.related-post-style-2 li{min-height:102px;background:#fff;overflow:hidden;position:relative;width:48.2%;float:left;margin:10px 20px 10px 0;padding:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s}
.related-post-style-2 li:nth-child(even){margin:10px 0}
.related-post-style-2 li:hover{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.1);cursor:pointer}.related-post-style-2 li:hover .related-post-item-title{color:#3B33DB}
.related-post-style-2 .related-post-item-thumbnail{display:inline-block;width:100px;height:auto;max-width:none;max-height:none;background-color:transparent;border:none;float:left;margin:2px 10px 0 0;padding:0}
.related-post-style-2 .related-post-item-title{display:block;font-size:14px;color:#222;overflow:hidden;padding:15px 10px 10px 5px;transition:all .3s}
.related-post-style-2 .related-post-item-title:hover{color:#3B33DB}
.related-post-style-2 .related-post-item-summary{display:none;}

3. Copy kode HTML di bawah ini , lalu Paste tepat di atas kode </article>

<div class='related-postbwrap' id='bpostrelated-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;Artikel Terkait&lt;/h4&gt;&quot;,
      numPosts: 4,
      summaryLength: 120,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 100,
      noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiBSiiQkvbIQ6hMKi_gN1MLwJyY3g9sxMFKOHqhIxkxmX_YIM1lBZz86aLNjY3Iw8NcEsdDc6oDcCo_a3pAv0vmy0bv7-0cs1RqCYETsVVJ_ioFYmkcloklfWcR9CuEM-bmSi7iGOqEd0c/s1600/no-amp-img.png&quot;,
      containerId: &quot;bpostrelated-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>Artikel Terkait:</h4>",widgetStyle:1,homePage:"https://kningoclan.blogspot.com",numPosts:4,summaryLength:370,titleLength:"auto",thumbnailSize: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-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><amp-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+'><amp-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+'><amp-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"><amp-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>

4. Yg terakhir, klik Simpan Tema

Baiklah. Itulah sedikit tutorial dari saya tentang Cara Membuat Widget Artikel Terkait atau Related Post di Blog.

Semoga bisa bermanfaat bagi blog anda. Terima Kasih.
Labels:

Popular Posts