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:
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 == "item"'>
<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="<data:post.url/>";
var maxresults = 5;
var jmlringkasan = 200;
var setwarna = "#dde";
var setwarnahuruf = "#333";
var JudulWidget = "You might also like:";
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=wb.$_wbrelpostgbr&max-results=5"'/>
</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: ... &max-results=5" ... |
var jmlringkasan=200; |
Jumlah huruf yang akan ditampilkan dalam ringkasan di tooltip | - |
var setwarna="#dde"; |
Warna dari garis pemisah, garis tepi gambar dan warna saat onmouseOver | - |
var setwarnahuruf="#333"; |
Warna Huruf dibawah gambar, atau judul artikelnya. | - |
var JudulWidget="You might also like:"; |
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.
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 ...
Artikel dengan judul "Widget Related Posts Dengan Gambar dan Ringkasan dalam Tooltip Keren" ini diposkan oleh Warung Bebas dalam kategori Belajar Ngeblog, Internet, Tips/Trik, Widget Blog » saat ini ada 24 komentar, semoga bisa memberi inspirasi atau sekedar hiburan. [Edit Entri]
| Komentar FacebookSembunyikan | Selalu TampilkanJangan Pernah Tampilkan | Status: |
Widget-Widget Blog Favorite » selengkapnya- Posting Video via Keyword (Best Widget) 5
- Aplikasi Bomb Like Facebook Script Lengkap 5
- Video relevan disemua posting otomatis 4
- Sitemap Blogspot Seperti Wordpress Plugin 4
- TV Streaming Online Indonesia Multi Channel 3
- Radio Online Multi Channel Seluruh Indonesia 3
- Links Converter Script adf.ly encode ($$$) 3
- Otomatisasi Tooltip (Link, Gambar, Akronim) 2
- Related Posts Gambar dan Ringkasan Tooltip 2
- Recent Posts Gambar dan Ringkasan Tooltip 1
| Yang online | : | |
| Sitemeter | : | |
| Alexa Rangking | : |
Tulungin Juragan, Kok punya koe cuma posting yang berkaitan saja yang ada tooltipnya, pegimane biar semua link ade tooltipnya bos, please..
BalasHapus@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...
BalasHapusgan, 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?
BalasHapusGan, 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@Arya Bagus: Link anchor standarnya seperti dibawah ini:
BalasHapus<a expr:href='" http://www.blogger.com/comment.g?blogID=5383356725717802850&amp;postID=" + data:post.id + "&isPopup=true"' onclick='javascript:window.open(this.href,"bloggerPopup","toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=350,height=550"); 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.
malah risih pake tooltip :(
BalasHapusKomentar ini telah dihapus oleh penulis.
BalasHapusKomentar ini telah dihapus oleh penulis.
BalasHapusGan kok ga berfungsi ya Thumbnails Tooltip-nya....??
BalasHapusPadahal semua petunjuk telah dilakukan benar???
Tanx...sukses ya
@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...
BalasHapusMas blognya kok diblokir kemkominfo? Yah jd gak bs baca deh...
BalasHapusIni saya posting komentar lewat email. Kebetulan sebelumnya sdh langganan komentar lewat email..
@Arya Bagus: :-o masa sih, ini kok masih bisa yak komentar, pakai koneksi smart.. waduh ngawur tuh kemkominfo
BalasHapusSaya pake koneksi XL.
BalasHapusMohon maaf sesuai peraturan perundang-undangan URL tujuan anda tidak dapat diakses..
gtu katanya...
mantap Gan,tapi yang saya mau script memasang widget Related Posts with thumbnail, tanpa tooltip, caranya Gan ?
BalasHapusgimana caranya yach...?? susah
BalasHapushttp://mastorsepang.blogspot.com
tanya mas. kalau buat related post seperti warungbebas.com gimana ya?
BalasHapusTidak ada waktu mau buat script share-nya bro...
HapusMungkin bisa cari di tutorial-tutorial para master ngeblog, atau cari di google dengan keyword mengandung kata ajax.
Makasih mas.
Hapusoh 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 :)
Anda benar sekali, di posting tooltip telah saya singgung karakter musuh dari tooltip ini yaitu tanda petik (") dan tanda petik 1 (').
HapusSebenarnya 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.
"filternya diletakkan diluar core function tooltip" saya bisa menerka-nerka mas dan akan saya coba terapkan. Terima kasih.
Hapusmending pake yang ini :D
BalasHapusthanks berat kokoh...
mantapp.
saya mau kostum lebar dan tinggi gambarnya gimana yah?
BalasHapustulung penceraha :D
manteb banget nih tutornya,, berhasil dipasang di blog saya mas.. :D keren jadinya.. :D
BalasHapusmin ,,,
BalasHapuskalau misal mau biki related post kayak admin gmna ?
kasih donk tutor ny ...