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 Recent Posts Widget Recent Posts dengan Gambar dan Ringkasan dalam Tooltip yang keren ;) kali ini contohnya seperti di sidebar kanan atas pada halaman single post di Warung Bebas ini. Widget ini untuk melengkapi Widget Related Posts Dengan Gambar dan Ringkasan dalam Tooltip. Untuk dipasang di blog yang dihost di blogger.com / blogspot.com, jadi untuk wordpress tidak cocok, data yang diambil tidak sama.

Yang jelas widget ini otomatis tanpa harus memasukkan tooltip secara manual, (*) gambar dan tooltip berupa ringkasan artikel akan muncul sendiri. Sebelum memasang pada blog kamu, bisa dicoba dulu tanpa harus pasang langsung di blog.

Langsung saja pada contoh tampilannya untuk diterapkan ke blog kamu:

Lihat Contoh Widget Diterapkan Pada Blog
Form design by WarungBebas.Com
Note: Jangan diakhiri tanda slash "/" di akhir URL
Penulisan yang benar: "http://www.warungbebas.com" "http://namablog.blogspot.com"
Penulisan yang salah: "http://www.warungbebas.com/" "http://namablog.blogspot.com/"

Tampilan diatas itu standar, baik warna dan lebarnya, jika dipasang di blog sendiri bisa diedit beberapa bagian. Untuk memasangnya ikuti petunjuk berikut ini:

  1. Pasang dulu script Tooltip. (Required)
  2. Kalau belum pasang script tooltip, maka tidak akan bekerja kode Widget Recent Posts ini, karena memang kelebihannya menggunakan tooltip.

  3. Setelah itu pastikan setting feed blog kamu dalam kondisi PENUH.
  4. Lihat dan edit di PENGATURAN » FEED SITUS, dari dashboard blogger.com kamu saat login. Lihat Gambar:

    feed setting blogger

  5. Kalau sudah tambahkan widget di elemen halaman
  6. Letaknya silahkan sesuaikan sendiri, kiranya hal ini mudah bagi kamu. Tambahkan widget kemudian isinya masukkan kode dibawah ini:

    <script type='text/javascript'>
    numposts = 5;
    showRandomImg = true;
    jmlsummary = 250;
    boxwidth = 300;
    cellspacing = 5;
    borderColor = "#fff";
    thumbwidth = 35;
    thumbheight = 35;
    jdlsz = "12px";
    acolor = "#000";
    text = "komentar";
    showPostDate = true;
    </script><script src='http://javascript-share.googlecode.com/files/wb_recentpoststhumb_tt.js'></script><a id='wb_recentposts_tt' href='http://www.warungbebas.com/2010/10/widget-recent-posts-dengan-gambar-dan.html'>Recent posts with thumbnail</a><script src='/feeds/posts/default?redirect=false&alt=json-in-script&orderby=published&callback=wb.$_showrecentposts&max-results=5'></script>

  7. Simpan, dan lihat sekarang keluar apa tidak widgetnya di blog Anda. Ingat tahapan diatas adalah menguji script bekerja atau tidak. Nanti diedit belakangan.

Sudah muncul widgetnya? Sekarang bagaimana cara melakukan modifikasi widgetnya. Bagian yang bisa dimodifikasi adalah kode berikut:

<script type='text/javascript'>
numposts=5;
showRandomImg=true;
jmlsummary=250;
boxwidth=300;
cellspacing=5;
borderColor="#fff";
thumbwidth=35;
thumbheight=35;
jdlsz="12px";
acolor="#000";
text="komentar";
showPostDate=true;
</script>

Ganti huruf warna merah dan warna biru diatas sesuai selera, penjelasannya berikut ini:

Kode Keterangan
numposts=5; Jumlah artikel recent post yang akan ditampilkan, lihat warna biru diatas, selalu samakan dengan setting ...&max-results=5'></script> agar sesuai.
showRandomImg=true; Mengaktifkan random image (gambar) jika dalam postingan tidak terdapat gambar sama sekali. (saran: true) pilihan true/false.
jmlsummary=250; Jumlah huruf yang akan ditampilkan dalam ringkasan tooltip.
boxwidth=300; Lebar widget, sesuaikan dengan sidebar atau lokasi dimana widget akan ditempatkan.
cellspacing=5; Jarak antar artikel dalam daftar yang ditampilkan.
borderColor="#fff"; Warna sekat pemisah antar bagian artikel di widget, saran: sesuaikan dengan background template, contoh memakai #fff adalah putih.
thumbwidth=35; Lebar gambar yang akan ditampilkan dalam ukuran pixel.
thumbheight=35; Tinggi gambar yang akan ditampilkan dalam ukuran pixel.
jdlsz="12px"; Ukuran huruf judul artikel di widget.
acolor="#000"; Warna link komentar dan warna acronym di tanggal publish
text="komentar"; Kata setelah jumlah komentar
showPostDate=true; Menampilkan tanggal publish atau tidak, (pilihan: true/false)

