» »

Membuat Widget Related Post dengan 6 Pilihan Tampilan Berbeda

Cara Menampilkan Widget Related Post di Sidebar BloggerCara Menampilkan Widget Related Post di Sidebar Blogger


Preview nya seperti gambar di atas ya. jadi nanti bisa gonta ganti tampilan sesuai selera. Tampilan sudah disesuaikan dengan tema blogspot landing page builder, jadi mungkin harus dirubah lagi style nya kalau dipakai di template lain. Ok, Langsung simak cara buat nya. 

1. Silakan masuk ke menu Tema > Edit HTML

2. Copy paste code berikut ini sebelum kode <div id='right-bar'>

<div class='related-posts-widget' id='related-posts-widget'>
<div class='note2'/>
<b:section class='relatedPost' id='related-post-set-sidebar' maxwidgets='2' name='Random Post Setting' preferred='yes' showaddelement='no'>
<b:widget id='HTML11' locked='true' title='Random Post Setting' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>numPosts:6,
widgetStyle:6,
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 != &quot;&quot;'>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;<h4><data:title/></h4>&quot;,titleLength:&quot;auto&quot;,thumbnailSize:322,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,<data:content/>callBack:function(){}}
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
3. Cari kode <data:post.body/>, ada 2 kode, pilih yang pertama / paling atas, lalu letakkan kode berikut ini di bawah nya 
<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'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
</script>
</div>

4. Masukkan CSS berikut ini sebelum kode <!-- CSS Cuma di Home -->

