Dua Kalkulator Kehamilan Puisi Lucu & Romantis Kalimat/Ungkapan Indah Ucapan Selamat Malam Romantis Kata-2 GalauKoleksi Kata-Kata Gombal Mukio
Download Ringtone Lucu Gokil
Curhat Cewek Tentang Cowok
Punya Pacar vs LDR vs Jomblo
Alat Membuat Tulisan Gaul Alay
Alat Membuat Tulisan Terbalik
Daftar Semua Kategori:X
X
Ramalan Zodiak Hari Ini Kata Mutiara Cinta Kompilasi Lagu Nostalgia Cara Download Video Youtube Status Facebook LucuKumpulan SMS Cinta Romantis

Widget Related Posts Cara membuat atau memasang widget Related Posts with thumbnail dilengkapi ringkasan artikel otomatis plus gambar dalam tooltip yang keren. Wah susah sekali menjelaskannya, :( maksudnya seperti contoh yang ada dibawah nanti. Widget ini khusus untuk blog yang menggunakan blogger.com / blogspot.com baik yang custom domain maupun tidak. Pemasangannya mudah dan kodenya gak ribet. :D

Tips mempercantik blog kali ini adalah lanjutan dari Cara Pasang Tooltip Keren di Blog Paling Mudah, dan insyaAllah akan terus dilanjutkan pada widget lainnya. Kenapa disebut kelanjutan? karena kalau hanya memasang fasilitas tooltip saja, kita harus manual agar ada bagian yang memiliki tooltip, dan widget yang sekarang ini adalah otomatis. Dan widget ini tentu saja tergantung pada pemasangan tooltip, kalau tidak memasang kode tooltip, ya tidak keluar nanti kelebihannya.

Terinspirasi oleh kemudahan linkwithin.com akhirnya membuat sebuah script yang mudah untuk dipasang, dan memiliki kunggulan dibanding widget related post with thumbnail-nya linkwithin. OK deh sudah dulu nggedabrush-nya, :)) langsung saja lihat contohnya dibawah ini:

Widget tidak dipasang dihalaman ini, untuk melihatnya silahkan buka CONTOH TAMPILAN WIDGET

Sudah lihat? Mau pasang? OK, ikuti saja caranya dibawah ini:

Pasang dulu Kode Induk Tooltip, disini caranya, mudah juga kok :). Cukup induk kodenya saja, kode-kode diatasnya itu pemasangan manualnya saja.

Kalau kode tooltip sudah dipasang, pastikan bahwa setting feed blog Anda diatur ke PENUH. Perhatikan gambar berikut ini:

feed setting blogger

Kalau belum diset penuh, atur di PENGATURAN » FEED SITUS, di dashboard blogger.com.

Sudah? Sekarang buka edit HTML blog Anda, lalu centang Expand Template Widget. Temukan (Ctrl+F) kode berikut:

<data:post.body/>

Kadang kode itu muncul dua kali karena Anda pernah melakukan edit, nah pasang saja disalah satunya, kalau nanti gak muncul widgetnya coba pindah ketempat satunya lagi :)) malas ngasih solusi, karena bisa berlainan tiap template. :)

Sudah ketemu kode diatas? kalau sudah pasang saja kode dibawah ini dibawahnya.

<!-- Related Posts with Thumbnails Tooltip s:-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='wb-related-posts-gbr'><a id='wb_relatedposts_tt' href='http://www.warungbebas.com/2010/10/widget-related-posts-dengan-gambar-dan.html'>Related posts with thumbnail</a></div><script src='http://javascript-share.googlecode.com/files/wb_relatedthumbs_tt.js'></script>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults = 5;
var jmlringkasan = 200;
var setwarna = &quot;#dde&quot;;
var setwarnahuruf = &quot;#333&quot;;
var JudulWidget = &quot;You might also like:&quot;;
</script>
<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=wb.$_wbrelpostgbr&amp;max-results=5&quot;'/>
</b:loop>
</b:if>
<!-- Related Posts with Thumbnails Tooltip e:-->

