KURAZONE ~ Halo sahabat Kurazer, bagaimana kabar kalian? Masih sehat - sehat saja kan? Pada kesempatan kali ini kita akan belajar mengenai "Cara Membuat Related Posts Dark Edition Versi Kurazone", mengenai fungsi dari Related Posts tersebut mungkin sudah banyak tahu kegunaannya, jadi tidak perlu panjang lebar dalam menjelaskan apa itu Related Posts, langsung saja to the point cara bikinnya.
 |
| image : hasil jadi Related Posts Dark Edition |
Cara Membuat Related Posts Dark Edition Versi Kurazone
1. Buka Akun Blogger >> Pilih menu Tema >> Edit HTML
2. Cari kode </style> atau ]]></b:skin>
3. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode </style> atau ]]></b:skin>
#related-posts{width:100%}
.related-post-item-tooltip{height:54px;overflow:hidden;width:50%;float:left;text-overflow:ellipsis;padding:10px;}
#related-post .material-icons{font-size:200%;right:20px;color:#607D8B;top:-1px;position:absolute;}
#related-post{margin:10px;}
.related-post{margin:30px 0 0;position:relative;padding:0 0 10px;}
.lol h4 i,.related-post h4 i{margin-right:14px;}
.lol h4,.related-post h4{border-radius:4px;color:#fff;background:#1e1e20;font-size:100%;font-family:'Roboto Slab',Arial;text-transform:uppercase;text-align:left;font-weight:700;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;padding:15px 20px 12px;margin:0 0 20px;}
.related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word;}
.related-post-style-3 li a{font-family:'Roboto Slab',sans-serif;color:#666;font-weight:700!important;font-size:14px;line-height:1.4em;}
.related-post-style-3 li a:hover{color:#111;}
.related-post-style-3 .related-post-item{border:2px solid #000;background:#1e1e20;display:inline-block;float:left;border-radius:3px;box-shadow:0 2px 0 0 $(color.theme),0 0 2px 0 #000000;width:47%;margin-right:10px;left:15px;height:auto;padding:0;margin-bottom:20px!important;position:relative;overflow:hidden;}
.related-post-style-3 .related-post-item:focus{outline:none;border:none;}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:43%;height:100px;float:left;}
.related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out;}
.related-post-item:hover .related-post-item-tooltip a{opacity:1;}
.related-post-item-tooltip a{color:#fff!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:12px!important;position:relative;}
@media screen and (max-width:480px){
.related-post-style-3 .related-post-item{width:100%!important;}
.related-post-style-3 .related-post-item-thumbnail{height:100px!important;}
.related-post-style-3 .related-post-item{display:inline-block;float:left;border-radius:3px;box-shadow:0 2px 0 0 $(color.theme),0 0 2px 0 #000000;width:47%;margin-right:15px;left:0;height:auto;padding:0;margin-bottom:10px!important;position:relative;overflow:hidden;}}4. Copy kode HTML dibawah ini, lalu letakkan di tempat yang kalian inginkan.
Untuk menampilkan related posts dibawah postingan, biasanya diletakkan dibawah kode </article>
Untuk menampilkan related posts dibawah postingan, biasanya diletakkan dibawah kode </article>
<div id='related-posts'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<div class='related-post' id='related-post'/>
<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 = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4><i class='fa fa-bookmark'></i> Rekomendasi Bacaan</h4>",
numPosts: 6,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 300,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"https://kurazone.blogspot.co.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,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-title" href="'+v+'"'+b+'><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>
</b:loop>
</b:if>
</div>5. Simpan Template
Note :
1. Ubah teks "Rekomendasi Bacaan" apabila kalian ingin menggantinya
2. Tema dark ini bisa kalian ubah ke warna lain, seperti merah ataupun biru dengan cara mengubah kode warna pada CSS yang memiliki nilai #000000
Kode warna bisa dilihat disini >> Color Picker
3. Jumlah angka pada related posts silahkan kalian sesuaikan sendiri, edit bagian ini : numPosts: 6
3. Jumlah angka pada related posts silahkan kalian sesuaikan sendiri, edit bagian ini : numPosts: 6
Sisanya silahkan kalian eksplor sendiri. Itulah informasi mengenai "Cara Membuat Related Posts Dark Edition Versi Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck!!