Memodifikasi Related Post - Hallo sahabat Zona Tiga, Pada Artikel yang anda baca kali ini dengan judul Memodifikasi Related Post, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Memodifikasi Related Post

Related posts ini sebenarnya saya dapat dari Maskolis juga, namun pada tutorialnya tersebut penempatannya disatukan dengan widget subscribe, sehingga bagi yang kurang teliti mungkin akan sedikit bingung untuk mengambil kode-kode related posts-nya.

Nah sekarang saya sharing widget Related Posts ini dengan sedikit memodifikasinya sehingga tampilannya akan seperti 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 kode di bawah ini dan letakan DI ATAS kode ]]></b:skin>

#related{width:100%;border-bottom:0px solid #ccc;margin:.1em 0 .5em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhPbTWhbS9FXWCJqDPFjxAmt_P4ikffZVNXogXmKrsJHBKwPgF0Dj0ZzQJ4dXMtMGJhp-hMI4HIoWFB-lKiROx33b2QTjP0NmdPlCaKw64t4rdYmXDXJ833_LudYjc1H-muQct5P5XKw/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:&quot;.&quot;;display:block;height:0;clear:both;visibility:hidden}

.clearfix{display:inline-block}

2. Copy kode di bawah ini di bawah postingan atau di bawah kode <data:post.body/>, jika 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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmUJ45KVEz1M4Mkv1QCTwlmL3WX4pCacKmnBv0B600DABlToiHxCAQTGoqrEsXIBcZNzck20uDaj7dzRN17SsaLvynbuIVvXRD2OdtPj1ttbTABtLgJAr2OVXPInMhkM9CNQZpP8Re-U/s1600/no+image.jpg&quot;;

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 bisa Anda ganti dengan kalimat lainnya yang Anda kehendaki. Angka 14 menunjukan jumlah thumbnail yang tampil.

Terimakasih, semoga bermanfaat.

Demikianlah Artikel Memodifikasi Related Post

Sekianlah artikel Memodifikasi Related Post kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Judul : Memodifikasi Related Post
link : Memodifikasi Related Post

Bagikan ke :