<style>
#related-wrapper{margin:20px auto 0;padding:0;display:block;width:100%;max-width:100%;overflow:hidden;}
.related-post{font-family:&#39;Poppins&#39;, 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:none}
.related-post h4:before{display: none;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;right: 100%;left: auto;top: 50%;content: &quot;&quot;;}
.related-post h4:after{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;left: 100%;right: auto;top: 50%;content: &quot;&quot;;}
.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 -20px;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:500;overflow:hidden;line-height:1.3em;font-size:17px !important;margin:0 auto 7px;text-align:left;}
.related-post-style-6 a:hover{text-decoration:none}
.related-post-style-6 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:75px;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:10px 10px;height:150px;display:block;width:calc((100% / 4) - 20px);position:relative;border-radius:5px;overflow:hidden}
.related-post-style-5 li:first-child {margin-left:-10px}
.related-post-style-5 li:nth-of-type(5n){margin-left:-10px}
.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:80% !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:150px;width:100%;position:absolute;z-index:10;bottom:-150px;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:150px;min-width: 30px;font-size: 20px;line-height: 150px;background:rgba(26,27,30,.7);font-weight: 700;text-align: center;padding:0;opacity:0.7;}
#right-bar .related-post-style-5 li{width:calc((100% / 1) - 20px);margin-left:-10px}
  @media screen and (max-width:768px){
.related-post-style-5 li{width:calc((100% / 1) - 20px);margin-left:-10px}
}
/* 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:inline;width:calc(100% / 4);overflow:hidden;padding:10px;}
#right-bar .related-post-style-4 li{width:100%;padding:0}
.related-post-style-4 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:auto;max-height:200px;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:500;overflow:hidden;line-height:1.3em;font-size:16px !important;margin:0 auto 7px}
.related-post-style-4 a:hover.related-post-item-title{text-decoration:none}
.related-post-style-4 span{display:table-cell;line-height:1.2em;}
.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;font-size:14px;line-height:1.3em!important}
@media screen and (max-width:768px){
.related-post-style-4 li{width:calc(100% / 2);padding:0;}
}
@media screen and (max-width:480px){
.related-post-style-4 li{width:calc(100% / 1);padding:0;}
}
/* Related Post Style 3 */
.related-post-style-3{margin:0 auto}
.related-post-style-3 li{padding:0;list-style:none;margin:10px;display:block;width:calc((100% / 4) - 20px);box-shadow:0px 0px 8px 0px #dae5e8;border-radius:8px}
.related-post-style-3 li:first-child {margin-left:-10px}
.related-post-style-3 li:nth-of-type(5n){margin-left:-10px}
.related-post-style-3 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:auto;max-height:170px;padding:0;margin:0 auto 0;overflow:hidden;border-radius:8px 8px 0 0}
.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:500;overflow:hidden;line-height:1.3em;font-size:16px!important;padding:10px 10px 0}
.related-post-style-3 a:hover.related-post-item-title{text-decoration:none}
.related-post-style-3 span{display:table-cell;line-height:1.4em;font-size:14px;padding:10px}
#right-bar .related-post-style-3 li{width:calc((100% / 1) - 20px);margin-left:-10px}
@media screen and (max-width:768px){
.related-post-style-3 li{width:calc((100% / 1) - 20px);margin-left:-10px}
}
/* Related Post Style 2 */
.related-post-style-2{margin:0 auto!important;}
.related-post-style-2 li{list-style:none;margin:20px 0 20px -20px;padding:10px 0 0;display:block;width:100%;border-top:0 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:350px;height:auto;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:30px!important;margin:0 0 15px 0;font-weight:500;}
.related-post-style-2 a:hover.related-post-item-title{text-decoration:none}
.related-post-style-2 a.related-post-item-more{display:block;}
.related-post-style-2 .related-post-item-text{display:inline-block;text-align:left;width:calc(100% - 360px);float:right;padding-left:20px;font-size:22px;line-height:1.4em;}
#right-bar .related-post-style-2 .related-post-item-thumbnail{width:100%;}
#right-bar .related-post-style-2 .related-post-item-text{width:100%}
#right-bar .related-post-style-2 a.related-post-item-title{font-size:19px!important;}
#right-bar .related-post-style-2 .related-post-item-text{font-size:17px;line-height:1.3em;padding:10px 0;}
@media screen and (max-width:768px){
.related-post-style-2 .related-post-item-thumbnail{width:250px;}
.related-post-style-2 .related-post-item-text{width:calc(100% - 260px)}
.related-post-style-2 a.related-post-item-title{font-size:21px!important;}
.related-post-style-2 .related-post-item-text{font-size:17px;line-height:1.3em;padding-left:10px;}
.related-post-style-2 a.related-post-item-more{display:none;}
}
@media screen and (max-width:480px){
.related-post-style-2 .related-post-item-thumbnail{width:100%;}
.related-post-style-2 .related-post-item-text{width:100%}
.related-post-style-2 a.related-post-item-title{font-size:19px!important;}
.related-post-style-2 .related-post-item-text{font-size:17px;line-height:1.3em;padding:10px 0;}
}
/* 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:#f1f3f6;border-bottom:2px solid #fff;display:block;position:relative;margin:0 auto;padding:13px 10px 13px 50px;text-align:left;margin-left:-20px;width:100%;}
.related-post-style-1 li a{font-weight:500;line-height:1.3em;text-align:left;display:block;font-size:90%;}
.related-post-style-1 li a:hover{text-decoration:none}
.related-post-style-1 li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left: 0px;text-align: center;top: 0;z-index: 51;transition: all .4s;min-width:40px;font-size: 30px;background:rgba(0,160,255,.7);vertical-align:center;height:100%;font-weight: 700;text-align: center;padding:0;display:flex;flex-direction:column;justify-content:center;height:100%;}
</style> 
5. Lalu letakkan kode berikut ini di atas kode ]]></b:skin>
#layout #related-posts-widget:before, #layout .note2:before, #layout .note2:after{display: block;margin:5px;padding:0;box-sizing: border-box;text-align:left!important}
#layout #related-posts-widget:before{content: 'Angka untuk kode numPosts adalah "1 - terserah"';}
#layout .note2:before{content: 'Angka untuk widgetStyle adalah "1, 2, 3, 4, 5, 6"';}
#layout .note2:after{content: 'Angka untuk summaryLength adalah "0 - terserah".';}
#layout #related-posts-widget {overflow:hidden;}

6. Tambahkan JavaScript berikit ini di atas kode </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)+"&hellip;":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)+"&hellip;":"";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>

7. Simpan Tema

8. Lalu masuk ke tata letak, lalu tambahkan gadget HTML/JavaScript pada area Sidebar Post, isi dengan kode berikut ini, lalu simpan

<div class='related-post' id='related-post'/>

Gadget inilah yang akan muncul di blog dan bisa dipindah2 letaknya sesuai selera.

9. Untuk mengkonfigurasi tampilan, silakan buka Gadget Random Post Setting. Isinya 3 baris kode perintah

numPosts:6,
widgetStyle:6,
summaryLength:100,
numPosts diisi 1 sampai Terserah
widgetStyle diisi 1 sampai 6
summaryLength diisi 0 sampai terserah

Catatan:
Kode ini akan menjadi Related Post ketika berada di Postingan, tapi akan menjadi Random Post ketika berada di Home atau halaman lainnya.
Saya belum mengecek apakah fitur ini support dengan semua fitur blogspot landing page yang sudah ada, atau ada beberapa kode yang bentrok.

Sumber: https://www.bungfrangki.com/2018/08/cara-menampilkan-related-post-di-sidebar.html

Postingan Terkait

No comments:

Post a Comment

Formulir Kontak

Name

Email *

Message *