CARA MEMBUAT RELATED POST WITH THUMBNAIL STATIS-GERAK

Blog SHARE AJA kali ini akan sedikit mengulas tentang membuat related post (posting terkait), related post versi SHARE AJA ini dapat bersifat statis dan dapat pula bersifat dinamis atau bergerak. Related post adalah merupakan sebuah fasilitas blog yang memudahkan visitor atau pengunjung menjelajahi artikel-artikel  terkait dengan artikel yang sedang dibacanya. Di lain pihak, dengan memasang fasilitas related post ini tentu akan mendongkrak pageviews blog yang pada akhirnya dapat mempengaruhi Google rank maupun Alexa rank (bener gak sih ?). 

Beginilah cara membuatnya :

• Login ke Blog kamu.
• Pilih Rancangan > EDIT HTML.
• Jangan Lupa Centang Expand Widget Template.
• Cari kode </head> setelah ketemu copy kode di bawah ini tepat di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, Times New Roman , Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0iQ7aZW_nOaGyd_pNxOSZIXmfXdHQf6UIr6PJfds2q32SI1TBhE4GVj5ZGEKt2ImloC2GHBhOtKAaBYdxiDSqdGj5YK55bxeNPqZHdlxIJHwam78pGf1CNRSRA9gJm6k6p4hyphenhyphenCNs1BX4/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Selanjutnya Cari kode <data:post.body/> setelah ketemu copy kode di bawah ini tepat di bawah kode <data:post.body/> tersebut :

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=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>
<!-- Related Posts with Thumbnails Code End-->

Simpan dan lihat hasilnya.

Keterangan :
var maxresults = 5 adalah jumlah artikel yang ditampilkan.
var relatedpoststitle="Related Posts";  kamu bisa ganti kata Related Posts dengan Kata lainnya.

Sekian penjelasan dari saya semoga sobat bisa memahaminya, dan selamat mencoba.

Ide : http://blazerracing.blogspot.com/2012/03/cara-membuat-related-post-dengan.html

Jika anda menginginkan related post tersebut menjadi bergerak, maka gantilah kode yang kedua (yang diletakkan di bawah <data:post.body/>) dengan kode berikut ini :

<!-- Marquee Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>

<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>

<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Related Posts with Thumbnails Code End-->

Keterangan untuk kode yang berwarna merah adalah :

"Related Posts" dapat anda ganti sesuai dengan keinginan anda, semacam menjadi "Artikel Terkait" atau "You may like other article : " atau kata-kata lain.

"<marquee align=" ...........>" sampai dengan "</marquee>" adalah merupakan script efek berjalan.

"var maxresults=10" adalah merupakan jumlah artikel terkait yang akan ditampilkan.

Demikianlah cara membuat related post with thumbnail bergerak ini, semoga bermanfaat.