Home » » Related Posts Keren..!

Related Posts Keren..!

Related Post Keren..!
Salah satu cara untuk merangsang minat pembaca adalah menyediakan related post dengan thumbnail. Sudah banyak style- style Relates post yang beredar baik yang biasa-biasa saja atau pun yang telah dimodif dengan efek-efek tertentu, tapi yang kali ini beda..!,

Related Post ini selain menggunakan thumbnail juga memakai style Marquee plus toolltip, widget ini juga dapat bergulir (berjalan) dan bergerak jauh sisi ke sisi, dan uniknya adalah judul posting akan muncul pada tooltip.


langkah-langkah Pembuatan:

1. Login ke akun blog sahabat, lalu pilih Rancangan.
2. Pilih Edit HTML, backup template anda terlebih dahulu, jaga-jaga kalau terjadi erorr
3. Centang pada Expand Widget Templates
4. Cari kode </head>, untuk memudahkan gunakan Ctrl F
5. Simpan Kode dibawah ini, diatas kode yang tadi, kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(http://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(http://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='http://4.bp.blogspot.com/-WQzi5hugHT8/TsEgEpZVEbI/AAAAAAAAAHs/Vq8oZLnRTVw/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>
6. Selanjutnya, cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

7. Simpan Kode dibawah ini, dibawah kode yang tadi, kode  <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
<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>Related Posts</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>
8. Simpan dan lihat hasilnya

Sahabat dapat menetapkan jumlah maksimum posting terkait sampai dengan 20 posting, hanya mengubah nomor berwarna merah (10) dan menyesuaikannya seperti yang  Sahabat  suka. 

Selamat mencoba.
http://www.intert3chmedia.net/
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Rohis Facebook

+ Create Comment + 85 Responses so far.

10 Februari 2012 15.44

pertamax, sob! mantep sharenya! disimpen dulu dah... ;)

10 Februari 2012 15.50

@eksaksilahkan sob... *smile

10 Februari 2012 16.50

aihhh bisa aja nih nemui widget keren kaya gini hihihihi,,saya gogling blm pernah nemuin cara yg ginian sob :) semoga bermanfaat buat blogger laennya amin

10 Februari 2012 16.52

Keduax... :)
Makasih atas infonya :)
Absen sore dan Izin nyimak

10 Februari 2012 17.34

keren sobat, pasti berat loadingnya ya gan jika dipasang

10 Februari 2012 17.57

@Green KLOPERERsy dptx jg kebetulan...,Aamiin..smg bermanfaat.. *smile

10 Februari 2012 17.58

@Belajar Komputercoba buka link demox.., lalu rasakan., insya Allah gk memberatkan... *smile

wow keren banget bro , jadi kepengen pasang nih :D

10 Februari 2012 20.12

masyaAllah ya, jalan related postnya
eh sukses komentarnya :)
barakallahu fiik

10 Februari 2012 20.28

@Nurmayanti Zainberkat kamu juga komenx bisa kayak gini.., syukran yaa...wafikbarakallahu...,

aq mau tanya lg ni.., gmn psang scroll bar pd komentar.., kemarin2 aq dah coba tp ndk bisa2...,

10 Februari 2012 23.21

Postingan keren. Terimakasih sharingnya .. :)

11 Februari 2012 01.08

@Mugniarsama2.... *smile

wih keren banget tuh relate postnya gan,, hohooh, manteb :)

11 Februari 2012 02.23

dlu aku pernah pasang related posts jg,tapi aku hapus. Soalny kramean d template lama, ={
tp nnti pasang lg ah..baca ya! #maksa#

@mb maya, iya mbak ..aku mau jg d ajarin yg scroll2..ap lah it namany,
=D

11 Februari 2012 05.34

wooow kerenn nih brow :D

11 Februari 2012 07.23

wah keren nih sobat, kalau relate post kayak di blog sobat ada gak???

11 Februari 2012 07.46

wah dpt ilmu baru nih mampir disini.. semoga bs mempraktekkan... makasih ya sharingnya.. ^_^

11 Februari 2012 08.23

Wah keren sob, sava dulu ah, nanti tak coba:)

11 Februari 2012 09.53

@Rama Arif Maulanasilahkan sobat..,thx atas kehadirax... *smile

11 Februari 2012 10.02

@-kasilahkan dicoba.., blogx mbk Maya skrg gk bs koment2.., coba masuk aja ke widget barux mbk maya, 'Contact me' namax..., *smile

11 Februari 2012 10.03

@randy oktaraniya sob.., *smile

11 Februari 2012 10.04

nambah berat gak sob ?

11 Februari 2012 10.05

@Asis Sugiantoyg aq pake ini beda.., tp insya Allah akan sy sharex jg ke teman2.... *smile

11 Februari 2012 10.07

@covalimawatisama2... *smile

11 Februari 2012 10.08

