Cara Membuat Related Posts Dark Edition Versi Kurazone - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Related Posts Dark Edition Versi Kurazone

Pilihan Editor :

Cara Membuat Related Posts Dark Edition Versi Kurazone
Penulis Bagus Surochman
0
Modus malam



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:&#39;Roboto Slab&#39;,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:&#39;Roboto Slab&#39;,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>
<div id='related-posts'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<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'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;&lt;i class=&#39;fa fa-bookmark&#39;&gt;&lt;/i&gt; Rekomendasi Bacaan&lt;/h4&gt;&quot;,
numPosts: 6,
summaryLength: 370,
titleLength: &quot;auto&quot;,
thumbnailSize: 300,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
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)+"&hellip;":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)+"&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><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

Sisanya silahkan kalian eksplor sendiri. Itulah informasi mengenai "Cara Membuat Related Posts Dark Edition Versi Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck!!
nanio
Cara Membuat Related Posts Dark Edition Versi Kurazone
Cara Membuat Related Posts Dark Edition Versi Kurazone Cara Membuat Related Posts Dark Edition Versi Kurazone Reviewed by Bagus Surochman on 9/01/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.