Table of contents:
Mangaip, setelah sebelumnya mamang bahas Cara Membuat Gambar Sejajar Berdampingan di Blog. Selanjutya mari kita bahas cara membuat related post pada sidebar blogspot atau blogger.
Apakah related post pada blog itu penting? Menurut mamang Related Post atau artikel terkait sangatlah penting pada sebuah blog. Salah satunya agar pembaca tidak kembali lagi ke halaman yang itu-itu aja dan menekan angka bounce rate.
Selain itu fungsi dari widget Related Post yaitu postingan blog kita akan saling berkesinambungan dangan judul blog lain. Misalnya sobat membuat postingan tentang tutorial, maka isi dari widget Related Postnya pun akan berisi semua postingan tentang tutorial.
Daripada bingung, dan mamang pun makin bingung, mending langsung action aja ya. Berikut langkah-langkah untuk menerapkannya:
CSS Kode
Silahkan pastekan kode CSS dibawah kedalam html blog sobat.
.related-bottomposts,.related-post h4 {display:none}
.related-post{margin:5% 5% 0;padding:0;font-family:'Open Sans',sans-serif;text-align:left;width:100%;position:relative;color:#000}
.related-post a{font-weight:600;color:#000;font-size:16px!important;}
.related-post a:hover{color:red}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0!important;list-style:none;word-wrap:break-word;overflow:hidden}
.related-post-style-3 .related-post-item{display:block;width:90%;max-width:300px;height:auto;padding:150px 0 10px;margin-bottom:20px!important}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 5px;width:99%;height:140px;max-width:none;max-height:none;background-color:transparent;padding:0;transition:all 400ms ease-in-out;border:1px solid #ddd}
.related-post-style-3 .related-post-item-thumbnail:hover{opacity:.7}
.related-post-style-3 .related-post-item:focus,.related-post-style-3 .related-post-item:active{outline:0}
HTML Kode
Cari kode html berikut di blog sobat, atau minimal yang mirip dengan kode berikut:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>
Lalu copy dan pastekan kode html dibawah, tepat dibawah kode yang tadi.
<b:if cond='data:blog.pageType == "item"'>
<div class='related-bottomposts'>
<div class='related-post' id='related-post'/>
</div>
<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={widgetStyle:3,callBack:function(){if(window.addEventListener)
{window.addEventListener("DOMContentLoaded",insertRelatedPostMarkupToSidebar,false);window.addEventListener("load",insertRelatedPostMarkupToSidebar,false)}else{if(window.attachEvent)
{window.attachEvent("onload",insertRelatedPostMarkupToSidebar)}else{window.onload=insertRelatedPostMarkupToSidebar}}}};
</script>
</b:if>
JAVASCRIPT Kode:
Selanjutnya cari kode </body> pada tema blog sobat, lalu pastekan kode berikut diatas kode
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function insertRelatedPostMarkupToSidebar(){var e=document.getElementById("related"),t=document.getElementById("related-post");if(e)e.insertBefore(t,e.firstChild)}; var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.mangaip.com/",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:300,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-titleimg" href="'+v+'"'+b+' title="'+t+'"><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>
</b:if>
Silahkan ganti kode: http://www.mangaip.com dengan URL blog Anda dan silahkan tentukan jumlah related posts yang ingin ditampilkan pada kode berikut numPosts:7
Cara Pasang ke Gadget Sidebar Blog
Untuk memasang pada gadget sidebar blog, harus teliti untuk membaca template blog masing-masing. Karena pasti akan ada perbedaan sedikit. Karena setiap tema pasti akan sedikti berbeda.
Misalnya sobat akan menempatkan related postnya dibawah Popular Post. Silahkan untuk mencari gadget tersebut dengan cara menekan CTRL + F pada template blog sobat. Kemudian cari PopularPosts atau PopularPosts1.
Maka nantinya akan muncul kode seperti dibawah, atau minimal sama
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
...............
...............
...............
</b:includable>
</b:widget>
</b:section>
</div>
Cari kode </b:widget>, lalu pastekan kode berikut dibawah kode </b:widget>.
<b:widget id='HTML5' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content' id='related'>
<data:content/>
</div>
</b:includable>
</b:widget>
Sehingga kalau sudah dipastekan, hasilnya akan seperti berikut ini.
<div id='sidebar-wrapper'>
<b:section class='sidebar3' id='sidebar3' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
...............
...............
...............
</b:includable>
</b:widget>
<b:widget id='HTML5' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content' id='related'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Setelah itu langsung Save Template yang sudah dibuat tadi. Apabila templatenya tidak bisa di-save, kemungkinan terjadi double id dari HTML tersebut. Untuk mengatasinya mudah kok sob, silahkan lihat kode id='HTML5'. Ganti angka 5 tersebut dengan angka berapapun misalnya 25.
Kalau mau mengganti Tittle dari gadget ini, jangan langsung menggantinya dari Tata Letak Blog. Tapi lebih baik menggantinya di mode html pada template blog sobat. Cari kode ini title='Related Posts'. Lalu ganti tulisan Related Posts dengan judul yang sobat inginkan, misalnya dengan judul Artikel Terkait.