@Muro'i El-Barezyiya silahkan.. *smile

11 Februari 2012 11.04

@Si Galaucoba buka link demox.., lalu terasa berat gk...??, saya rasa gk berat ko' sob.. *smile

11 Februari 2012 12.02

0_0 related postnya bagus

11 Februari 2012 12.47

@Asep Saepurohmaniya.., klo tertarik silahkan dicoba :)

11 Februari 2012 13.47

keren kayanya sob :D

11 Februari 2012 18.37

bookmark dlu ah,sapa tau nanti perlu....nice post sob

11 Februari 2012 18.44

seperti pnya sobat itu ya? bagus juga. :)

11 Februari 2012 19.22

@Inuzuka Grendiya keren.. *smile

11 Februari 2012 19.22

@IT-Soft Centersilahkan..., *smile

11 Februari 2012 19.23

@Share Our KnowledgeBUKAN.., bukan seperti yg sy pake., coba lihat demox.., dan bandingkan. *smile

11 Februari 2012 22.18

hadir lagi sob, nice tutorial nih,,

12 Februari 2012 00.34

so damn cool. . .MasyaAllah :D

12 Februari 2012 09.02

wah, makasi tutorialnya, mau dicoba dulu ah

12 Februari 2012 14.22

@Bayu Rifaithx kawan.. *Smile

12 Februari 2012 14.22

@Kaito Kiddsyukra Akhi,, *smile

12 Februari 2012 14.24

@atdayyansilahkan kawan.., smg bermanfaat *smile

12 Februari 2012 14.54

keren related postnya, makasih ya tutornya,

12 Februari 2012 15.35

@Tutorial Blogsama2 sobat *smile

12 Februari 2012 16.18

walah keren sob. . . ikut nyimpen ah. . .

12 Februari 2012 16.42

@susu segarsilahkan *smile

12 Februari 2012 16.46

template sy berubah lagi sob, jd ga kembar lagi.. heheh.. btw, kok backgroundnya hijau?? mata saya sakit membacanya sob.. :)

13 Februari 2012 09.23

Salam, dah lama tidak bersilaturahim disini rindu rasanya....
akhirnya bisa mampir disini disela-sela kesibukan (sok sibuk,hehe)
tutorial yang kreatif sobat rohis,
nice share,
thanks....

13 Februari 2012 14.13

wah keren sekali sob relate post nya :)
Absen siang

13 Februari 2012 14.35

@zaenal blog awas jeruk makan jeruk hheh....

kreatif sy hny 0,1 %, yg kreatifx full (100%) i2 adalah yg membuat script diatas.., sy hny copas & posting...

smg urusanx lancar2 pak.., Aamiin....Barakallahu... *smile

13 Februari 2012 14.36

@Aris SugiantoAlhamdulillah sobat.., mau kembar atw tdk yg penting adalah Konten...., btw warna latarx emank sy suka ganti2.., mf atas ketidaknyamanan ini.., smg sukses selalu kawan.., Aamiin *smile

13 Februari 2012 14.37

@Black Angel SyndicateTerima kasih sobat..,nantikan kunjungan balik saya.., Insya Alllah.. *smile

13 Februari 2012 20.39

pasti tambah rame ya blognya kalo related postnya kayak gitu,,

13 Februari 2012 20.40

pasti keren tuh kalo relatednya bisa jalan,, tp takutnya mlah jd berat nnti,,

13 Februari 2012 20.48

@Kerja sambil bisniskemungkinan besar.. *smile

13 Februari 2012 20.51

@Kerja sambil bisnisyg aq tau relates post efek jalan ada dua.., satux lg pny OOM, tp pny OOM selain berat jg gk ada efek tooltipx., klo scrip diatas ringan & ada efek tolltipx..., silahkan buka link demox lalu rasakan *smile

14 Februari 2012 06.46

@Rohis Facebook untuk scroll bar threaded comment
letakkan kode :
< div style='overflow:auto; width:ancho; height:400px;' >

di bagian atas kode :
< div id='cm_block' >

lalu tutup dengan < /div > di atas kode :
< div class='cm_pagenavi' id='cm_page_copy'/ >

#semoga sukses
penulisan kodenya tanpa spasi ya~ *ini pakai spasi karena kotak komentar tidak menerima tag html div.

14 Februari 2012 09.21

@Nurmayanti Zainsyukran yaa., jazakillahu...

14 Februari 2012 09.41

mampir di sini untuk meramaikan suasana, selamat beraktivitas, semoga sukses selalu

14 Februari 2012 18.39

@Rohis Facebook sistem scroll tidak berlaku untuk arrow. Jadi cm_arrow pada komentar dihapus saja (itu tanda segitiga di ujung kiri atas tiap komentar).

caranya :
cari kode html cm_arrow lalu hapus semua

#semoga sukses

14 Februari 2012 19.33

@Nurmayanti ZainAlhamdulillah...bisa..!, syukran jazakillahu....

