Memodifikasi Related Posts Maskolis

Ada beberapa temen Kompi Ajaib yang menanyakan cara menciptakan related posts Kompi Ajaib yang berada di bawah postingan. Related posts ini sebetulnya aku sanggup dari Maskolis juga, namun pada tutorialnya tersebut penempatannya disatukan dengan widget subscribe, sehingga bagi yang kurang teliti mungkin akan sedikit galau untuk mengambil kode-kode related posts-nya.

Nah kini aku sharing widget Related Posts ini dengan sedikit memodifikasinya sehingga tampilannya akan menyerupai gambar di bawah ini.

Hanya merubah lebar, size dan jumlah thumbnail, dan gambar shadow di bawah widget. Nah bagi yang tertarik silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan copy instruksi di bawah ini dan letakan DI ATAS instruksi ]]></b:skin>

 
 #related{width:100%;border-bottom:0px solid #ccc;margin:.1em 0 .5em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpFee_Ht554sOlVI7dE_YUa8lsR5QJeok5dCqZRIAbt3Q-kVzy0xkkPG0xujZLLv8XiuFIanDBv2LiqT_JzDeAFq7L_vtxuiIM-JdO2aLbNNFdVww5Ys8kWr80X_ZHfLRQudlIUtJzS-s/s1600/frame_shadow+copy.png) no-repeat bottom center;padding:0 0 35px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{width:650px;margin:5px 0 0;padding:10px 15px 0 0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:1px solid #aaa;display:block;height:77px;position:relative;width:77px;color:#000;text-decoration:none;text-shadow:0 1px 0 #ccc}
ul#related-posts li .overlay{height:72px;line-height:16px;position:absolute;width:72px;z-index:10;padding:5px 0 0 5px}
ul#related-posts li a:hover .overlay{background:#fff;display:block!important;opacity:0.9}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
 

2. Copy instruksi di bawah ini di bawah postingan atau di bawah instruksi <data:post.body/>, jikalau ada lebih dari satu, pilih yang terakhir.

 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<h2 style='display:block;font: 18px Oswald;'>YOU MIGHT ALSO LIKE:</h2>
<script type='text/javascript'>
var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcbAGkm35xem5RQXJfVz6yPfgSvHNP0hNyIe0S85BHD2kvuq5WGWnaAK6r9L-y5UuegDD4m4vRhk700nID0hqNaQRmJM3gc5uj5_0muHOsZPkGiYl9z3di49AMkpoILWBZPz5c_MNHP8M/s1600/no+image.jpg';
var maxresults=14;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=14&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>                
</div>
</div>
</b:if>
 

Tulisan yang berwarna merah sanggup Anda ganti dengan kalimat lainnya yang Anda kehendaki. Angka 14 menandakan jumlah thumbnail yang tampil.

Demikian saja klarifikasi memodifikasi related posts Maskolis ini biar sanggup dimengerti dan bermanfaat.

Sumber https://www.kompiajaib.com/

Share this post