RELATED POST KEREN ARLINA (REDESIGNED)

Tidak semua tampilan related post yang ingin kita pasang kadang memenuhi harapan. Tidak ada yang sempurna. Seorang teman blogger setelah saya sarankan memasang related post ke dalam template blogger bawaan yang telah dimodifikasi dari blog Arlina Desizn malah meminta begini:

"Gan, saya pasang related post Mbak Arlina, lumayan bagus, bisa gak ya warna latar di robah, tampilan judul dipindah ke tengah atau Gayanya sedikit dipermak gitu"

Related post ini saya dapatkan dari blognya Arlina, setelah utak atik putar otak tentu saja seperti biasa saya lakukan modifikasi agar tampilannya lebih dinamis, segar dan menarik, seperti biasa untuk membuatnya harus masuk terlebih dahulu ke pengaturan blog, pilih tema lalu pilih opsi editHTML:

Langkah pertama: Cari kode ]]></b:skin> letakan kode CSS dibawah ini diatasnya:

#related_posts{margin-top:20px} #related_posts h4{color:#fff;background:#3498db;padding:10px;margin:0 0 5px;font-size:110%;} #related_img{margin:0;padding:0;} #related_img:hover{background:0} #related_img ul{list-style-type:none;margin:0;padding:0} #related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#2672a0;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} #related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;} #related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#fff}

Perhatikan kode yang saya sorot warna kuning pada kode CSS diatas, itu adalah kode warna font #fff; =PUTIH, sedangkan #3498db;adalah kode warna latar yang berarti =BIRU anda bisa merobah dengan kode warna hex css yang banyak di posting di internet. Saya tidak merobahnya karena saya suka warna biru.

Langkah kedua: Tambahkan kode CSS berikut tepat di bawahnya kode CSS di atas (ini adalah kode modifikasi saya sendiri):

.gradient-icon {
background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: initial;
}

Langkah ketiga: Letakan kode dibawah ini diatas kode </head>

<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4WSGpLArnPuW4T8EDt-YT78XzULowWf3rGgQW5zhwfvlFFx5BliQi-vOABpVZ4NRX65P0JKixtFBA0Aa1YEY30qnH9A_hvEo-H1HnmJ6CpNcTekgd503c3lAHBaNcdPJueY-WqBmLdbR1/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah keempat: Disini terlihat perbedaannya setelah saya lakukan perombakannya, yakni:

1. Ada lambang icon dari fa fa awsome dengan efek warna gradasi
2. Merobah posisi judul ke tengah

Cari kode <data:post.body/> ada beberapa kode serupa di dalam tema blogger, pilih yang ke-2 atau yang ke-3: letakan kode dibawah ini tepat dibawah kode yang saya sebutkan diatas:

<div id='related_posts'> <h4><center><i class="fa fa-book gradient-icon" aria-hidden="true">Artikel Terkait</i></center></h4> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div>

SAVE tema. Tampilan related postnya pada blog editblogtema sekarang (sebelum nanti saya robah lagi he he he)