Cara Membuat Related Post Ala Mas Sugeng

maman    09.32.00    blog , tutorial    Comment   

Halo sahabat Mandala yang senang utak - atik template blog nah kali ini saya akan berbagi untuk membuat artikel terkait yang keren seperti template premium evo magz

Tak dapat dipungkiri bahwa dalam pembuatan related post 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, widget related post tersebut di lengkapi dengan gambar berukuran 72 pixel dan di lengkapi juga dengan post snippet . berikut cara pembuatannya :
Pertama yang sudah sahabat mandala tahu silahkan masuk ke halaman edit template : 

Kemudaian cari kode  ]]></b:skin> atau </style>
dan pasang kode dibawah ini tepat diatasnya :

/* ==== 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} http://mandalatutor.blogspot.com/ .related-post-style-2 .related-post-item-summary{display:block;overflow:hidden} .related-post-style-2 .related-post-item-more{}

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://mandalatutor.blogspot.com/",
      widgetTitle: "<h4>Related Posts :</h4>",
      numPosts: 5,
      summaryLength: 140,
      titleLength: "auto",
      thumbnailSize: 60,
      noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbzLR4zEryJfRt9DBXaZAQjV2rpo9CFbhjOTRIng6pa9SxRbKrYwg7EqQhsCP2-RPdiJ3eHHjRmJdJqcjYSV7lpgbvlH_9CSTPF8ji19uOS-Ja-ELlnEQ6btZunubdZPWlkizss8u5tsb/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 => */

===============================

var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://mandalatutor.blogspot.com/",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>

Kemudian klik save atau simpan.

Itulah cara membuat related pos ala mas sugeng