Selain pentunjuk diatas, kamu jangan edit lainnya, bisa gak keluar widgetnya.

Update: (03 Des 2011)

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

Informasi Update

OK, sampai sini semoga tidak ada kesulitan, jika ada trouble silahkan dilaporkan dikomentar agar bisa diperbaiki bug-nya, karena memang selama ini tooltip sering kress dengan karakter tertentu, so, kalau misal dalam postingan blog kamu mengandung karakter itu, bisa jadi ada masalah, dan perlu dimasukkan dalam daftar karakter yang perlu dihilangkan dalam script. Dari pengalaman ada beberapa blog dengan postingan banyak mengandung special character tidak bisa menggunakan widget ini. Terima kasih.

Komentar FacebookSembunyikanSelalu TampilkanJangan Pernah TampilkanStatus:
 

26 komentar terhadap "Widget Recent Posts Dengan Gambar dan Ringkasan dalam Tooltip"

  1. Siiiiippppp........... akhirnya mulai di share satu persatu... :D :D

    BalasHapus
  2. muncul recent postsnya aja tooltipnya kagak muncul boss, tulungan....

    BalasHapus
  3. waduh.. makasih nih petunjuk dan kunjungannya, ditunggu posting yang lainnya, webnya elegant keren abis...

    BalasHapus
  4. @untung: Kalau diganti scriptnya gak akan jalan Gan! karena kerjanya pake script php, so jangan ganti apapun termasuk source scriptnya (src) jangan dipindah

    BalasHapus
  5. emg lg bingung bozz uprek blogspot. tak coba dulu. tkz sharenya :)

    BalasHapus
  6. Busseeettt ni blog keren banget ya..salut2 buat webmasternya. eh salah tepatnya sih website ya...

    BalasHapus
  7. o,ou biasa aja. gak keren-keren amat. masih kerenan punya gue. karena emang biasa rumput tetangga itu lebih hijau. kalau diturutin nanti malah mau pindah kerumah tetangga. dan rumah sendiri terlantar.

    sory gan agak ngelantur :D

    BalasHapus
  8. Komentar ini telah dihapus oleh penulis.

    BalasHapus
  9. ane udah coba dan berhasil gan, makasih banyak :)

    BalasHapus
  10. gimana ya gan... biar yang tampil cuma judulnya aja, karena pada saat saya rubah showRandomImg=true; menjadi showRandomImg=false; kok kayanya belum ada perubahan... maksudnya biar hemat... trims

    BalasHapus
  11. nambah... maksudnya yang kaya di Popular Posts itu lho gan... trims :)] :) (hehehehehe... nanya terus sich orang ini...)

    BalasHapus
  12. sipp gan:-bd
    jadi banyak yang:)]ke aku seru

    BalasHapus
  13. wahhhh,,, mangstabbb infonya..
    Makasih mas

    BalasHapus
  14. gimana sih caranya bikin komentar kaya punya agan ini? kok bisa ada screnshotnya segala,n paling penasaran ama situs komentator visit here,keren gan share donk

    BalasHapus
  15. waduh ga bisa di pasang gan di blog ane, aneh template ane tiap di pasang java script di widget/gadget error melulu.

    BalasHapus
  16. informasi yang sangat bagus dan mudah dimengerti..thankss gan atas menariknya

    BalasHapus
  17. Bos,blog saya tidak bisa pakai feed apalagi penuh..(leber kali).bisa tidak pasang tootip?dan apa ada yang salah apakah untuk url pada kode HTML harus dirubah menjadi Url blog sendiri?trim's.

    BalasHapus
  18. @heri: :) Barusan blog kamu tak coba pake form diatas dan bisa :p, berarti pasti bisa dipasang asal petunjuk diatas diikuti. Coba saja sendiri pake form diatas bro.

    BalasHapus
  19. blog ane makek juga nih.. thanks mas.. :p

    BalasHapus
  20. asli, mantap banget ttool tipnya, ane pasang di blog ane dulu ya gan. :)

    BalasHapus
  21. warna defaultnya dari sananya putih.

    mau ganti background na warna transparan bisakah??

    BalasHapus
  22. makasih udah di share... :)
    ijin pasang di blog.

    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