Pada kesempatakan kali ini saya akan membagikan sebuah tutorial cara membuat related post dengan Tampilan yang menarik dan style yang simple
Related Post, atau artikel terkait, adalah opsi dimana para pengunjung blog sobat bisa menemukan artikel yang terkait dengan artikel atau postingan yang sedang dibacanya. Biasanya artikel terkait tersebut memiliki kesamaan label atau kategori dengan artikel atau postingan yang sedang dibaca pengunjung blog sobat.
Fungsi related post disini adalah agar para pengunjung tak hanya tahu tentang artikel atau postingan yang sedang dibacanya, namun juga tertarik dengan artikel terkait yang disuguhkan.
Dengan Tampilan related post yang menarik dan style yang simple serta enak di pandang mata akan membuat pengunjung blog sobat menjadi semakin tertarik untuk melihat post terkait.
Selain itu related post ini juga sudah responsive disemua perangkat yang menambah kesan elegan dan sesuai dengan berbagai device. Bagi yang tertarik untuk memasang related post di blog, silahkan lakukan langkah-langkah dibawah ini.
Tutorial Cara Membuat Related Post Dibawah Postingan Blogger
Pertama, buka blogger.com, setelah itu buka meu Tema lalu Edit HTML, Letakan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>
/* Related Post CSS */
.related-post-item-tooltip{height:54px;overflow:hidden;width:50%;float:left;text-overflow:ellipsis;padding:10px;}
#related-post .material-icons{font-size:200%;right:20px;color:#747d8c;top:-1px;position:absolute;}
#related-post{background:#fff;margin:10px;}
.related-post{margin:30px 0 0;position:relative;padding:0 0 10px;}
.lol h4 i,.related-post h4 i{margin-right:14px;}
.lol h4,.related-post h4{border-radius:4px;color:#747d8c;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;border:1px solid #ecf0f1;position:relative;padding:15px 20px 12px;margin:0 0 20px;}
.related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word;}
.related-post-style-3 li a{font-family:'Roboto',sans-serif;color:#666;font-weight:700!important;font-size:14px;line-height:1.4em;}
.related-post-style-3 li a:hover{color:#111;}
.related-post-style-3 .related-post-item{display:inline-block;float:left;border-radius:3px;border:1px solid #ecf0f1;width:47%;margin-right:15px;height:auto;padding:0;margin-bottom:20px!important;position:relative;overflow:hidden;}
.related-post-style-3 .related-post-item:focus{outline:none;border:none;}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:40%;height:100px;float:left;}
.related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out;}
.related-post-item:hover .related-post-item-tooltip a{opacity:1;}
.related-post-item-tooltip a{color:#666!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:12px!important;position:relative;}
@media screen and (max-width:480px){.related-post-style-3 .related-post-item{width:100%!important;}.related-post-style-3 .related-post-item-thumbnail{height:100px!important;}}Letakan kode di bawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-3' atau di atas kode </article>
<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'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4><i class='fa fa-bookmark'></i> Related Post</h4>",
numPosts: 6,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 300,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dny.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)+"…":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+""):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)+"…":"";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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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>Setelah itu Simpan Tema, dan lihat hasilnya. Berikut adalah tampilan related post pada langkah-langkah diatas.
Sekian tutorial yang bisa saya bagikan kali ini, jika ada yang belum jelas bisa ditanyakan di kolom komentar atau halaman kontak yang telah disediakan blog ini. Semoga bermanfaat dan Terima kasih.
