Cara membuat related posts by label horizontal

Cara membuat related posts by label horizontal


TutorialMixs- sobat, dah lama aku ndak posting pada blogku ini, dan kali ini aku mo coba share bagaimana cara membuat / menambahkan widget related posts by tag/label dengan tampilan vertikal.
tampilannya ku rasa oke banget, jadi sangat di sayangkan kalu sobat tidak memakainya dalam setiap postingan sobat di akhir sobat membuat artikel.

di samping car menambahkannya juga tidaklah sulit alias mudah banget. jadi jika soat berkenan untuk memakai widget ini, silahkan sobat ikutin langkah berikut ini:

untuk demo silahkan klik  
Link Demo ini , untuk selanjutnya silahkan sobat masuk saja template, edit template sobat, dan cari kode </head>, masukkan kode di bawah ini di atas kode </head>

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='MDrelatedposts'>
<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=MD_relatedpostswithhumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.makingdifferent.com/2013/02/related-posts-widget-with-thumbnails-for-blogger.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://1.bp.blogspot.com/-EDKH6vjb7kQ/URJhBzkyUsI/AAAAAAAAIv4/gXSLZ8Atvcs/s1600/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

next cari code srcipt

<div class='post-footer-line post-footer-line-1'> 

atau jika tidak ada pada template sobat cari code berikut:

<p class='post-footer-line post-footer-line-1'>

Untuk kondisi di atas silahkan copykan kode di bawah ini berada pada bawahnya..

tetapi kalau code script di atas sobat cari ndak ada juga yah,, silahkan pakai logika sobat saja, karena setiap template mempunyai struktur yang berbeda-beda antara struktur yang satu dengan yang lainnya..
coba cari berdasarkan struktur template sobat, biasanya struktur setelah isi artikel di bawahnya terdapat widget share ataupun widget author...

silahkan copykan saja kode di bawah ini di atasnya yah...

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#MDrelatedposts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
</style>
<script type='text/javascript'>
var MD_defaultnoimage=&quot;http://4.bp.blogspot.com/-Y_YjpbbQLVg/URJOfQA-oUI/AAAAAAAAIs0/30bTiXoQymw/s1600/MD-No-Thumbnail.jpg&quot;;
var MD_maxresults=6;
var MD_relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://makingdifferent.github.com/blogger-widgets/MD-relatedpostswidget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
oke semoga bermanfaat...
untuk mengubah berapa artikel terkait yang akan di tampilkan, sobat tinggal setting saja

var MD_maxresults=6; <!-- silahkan ganti saja berapa yang inngin ditampilan-->


yab ku rasa cukup sekian aja tutorial ini, semogabisa menjadikan manfaat buat sobat





Sebenarnya artikel ini aku buat hanya untuk referensi, catatan/archieve aku pribadi terkait hal2 yang paling penting dalam pembuatan, penyusunan, memperbaiki, mempercantik web/blog serta cara/Panduan Hal lain. Jika artikel ini secara tidak langsung mempunyai manfaat buat anda, kurasa mungkin itu, secara kebetulan saja..

Share this

Related Posts

Previous
Next Post »

1 komentar:

Write komentar
19 November 2016 07.59 delete

Saran buat Blogger Newbie :

di dalam widget disusupi link aktif di didalam kode java scriptnya XXXXX.js, mungkin ada baiknya tidak memasang widget ini... karena akan selamanya dianggap spam oleh Google, dan merugikan blog kita sendiri

semoga bermanfaat

Reply
avatar
Related Posts Plugin for WordPress, Blogger...