Menambahkan Artikel Terkait ke Sidebar di Blogspot
Artikel ini sebenarnya saya dapat dari blog bungfrangki dimana waktu itu saya lagi mencari referensi untuk template projek saya untuk blog sekolah dengan referensi tampilan laman pusat informasi PMM. Sepertinya tidak terlalu penting, namun bagi saya ini bisa dijadikan referensi dan pembelajaran juga, juga siapa tahu diantara Anda ada yang lagi membutuhkan bagaimana menampilkan artikel terkait di sidebar.
Namun disini saya hanya membagikan dasarnya saja, kalau Anda ingin membuatnya menjadi cuztomized silakan langsung meluncur ke blog bungfrangki.
Baik silakan ikuti tutorialnya.
Pasang HTML
Langkah pertama buka Edit HTML
Kemudian pasang kode HTML berikut dibawah di atas id='sidebar-wrapper' atau yang penting diatas wadah sidebar.
<div class='related-posts-widget' id='related-posts-widget'>
<div class='note2'/>
<b:section class='relatedPost' id='related-post-set-sidebar' maxwidgets='1' name='Related Post Setting' preferred='yes' showaddelement='no'>
<b:widget id='HTML790' locked='true' title='Related Post' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>numPosts:6,widgetStyle:1,summaryLength:100,</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
var relatedPostConfig={homePage:"<data:blog.homepageUrl/>",widgetTitle:"<h4><data:title/></h4>",titleLength:"auto",thumbnailSize:322,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Read More",<data:content/>callBack:function(){}}
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Langkah selanjutnya pergi ke class='post-footer'. Biasanya ada di bawah postingan, lalu pasang juga HTML di bawah.
<div class='related-wrapper' id='related-wrapper'> <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>]; </script> </div>
Pasang CSS
Setelah selesai kita pasang CSS di dalam <style> atau b:skin
/* CSS Related Post for Sidebar */
#related-wrapper{margin:20px auto 0;padding:0;display:block;width:100%;max-width:300px;overflow:hidden;}
.related-post{font-family:'Poppins', sans-serif;margin:0 auto;padding:0;text-align:center}
.related-post h4{margin:5px 0 15px 0;font-size: 15px;line-height: 1.2em;padding: 0 15px;position: relative;color: #292828;font-weight: 700;text-align:center;text-transform: uppercase;background-color:#fff;display:inline-block}
.related-post h4:before{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;right: 100%;left: auto;top: 50%;content: "";}
.related-post h4:after{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;left: 100%;right: auto;top: 50%;content: "";}
.related-post .related-post-style-1,.related-post .related-post-style-2,.related-post .related-post-style-3,.related-post .related-post-style-4,.related-post-style-5{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap: wrap;}
.related-post .related-post-item-summary,.related-post-style-3 span,.related-post-style-4 span{font-size:83%;color:#656565;text-align:left!important;margin:0 auto;padding:0}
/* Related Post Style 6 */
.related-post-style-6 .related-post-item-tooltip{display:block;width:100%}
.related-post-style-6 li .related-post-item-summary{display:none}
.related-post-style-6 li{list-style:none;margin:0 auto 10px;padding:0 0 10px;border-bottom:1px solid #eee;display:block;width:100%;position:relative;overflow:hidden}
.related-post-style-6 a.related-post-item-title{display:block;text-align:left;font-weight:400;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:0 auto 7px;text-align:left;}
.related-post-style-6 a:hover{text-decoration:underline}
.related-post-style-6 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:70px;height:70px;padding:0;margin:0 15px 0 0;overflow:hidden;float:left}
.related-post-style-6 .related-post-item-thumbnail img{width:auto;height:100%;display: flex;align-items:center;}
.related-post-style-6 li:first-child .related-post-item-thumbnail{width:100%;height:175px;float:none;margin:0 auto 10px}
.related-post-style-6 li:first-child .related-post-item-thumbnail img{width:100%;height:auto;}
.related-post-style-6 li:first-child .related-post-item-summary{display:inline-block}
.related-post-style-6 li:last-child{border:none}
/* Related Post Style 5 */
.related-post-style-5{margin:0 auto;counter-reset:count;}
.related-post-style-5 li{list-style:none;margin:0 auto 10px;height:100px;display:block;width:100%;position:relative;border-radius:5px;overflow:hidden}
.related-post-style-5 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:100%;padding:0;margin:0 auto;overflow:hidden}
.related-post-style-5 li img{width:100%;height:auto;position:relative;}
.related-post-style-5 a{display:block;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#fff;margin:0 auto}
.related-post-style-5 a:hover{text-decoration:underline}
.related-post-style-5 li a span{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100px;width:100%;position:absolute;z-index:10;bottom:-100px;display:block;background:rgba(0,0,0,.4);transition:all .2s ease-in-out;padding:5px 5px 5px 35px;display:flex;flex-direction:column;justify-content:center;}
.related-post-style-5 li:hover a span{bottom:0}
.related-post-style-5 li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left: 0px;text-align: center;top: 0;font: bold 80px/1 Sans-Serif;z-index: 51;transition: all .4s;height:100px;min-width: 30px;font-size: 18px;line-height: 100px;background:rgba(26,27,30,.7);font-weight: 800;text-align: center;padding:0;opacity:0.7;}
/* Related Post Style 4 */
.related-post-style-4{margin:0 auto;padding:0}
.related-post-style-4 ul li,.related-post-style-4 ul,.related-post-style-4 li{list-style:none;outline:0;border:0;margin:0 0;padding:0}
.related-post-style-4 li{list-style:none;margin:0 auto;display:block;width:100%;overflow:hidden}
.related-post-style-4 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:auto;max-height:180px;padding:0;margin:0 auto;overflow:hidden;}
.related-post-style-4 li img{width:100%;height:auto;}
.related-post-style-4 a.related-post-item-title{display:block;text-align:center;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:0 auto 7px}
.related-post-style-4 a:hover.related-post-item-title{text-decoration:underline}
.related-post-style-4 span{display:table-cell;}
.related-post-style-4 .related-post-item-tooltip{margin:-25px 15px 10px;padding:10px;display:block;position:relative;background-color:#fff;overflow:hidden}
.related-post-style-4 span{text-align:center;display:inline}
/* Related Post Style 3 */
.related-post-style-3{margin:0 auto}
.related-post-style-3 li{list-style:none;margin:0 auto;display:block;width:100%}
.related-post-style-3 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:auto;max-height:180px;padding:0;margin:10px auto 0;overflow:hidden;}
.related-post-style-3 li img{width:100%;height:auto;}
.related-post-style-3 a.related-post-item-title{display:block;text-align:left;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:10px auto 5px}
.related-post-style-3 a:hover.related-post-item-title{text-decoration:underline}
.related-post-style-3 span{display:table-cell;} // this is summary
/* Related Post Style 2 */
.related-post-style-2{margin:0 auto!important;}
.related-post-style-2 li{list-style:none;margin:0 auto 10px;padding:10px 0 0;display:block;width:100%;border-top:1px solid #eee}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;margin:0 auto;width:125px;height:80px;max-width:none;max-height:none;padding:0;overflow:hidden;display:inline-block;float:left}
.related-post-style-2 .related-post-item-thumbnail img{width:100%;height:100%}
.related-post-style-2 a.related-post-item-title{line-height:1.3em;display:block;text-align:left;font-size:100% !important;color:#2d2d2d;margin:0 0 5px;font-weight:700}
.related-post-style-2 a:hover.related-post-item-title{text-decoration:underline}
.related-post-style-2 a.related-post-item-more{display:none}
.related-post-style-2 .related-post-item-text{display:inline-block;text-align:left;width:calc(100% - 140px);float:right;}
/* Related Post Style 1 */
.related-post-style-1{margin:0 auto;counter-reset:count;}
.related-post-style-1 li{font-size:95% !important;list-style:none;background-color:#f5f5f5;border-bottom:1px solid #fff;display:block;position:relative;margin:0 auto;padding:13px 10px 13px 50px;text-align:left}
.related-post-style-1 li a{color:#2d2d2d;font-weight:400;line-height:1.3em;text-align:left;display:block}
.related-post-style-1 li a:hover{text-decoration:underline}
.related-post-style-1 li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left: 0px;text-align: center;top: 0;font-size:70px;z-index: 51;transition: all .4s;min-width:40px;font-size: 18px;background:rgba(0,0,0,.5);vertical-align:center;height:100%;font-weight: 700;text-align: center;padding:0;display:flex;flex-direction:column;justify-content:center;height:100%;}
Kalau kita lihat diatas CSSnya sangat panjang, namun sebenarnya itu ada 6 gaya atau tampilan yang bisa kita aplikasikan ke dalam blog, seperti misal style 1 hanya tulisan tanpa thumbnail, lalu gaya 2 ada tulisan dan thumbnailnya, dlsb. Lebih lengkapnya silakan capcus ke blog bungfrangki. Jika tidak membutuhkan bisa Anda buang di CSS agar terlihat lebih simple.
Pasang Javascript
Kemudian langkah selanjutnya adalah memasang Js di atas </body>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:125,titleLength:"auto",thumbnailSize:200,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(/\/?\?m=\d+(\&|$)|\/+$/, "")+"/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 class="bg_overlay"></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(/.*?:\/\//g , "//").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><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div class="related-post-item-text"><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></div>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title-thumb" href="'+v+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a><span>"+u+"</span></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+'><div class="related-post-item-thumbnail"><img alt="" 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><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><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></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(/\/?\?m=\d+(\&|$)|\/+$/, "")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
kemudian simpan template Anda. Dan langkah terakhir adalah memasang kode berikut melalui menu Tata Letak >> tambahkan Gadget pada Layout Sidebar, kemudian pilih HTML/Javascript.
<div class='related-post' id='related-post'/>
Demikian tutorial cara memasang related post di sidebar blogspot, semoga bermanfaat.