Pasang dulu apa adanya, salah dikit aja dalam edit gak akan keluar widgetnya!. Kalau sudah berhasil keluar, silahkan diedit kode yang berwarna diatas. Penjelasannya berikut ini:

Kode Pengaturan Untuk keterangan
var maxresults=5; Batas maksimal yang dikeluarkan. Sesuaikan dengan lebar template Anda Jika mengubah angka 5 ini, ubah juga kode dibawahnya yang berwarna sama. yaitu kode: ... &amp;max-results=5&quot; ...
var jmlringkasan=200; Jumlah huruf yang akan ditampilkan dalam ringkasan di tooltip -
var setwarna=&quot;#dde&quot;; Warna dari garis pemisah, garis tepi gambar dan warna saat onmouseOver -
var setwarnahuruf=&quot;#333&quot;; Warna Huruf dibawah gambar, atau judul artikelnya. -
var JudulWidget=&quot;You might also like:&quot;; Judul widgetnya. -

Yang diganti hanya karakter yang diberi warna lain diatas itu ya.. yang lain jangan. Kalau sudah, silahkan sekarang disimpan template Anda. Dan lihat hasilnya.

Oya kode <data:post.body/> diatas itu sering diapit tag P seperti dibawah ini:

<p><data:post.body/></p>

Update: (03 Des 2011)

Script ini sudah diupdate, dan sudah sesuai dengan browser terbaru, setelah sebelumnya trouble.

Informasi Update

Kalau seperti diatas, maka letakkan dibawahnya, setelah penutup </p>. Halah... \m/ sudah ngerti kan? ini hanya pemasangan awal, nanti bisa kamu pasang dimana terserah, pindahkan saja sekaligus experiment. Sesuaikan saja letaknya, asal dibackup template XML-nya kan gak masalah.

Cukuplah petunjuknya, kalau ada trouble silahkan bilang dikomentar untuk dilakukan perbaikan. Masukannya ditunggu, dan sampai jumpa di belajar template lain kali lagi... ;) \m/ Masih kesulitan? minum ~o) dulu aja ...

Komentar FacebookSembunyikanSelalu TampilkanJangan Pernah TampilkanStatus:
 

