Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Bola Hero Gawai

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Pagi ini saya share salah satu trik untuk mempercantik tampilan blog kita yaitu Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan. Setelah saya berhasil mengaplikasikannya pada blog saya ini, akhirnya saya berkesempatan untuk mengsharingnya untuk Anda semua. Tentunya bagi Anda yang belum tahu, bagi yang sudah tahu dan paham mohon koreksinya bila menjumpai hal yang kurang pas. Maklum saja saya belajar otodidak. Saya hanya senang dengan hal-hal yang baru, try and error sudah menjadi kebiasaan akhirnya. Dengan mencoba sesuatu hal yang baru, kita mendapat ilmu yang baru juga. Related posts ini akan bergerak ke kiri dan ke kanan dan akan berhenti ketika mouse di arahkan ke atasnya.

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula. 

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kemudian cari kode seperti di bawah ini

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

atau kalau enggak ada cari yang seperti di bawah ini

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

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.
<!-- Marquee Kompiajaib 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>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<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=12;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div>
</div>
</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 Kompiajaib Related Posts with Thumbnails Code End-->

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444 untuk warna background kotaknya.

Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.

Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

Demikian sharing Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti mengalami try and error.

UPDATE:
Bagi pengguna script related post dengan thumbnail bergeser di bawah postingan di atas, silahkan ganti kode http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js pada kode pertama dengan http://demowidget.googlecode.com/files/relatedpostwiththumbnails2.js karena beberapa waktu yang lalu akun Google Code saya yang lalu tidak dapat diakses. Harap menjadi maklum adanya... Dan untuk menjaga hal ini terjadi lagi, silahkan simpan kode javascript-nya di Google Code Anda sendiri.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

34 Comments Add Comment

bung buat tu menu drop down yg di atas cranya gmna bgi donk :D

Balas

Kalo udah ketemu kodenya nanti akan saya share sob...

Balas

lah kamu dlu pkek apaan?

Balas

Itu didapat dari templatenya gan...
Coba saja berkunjung ke pembuat templatenya http://creatingwebsite-maskolis.blogspot.com/
Silahkan bertanya di situ.

Balas

Keren jga yg buat tu tempalte

Balas

thanks bro.. berhasil...
tapi gimana cara ganti warna tulisan artikelnya.????.
diitunggu ya bro.. thx...

Balas

Pada kode pertama, cari color: #585858, ganti dengan kode warna yang dikehendaki.

Balas

berhasil bro... thanks ya,,, .. sukses terus.....

Balas

mantebh nih gan,,

Balas

bagus banget blognya ,, semanagt breww , follow back

Balas

gan kok gak ada gambarnya? bantu dong maklum newbie hehe

Balas

Coba ulangi lagi langkah-langkahnya dari awal, ganti tulisan yang berwarna merah saja.

Balas

kalau pakai theme dari maskolis,.....untuk ini "h1,h2,h3 nya disusun ulang apa nggak ya ?

Balas

Kalo saya enggak mas, ga tahu kalo yang lain...

Balas

Tips related post with thumbnail yang menawan, bisa bergerak eeyyy .... mantap

Balas

sob efek relatedn postnya nge-RANDOM gak?
soalnya dari kemarin-kemarin saya pake related post thumb, artikelnya yang itu-itu aja .... gak berubah berubah...

Balas

Tergantung dari banyaknya postingan per lebelnya sob. Tiap postingan beda-beda tergantung label yang dimasukan.

Balas
This comment has been removed by the author.

makasi gan, silakan lihat hasilnya di skillvid.blogspot.com (blog baru :))

Balas

Saya sudah coba melihat di blog baru agan...hasilnya bagus...namun ada sedikit masalah pada komentar blognya....saya kesulitan memberikan komentarnya....kode captchanya tidak terlihat...jadi saya ga bisa ksih komentar di blog agan...
Semoga sukses dengan blog barunya....

Balas

mas mw tanya ni, knapa d blog saya script ini gk bisa berjalan lg ya,,
sbelum ny bisa dn udh lama sy pakai ny,, kmudian baru2 ini trnyta gk tampil lg related postny,, knapa ya mas,, mohon bantuannya,,

Balas

Maaf mas Google Code saya dibanned...silahkan ganti kode javascript-nya dengan kode pada update di atas...

Balas

oke terimakasih mas,, sudah bisa kembali,,
maju terus buat blog KA,
jngn lupa berkunjung,,
salam sahabat,,

Balas

gan !!gimana cara buatnya related post kyk punya agan?..terimakasih

Balas

Saya ambil dari maskolis mas...
http://www.maskolis.com/2012/03/membuat-related-post-thumbnail-dan.html

Silahkan dipelajari di situ...

Balas

tutorial yang sangat berguna dan saya sangat menyukainya, sepeertinya perlu juga dicoba untuk dipasang diblog saya, tapi saya belum tahu apakah templatenya cocok atau gak yg jelas tutorial ini sangat bermanfaat.
ijin coba dulu sobat, terima kasih sudah berbagi

Balas

Nyimak saya Kang artikel Related posts yang keren ini makasih keren Kang :-bd

Balas

gk muncul di template default tapi makasih tutor nya

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×