Ada banyak beragam cara untuk mempercantik tampilan blog pada blogger, seperti yang pernah saya bahas sebelumnya 6 Alasan Ngeblog Menggunakan Blogger disitu dibahas banyak kelebihan ngeblog mengunakan Blogger ya setidaknya itu pendapat saya secara pribadi, namun ada juga sobat lain yang sangat suka ngeblog menggunkan Platform lain seperti Wordpress dan sejenisnya.
Untuk sobat yang belum pernah membaca postingan 6 Alasan Ngeblog Menggunakan Blogger bisa di lihat DISINI. Untuk postingan kali ini masih berhubungan dengan alasan tadi salah satunya adalah dapat dengan mudah mengatur, memodifikasi templated yang digunakan sehingga kita bisa mengatur sendiri penempatan tool di widget blogger kita.
Di Postingan kali ini akan membahas Membuat Related Posts Di Sidebar Blogger, cara ini termasuk mudah hanya menambahkan kode dan sedikit memodifikasi kode pada widget di sidebar, untuk sobat yang ingin mencobanya bisa di simak dibawah ini.
Membuat Related Posts Di Sidebar Blogger sebenar hanya memindahkan saja kode Related post yang pada umumnya dibawah postingan ke sidebar dan tidak akan merubah apapun di gadget sidebar layout, kita bermain di edit html-nya saja. Related yang digunakan ini adalah related post dari DTE dan cara untuk memindahkan related post ke sidebar lebih lengkapnya bisa sobat lihat DISINI yang sudah dibahas oleh mas taufik dalam komentar blognya meskipun tidak terlalu detil tapi bisa membantu dan menginspirasi postingan saya ini Membuat Related Posts Di Sidebar Blogger. Untuk itu di postingan Membuat Related Posts Di Sidebar Blogger saya akan mencoba berbagi dan melengkapinya untuk sobat yang ingin mencobanya mari disimak bersama.
Langkah Pertama
Silahkan sobat tambahkan kode CSS dibawah ini yang fungsinya supaya related post berjejer ke bawah dan tidak ke samping, tampilan pada kode ini bisa sobat sesuaikan dengan tampilan tema pada blog yang sobat gunakan.
.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}Langkah Ke dua
Silahkan sobat salin kode HTML dibawah ini
<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>Lalu kode HTML diatas tadi letakkan tepat di bawah kode berikut atau mirip seperti tampilan ini
<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>Langkah Ke Tiga
Silahkan sobat salin kode JavaScript dibawah ini letakkan tepat diatas kode </body>
<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.dibalikseo.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>Perhatikan kode diatas silahkan sobat ganti url http://www.dibalikseo.com/ menjadi alamat url sobat, kemudian untuk menentukan jumlah post yang ingin sobat tampilkan silahkan rubah di kode numPosts:7.
Langkah Ke Empat
Setiap blog mempunyai tag sidebar yang berbeda-beda saran saya sobat jangan terlalu terpaku dengan tag sidebar di kode yang saya berikan ini jadi silahkan tentukan sendiri target gadget di sidebar-nya untuk dapat menampilkan related post-nya, jadi sesuaikan dengan templated blog yang sobat gunakan, seperti contoh sobat ingin menampilkan sidebar tepat di bawah popular post biasanya kode pada sidebar di popular post seperti penampakan dibawah ini.
<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>Jika seperti diatas silahkan sobat salin kode dibawah ini lalu letakkan tepat 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>Dan nanti hasilnya seperti penampakkan dibawah 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>Jika sudah sesuai jangan lupa di SAVE templated sobat, pernah terjadi permasalahan saat di SAVE tidak bisa dikarenakan terdapat double ID dari HTML5 harap sobat perhatikan kode id='HTML5' di Gadget Related Posts, jika sudah ketemu silahkan sobat ganti angka 5 menjadi angka yang sobat inginkan bebas yang penting tidak sama tujuannya agar tidak terjadi error dan double ID untuk target penempatan HTML Related Posts di javascript kunci atau patokannya adalah kode id='related'.
Kemudian jika sobat mau merubah title pada gadget nya jangan merubah dari tata letak/layout ini bisa terjadi error nantinya, namun silahkan sobat rubah di Edit HTML pada kode title='Related Posts'.
Dan Selesai...Selamat Mencoba.
EmoticonEmoticon