Cara Membuat Artikel Terkait/Related Post Mudah dan Stylish

FANSUBLOGGER - Kali ini saya Nagato Akatsuki (Bukan Tukang Terjemah), akan membagikan tutorial membuat artikel terkait atau related post mudah dan bagus. Ikutin aja langkah nya lalu related post siap dipasang.

Cara Pemasangan

Pertama kopikan dulu CSS dibawah ini tepat dibawah <style> atau diatas </style>

/* ==== Related Post Widget Start ==== */
.related-post {
margin:2em auto 0;
}
.related-post h4 {
background-color: #fff;
color: #666;
font-weight: bold;
margin: 0 0 0 0;
font-size: 14px;
padding: 8px 12px;
border: 1px solid #ECF1F5;
display: inline-block;
border-bottom: 4px solid #ECF1F5;
border-bottom:none;
border-radius: 3px 3px 0 0;
}
/* Style 5 */
ul.related-post-style-5 {
padding:20px 12px !important;
margin:-1px 0 20px 0 !important;
border:1px solid #ECF1F5;
}
.related-post-style-5,
.related-post-style-5 li {
margin:0;
padding:0;
list-style:none;
word-wrap:break-word;
overflow:hidden;
}
.related-post-style-5 .related-post-item {
background:#F3F7FA;
display:block;
float:left;
width:120px;
height:auto;
margin:0px 0px 0px 10px;
border:1px solid #ECF1F5 !important;
padding:9px;
}
.related-post-style-5 .related-post-item:first-child {margin-left:0px;border-left:none}
.related-post-style-5 .related-post-item-wrapper {
display:block;
position:relative;
overflow:hidden;
}
.related-post-style-5 .related-post-item-thumbnail {
display:block;
margin:0;
width:120px;
max-width:none;
max-height:none;
background-color:transparent;
border:none;
padding:9px 0;
}
.related-post-style-5 .related-post-item-tooltip {
transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
font-family:"Open Sans Condensed",Arial,Sans-serif;
font-weight:normal;
font-size:13px;
text-transform:uppercase;
display:block;
background-color:#07ACEC;
position:absolute;
top:65px;
right:0;
bottom:9px;
left:0;
padding:8px 10px;
line-height:normal;
color:white;
overflow:hidden;
display:none;
text-transform:uppercase;
}
.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}
/* ==== Related Post Widget End ==== */

Penempatan Related Post

Kopikan Javascript dibawah ini. Lokasi terserah kalian.

<div class='related-post' id='related-post'></div>
<script type='text/javascript'>
   var labelArray = [
     "Free",

     "Personal",

     "Responsive",

     "Simple"
];
   var relatedPostConfig = {
    homePage: "/",
    widgetTitle: "<h4>Related Posts</h4>",
    numPosts: 4,
    summaryLength: 370,
    titleLength: "auto",
    thumbnailSize: 118,
    noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    containerId: "related-post",
    newTabLink: false,
    moreText: "Read More",
    widgetStyle: 5,
    callBack: function() {}
   };
   </script>
<script type='text/javascript'>
   //<![CDATA[
   /*! Related Post Widget for Blogger */
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>