24 komentar terhadap "Widget Related Posts Dengan Gambar dan Ringkasan dalam Tooltip Keren"

  1. Tulungin Juragan, Kok punya koe cuma posting yang berkaitan saja yang ada tooltipnya, pegimane biar semua link ade tooltipnya bos, please..

    BalasHapus
  2. @untung: sebenarnya sudah memenuhi syarat untuk semua link ada tooltipnya, namun tiap theme beda, makanya cuma khusus diembed ke widget, kalau nanti ada jalan keluar akan saya share deh, cuma gak janji...

    BalasHapus
  3. gan, ane kalo yang related posting pake thumbnails kayak punya ente berhasil gan ane bisa coba agan cekidot ke Situ gan itu bukti kalo ane berhasil gan tapi kenapa kalo yang di sini ga berhasil ya gan? liat deh di hasil postingan ane itu kok munculnya kayak gitu ya gan?

    BalasHapus
  4. Gan, ane mau nanya. Gmn caranya menampilkan embedded comment form sekaligus link ke classic formnya? Soalnya ene kagak bisa komen kalo pake embedded comment form.

    BalasHapus
  5. @Arya Bagus: Link anchor standarnya seperti dibawah ini:

    <a expr:href='&quot; http://www.blogger.com/comment.g?blogID=5383356725717802850&amp;amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=350,height=550&quot;); return false;' rel='nofollow'>Form Komentar Blogger Lama</a>

    Letakkan saja disekitar kotak komentar... trus dari kode diatas:

    blogID=5383356725717802850

    Ganti dengan ID blog kamu.

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  8. Gan kok ga berfungsi ya Thumbnails Tooltip-nya....??
    Padahal semua petunjuk telah dilakukan benar???
    Tanx...sukses ya

    BalasHapus
  9. @Anto: Jika semua sudah benar, coba cek apakah posting Anda memiliki kategori/lebel, kalau tidak berlabel, jangan harap akan keluar, karena related topiknya dihubungkan oleh label sejenis...

    BalasHapus
  10. Mas blognya kok diblokir kemkominfo? Yah jd gak bs baca deh...

    Ini saya posting komentar lewat email. Kebetulan sebelumnya sdh langganan komentar lewat email..

    BalasHapus
  11. @Arya Bagus: :-o masa sih, ini kok masih bisa yak komentar, pakai koneksi smart.. waduh ngawur tuh kemkominfo

    BalasHapus
  12. Saya pake koneksi XL.


    Mohon maaf sesuai peraturan perundang-undangan URL tujuan anda tidak dapat diakses..

    gtu katanya...

    BalasHapus
  13. mantap Gan,tapi yang saya mau script memasang widget Related Posts with thumbnail, tanpa tooltip, caranya Gan ?

    BalasHapus
  14. gimana caranya yach...?? susah
    http://mastorsepang.blogspot.com

    BalasHapus
  15. tanya mas. kalau buat related post seperti warungbebas.com gimana ya?

    BalasHapus
    Balasan
    1. Tidak ada waktu mau buat script share-nya bro...

      Mungkin bisa cari di tutorial-tutorial para master ngeblog, atau cari di google dengan keyword mengandung kata ajax.

      Hapus
    2. Makasih mas.

      oh iya mas. saya pakai tutorial ini dan nemuin "bug" nya. kalau title artikel mengandung tanda kutip("") jadinya berantakan. terlihat diartikel yang berhubungan dengan artikel yang mengandung tanda kutip. Untuk solusinya nunggu update mas nya saja :)

      Hapus
    3. Anda benar sekali, di posting tooltip telah saya singgung karakter musuh dari tooltip ini yaitu tanda petik (") dan tanda petik 1 (').

      Sebenarnya ini bukan bug, sebab kalau difilter juga karakter itu, maka yang kacau adalah otomatisasi pada gambar dalam apitan link, kan dalam tag img ada tanda petik? misal untuk src-nya?

      Sebenarnya ada cara mengatasinya, seperti misalnya di blog ini, 99% tidak bermasalah, karena filternya diletakkan diluar core function tooltip, jadi saat fungsi tooltip dipanggil, karakter yang diperintahkan jadi tooltip sudah bersih dari tanda petik diatas. Cuma susah kan ngejelasinnya?

      Untuk amannya sih feed set ke until break, jangan full, selain aman dari copas via feed, juga ringan karena datanya dikit. Lalu pada posting pengantar (awal) jangan pake karakter tanda petik. Lagian tanda petik untuk artikel sebenarnya bukan " melainkan bisa pake:

      “Kata&rdquo

      Kalo pake WP sih ini sudah dicontvert otomatis. Atau posting pake WLW untuk blogspot.

      Hapus
    4. "filternya diletakkan diluar core function tooltip" saya bisa menerka-nerka mas dan akan saya coba terapkan. Terima kasih.

      Hapus
  16. mending pake yang ini :D

    thanks berat kokoh...

    mantapp.

    BalasHapus
  17. saya mau kostum lebar dan tinggi gambarnya gimana yah?

    tulung penceraha :D

    BalasHapus
  18. manteb banget nih tutornya,, berhasil dipasang di blog saya mas.. :D keren jadinya.. :D

    BalasHapus
  19. min ,,,
    kalau misal mau biki related post kayak admin gmna ?
    kasih donk tutor ny ...

    BalasHapus

Links
About | Contact Us | Info Iklan | Privacy Statement | Disclaimer | Link to Us | Help | Whois | Ping  Sitemap
Copyright © 2009  Warung Bebas. Hosted on Blogger.Com Top
Warung Bebas