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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9B-5y5GNJNVkoT87iQ1dhKEuV3hmGJ7YIUJxqyV5aExHjZc5GcweACNP6W9JtPUwxhBiZbAxAQ6EM4bb7SI2hp4w-NFtAAmss8_65fEB9lMctU4W913oSzk3jhDvbl9WnVq5Ioy3qGc6q/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj72iEaSoDp7MtdpXcn7l8vogt9xNW3_794jMl0IkOC4si5ZhmR54QJgyOqjBE25px1uAuXgoBucH1rdZeS8m5cgEktomZeJQbMpYt7Fs0Eg0UqimVS6hu1_NnDvt7glt372wdrF8vRHByw/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

Share this

Related Posts