Ada banyak beragam cara untuk mempercantik tampilan blog pada blogger, menyerupai 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 sahabat lain yang sangat suka ngeblog menggunkan Platform lain menyerupai Wordpress dan sejenisnya.
Untuk sahabat yang belum pernah membaca postingan 6 Alasan Ngeblog Menggunakan Blogger mampu di lihat DISINI. Untuk postingan kali ini masih berafiliasi dengan alasan tadi salah satunya ialah dapat dengan mudah mengatur, memodifikasi templated yang digunakan sehingga kita mampu 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 isyarat dan sedikit memodifikasi isyarat pada widget di sidebar, untuk sahabat yang ingin mencobanya mampu di simak dibawah ini.
Membuat Related Posts Di Sidebar Blogger sebenar hanya memindahkan saja isyarat 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 ialah related post dari DTE dan cara untuk memindahkan related post ke sidebar lebih lengkapnya mampu sahabat lihat DISINI yang sudah dibahas oleh mas taufik dalam komentar blognya meskipun tidak terlalu detil tapi mampu 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 menyebarkan dan melengkapinya untuk sahabat yang ingin mencobanya mari disimak bersama.
Langkah Pertama
Silahkan sahabat tambahkan isyarat CSS dibawah ini yang fungsinya supaya related post berjejer ke bawah dan tidak ke samping, tampilan pada isyarat ini mampu sahabat sesuaikan dengan tampilan tema pada blog yang sahabat 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 sahabat salin isyarat 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 isyarat HTML diatas tadi letakkan sempurna di bawah isyarat berikut atau menyerupai mirip 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 sahabat salin isyarat JavaScript dibawah ini letakkan sempurna diatas isyarat </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:"https://justandmyguys.blogspot.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 isyarat diatas silahkan sahabat ganti url https://justandmyguys.blogspot.com/ menjadi alamat url sobat, kemudian untuk menentukan jumlah post yang ingin sahabat tampilkan silahkan rubah di isyarat numPosts:7.
Langkah Ke Empat
Setiap blog mempunyai tag sidebar yang berbeda-beda saran saya sahabat jangan terlalu terpaku dengan tag sidebar di isyarat 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 sahabat gunakan, menyerupai referensi sahabat ingin menampilkan sidebar sempurna di bawah popular post biasanya isyarat pada sidebar di popular post menyerupai 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 menyerupai diatas silahkan sahabat salin isyarat dibawah ini lalu letakkan sempurna dibawah isyarat </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 alhasil menyerupai 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 ketika di SAVE tidak mampu dikarenakan terdapat double ID dari HTML5 harap sahabat perhatikan isyarat id='HTML5' di Gadget Related Posts, bila sudah ketemu silahkan sahabat ganti angka 5 menjadi angka yang sahabat inginkan bebas yang penting tidak sama tujuannya semoga tidak terjadi error dan double ID untuk target penempatan HTML Related Posts di javascript kunci atau patokannya ialah kode id='related'.
Kemudian bila sahabat mau merubah title pada gadget nya jangan merubah dari tata letak/layout ini mampu terjadi error nantinya, namun silahkan sahabat rubah di Edit HTML pada isyarat title='Related Posts'.
Dan Selesai...Selamat Mencoba.
Comments