wahhh hebat ni, jarang2 ni ada akhwat jago gini..! *smile

15 Februari 2012 03.40

Wow... Mantaf ni triknya Om, sangat bermanfaat. ntar ane coba ah, thanks Om :)

15 Februari 2012 16.01

@Tutorial Blogterima kasih kawan.. *smile

15 Februari 2012 16.02

@Fahri Samudrasama2 OM.... *smile

16 Februari 2012 16.42

wah boleh juga ini di coba, kayakX keren nih

16 Februari 2012 21.47

Buat blogspot ya?

16 Februari 2012 22.43

@Leo Ari WIbowoiya sobat.., lihat aja demox gan *smile

16 Februari 2012 22.44

@system of blogiya gan keren.., coba liat aja demox *smile

21 Februari 2012 13.30

Askum, salam kenal. Wah ini pasti versi indonesia dari postingan di siteku www.intert3chmedia.net. Gpa2 kok sob, silahkan di sebar, tp sya minta kasih link ke sumber aslinya ya ke siteku. Thanks, I'll check back soon :D

21 Februari 2012 15.44

@D-Artchitextwa'alaykum warohmatullah..., mungkin anda terburu2 membaca postingan sy makax anda tdk melihat bhw sy telah mencantumkan alamat sumberx.... :)

insya Allah blog sy menjunjung tinggi Amanah ilmiyyah...

smg sukses selalu ya sob.., Aamiin...,

21 Februari 2012 16.29

@Rohis Facebook Alhmdulillah udah oke, tp lebih oke kalo dalam link sesuai nama sitenya. (Editnya kapan2 aja km sempat deh ) :D
Sukses juga bwt Rohis.

21 Februari 2012 16.48

@D-Artchitextsebenarx dr tadi aq dah berpikir gitu.., bhw mgkn sj yg Sobat maksud kan adalah yg demikian..., terima kasih & mohon maaf atas ketidaknyamanan.. *smile

22 Februari 2012 17.16

@Rohis Facebook Gpa2 sob, sya juga ikut senang klo widgetnya bnyak yang suka. Itu hadiah terbesar bagi blogger spt kita, mudah2an tambah2 barokah deh :D

13 Maret 2012 20.44

sipz ^_^

9 April 2012 00.56

Makasih tutorialnya Kang, sangat manfaat buat kami. Salam

23 Juni 2012 20.42

belum bisa direlated, sob..
gimana, caranyaa, yaa..
An udah mengikuti tutorialnya mpe tuntas..tapi post related tak bisa keluar :(

23 Juni 2012 21.05

@Rohis Facebooksebenarx sy gk tahu menahu soal scrip2-pan.., tp coba deh smg berhasil, pd point 7, kode tersebut letakkan dibawah kode < data:post.body/ >, < data:post.body/ > ini biasax ada didua tempatx letakkan pd < data:post.body/ > yg kedua...

smg berhasil ya.. *smile

23 Juni 2012 21.06

iya, sob..masih penasaran, nii

24 Juni 2012 06.44

Alhamdulillah...sukses, sob...
makasii atas pencerahannya, ya..
semoga ilmunya semakin bermanfaat ^__^

24 Juni 2012 09.44

@An Maharani BluepenAamiin..., afwan, blog utama kamu sebenarx yg mana..?? soalx yg tampil di profil kamu ada lebih dr 3, coba disetting agar yg tampil hny blog utama, soalx sy kebigungan mau komen diblog kamu yg mana..! *smile

15 September 2012 08.46

Keren keren sob..

12 Desember 2012 23.30

asslmkm..
kog g sukses ya di blog ghina..??

13 Desember 2012 00.18

@Ghina_Shafirah elbankulanicz dah malam jd insya Allah besok baru sy kasi solusix, smg aja bisa.... *smile

14 Desember 2012 09.01

@Ghina_Shafirah elbankulani

pd point 7, kode tersebut letakkan dibawah kode < data:post.body/ >, < data:post.body/ > ini biasax ada didua tempatx letakkan pd < data:post.body/ > yg kedua...

smg berhasil ya.. *smile

19 Maret 2013 01.10

info yang menarik sahabat

Posting Komentar

Terima Kasih banyak atas saran dan kritiknya.

Sama seperti peraturan yang dibuat oleh para blogger pada umumnya.., cuma disini saya harapkan agar para pengunjung untuk lebih fokus pada artikel kami yang bertemakan Agama (Islam), khususnya untuk saudara-saudari kami yang Muslim dan Muslimah.

0. Yang OOT silahkan masuk ke menu Buku Tamu/Blogwalking!
1. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
2. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
3. Harus Sopan
4. Admin tidak meladeni Debat kusir
5. Bercanda gk boleh ada unsur pornonya dan unsur Bohongnya
6. Silahkan melampirkan link Mati, gk boleh link hidup