Tips Cara Membuat Related Post di Blog

Hembs ... sahabat blogger yang senang utak - atik template blog pasti kenal dengan mas sugeng ganteng banget kan ? , nah kali ini saya akan menjawab request dari teman saya yang ingin dibuatkan tutorial untuk membuat artikel terkait yang keren seperti template premium evo magz

  Tahukah anda , jika kita memasang artikel terkait di blog kita , dapat meningkatkan jumlah page view pada blog kita , karena dengan adanya related post , pengunjung akan tertarik dengan artikel yang berkaitan dengan artikel yang sedang dibaca.

  Widget artikel terkait ini merupakan sebuah widget blogger dari kang taufiq pemilik blog dte , kemudian di modifikasi oleh mas sugeng menjadi lebih cool , wisget related post tersebut di lengkapi dengan gambar berukuran 72 pixel dan di lengkapi dengan post snippet . Nah bagi yang penasaran seperti apakah related post ala mas sugeng , sobat bisa lihat gambar dibawah ini :

Cara Membuat Artikel Terkait di Blog Ala Evo Magz

1. Pertama silahkan sobat masuk ke halaman edit template
2. Kemudian Pasang kode css berikut , tepat diatas kode  ]]></b:skin> atau</style>

   /* ==== Related Post Widget Start ==== */
   .related-post{margin:15px 0 0;border-top:1px solid #f0f0f0;padding:15px 0 0}
   .related-post h4{font-size:14px;margin:0 0 .5em;text-transform:uppercase}
   .related-post-style-2{margin:0 0 0 0!important;padding:0 0 0 0!important;list-style:none}
   .related-post-style-2 li{margin:0 0 0 0;padding:0 0 0 0}
   .related-post-style-2 li{padding:5px 0!important;border-top:1px solid #eee;overflow:hidden}
   .related-post-style-2 li:first-child{border-top:none}
   .related-post-style-2 .related-post-item-thumbnail{width:60px;height:60px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 8px 0 0}
   .related-post-style-2 .related-post-item-title{font:normal normal 16px Fjalla One,Helvetica,Arial,sans-serif} www.masyadi.com
   .related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
   .related-post-style-2 .related-post-item-more{}

3. Cari kode </body> , dan pasang kode dibawah ini diatas kode </body> tersebut

   <div class='related-post' id='related-post'></div>
   <script type='text/javascript'>
        var labelArray = [
          "Smartphone"
   ];
        var relatedPostConfig = {
         homePage: "http://evomagzblog.blogspot.com/",
         widgetTitle: "<h4>Related Posts :</h4>",
         numPosts: 5,
         summaryLength: 140,
         titleLength: "auto",
         thumbnailSize: 60,
         noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioh0fTVMV5D_b8sGZxzCRo7qOOZTf8daoVNPJRIqu9A3KN0IhaNdl1ptI7aMDFgCX9vrEmnBKvhkO50vjDAa-bWLmEHgQVvR1w0T93W12pFeRBBsb2DDZMyLbXrqBbsaLiBfCXVZAojDzs/w60-c-h60/no-image.png",
         containerId: "related-post",
         newTabLink: false,
         moreText: "Read More...",
         widgetStyle: 2,
         callBack: function() {}
        };
        </script><script type='text/javascript'>
   //<![CDATA[     
   /*! Related Post Widget for Blogger by Taufik Nurrohman => 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>

4. Klik save dan lihat hasilnya

Sebetulnya cara memasang related post di blog seperti memasang tombol share , nah jika sobat ingin meletakan related post tersebut diatas tombol berbagi , maka peletakanya juga diatas coding share , oke sekian cara membuat artikel terkait ala evo magz , semoga bermanfaat bagi anda , jika ada yang ingin ditanyakan silahkan komentar dibawah