Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip

Recent Post Widget with Mini Thumbnail and Tooltip

Widget recent post dengan gambar mini mungkin sudah biasa Anda temukan. Tapi mungkin Anda mau mencoba yang satu ini. Widget recent post dengan thumbnail dan tooltip:

Lihat Demo

Untuk membuatnya, pertama-tama masuk ke halaman tata letak dengan mengeklik menu Tata Letak:

Tata letak Blogger
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><style scoped="scoped">
#mini-gallery {
  width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0 auto;
  font:normal normal 11px/normal Verdana,Arial,Sans-Serif;
  color:#666;
  padding:8px;
  background-color:#222;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal normal 14px/normal Impact,"Arial Narrow",Arial,Sans-Serif;
  color:#999;
  text-shadow:0 1px 0 black;
  text-transform:uppercase;
  margin:2px;
  padding:7px 14px;
  background-color:#3c3c3c;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0;
  background:white url('data:image/gif;base64,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') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  display:none;
}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #3399ff;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,.7);
  box-shadow:0 0 3px rgba(0,0,0,.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0 0 5px;
  color:#2473A8;
}

#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script>
var widgetTitle = "Artikel Terbaru", // Tentukan judul widget
    numPosts = 20, // Tentukan jumlah thumbnail/posting
    numChars = 300, // Tentukan jumlah karakter pada deskripsi tooltip
    tooltipFadeSpeed = 200, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogUrl = "http://nama_blog.blogspot.com"; // Alamat blogmu
</script>
<script src="//cdn.rawgit.com/tovic/dte-project/123eba4c603413fa3e6a8446da21fcc545df0ee0/rp-mini-gallery.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda. Tentukan judul widget pada variabel widgetTitle, tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numPosts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numChars.

Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, buang kode itu dari widget.

Klik Simpan dan lihat hasilnya.

55 Komentar

  • Unknown

    Amazing Banget nih, wah kapan2 aku coba nih

  • Unknown

    makasih mas taufik,
    akhirnya di share juga :)

  • Unknown

    mantap kang.., kapan aq promosiin ke blog aq yaa.., :)

  • Anonim

    di blog saya ga bisa ...

  • Unknown

    Makasih sharenya mas. diblog saya nggk bisa kenapa ya mas?

  • Mas Fii

    Mantep mas, saya modif-modif dikit :-bd

  • Unknown

    Di tempatku loading gambarnya gak mau berhenti. Kenapa ya?

  • Taufik Nurrohman

    @Mivt elRahman Loading gambar hanya akan berhenti setelah seluruh halaman telah selesai termuat. Kemungkinan loading tidak berhenti karena blog Anda terlalu berat dan lama untuk selesai termuat. Lebih baik buat blog dengan kecepatan yang cukup agar widget ini bisa berjalan dengan lancar.

  • Taufik Nurrohman

    @Angga Bayu Prasetya Kemungkinannya ada dua:
    Tooltip Tidak Terlihat/Efeknya Tampak Berantakan
    Mungkin itu karena JQuery yang dobel. Coba lepas kode yang Saya beri garis bawah lalu simpan lagi.
    Judul Widget Terlihat tapi Thumbnail Tidak Terlihat
    Mungkin ada di pengaturan feed: Coba masuk ke menu Setelan ⇒ Lainnya ⇒ Umpan Situs
    Pada pilihan Boleh umpan blog? jangan sampai mengambil pilihan Tak satupun. Seminimal-minimalnya "Singkat" atau "Sampai lompat baris".

  • Unknown

    @Taufik NurrohmanMas Taufik, rahasianya apa sih. Di sini jquery melul isinya tapi loadingnya enteng enteng aja, sedang di tempatku, pasang jquery tiga tempat aja udah lelet.
    Trima kasih

  • Taufik Nurrohman

    @Mivt elRahman Pertanyaan bagus :-bd Mungkin Saya akan membahas ini suatu saat nanti.
    Pertama-tama, pastikan bahwa blog Anda tidak terlalu banyak menampilkan posting. Unggah semua gambar pada direktori lokal. Misalnya, jangan mengunggah gambar pada situs Photobucket kemudian mempostingnya pada situs blogspot.
    Ke dua, pastikan semua kode pada template Anda bisa mudah dibaca oleh peramban (valid). Pastikan semuanya ditulis dengan benar, dan buatlah nilai error sekecil mungkin. Kompresi CSS, HTML dan JavaScript sebenarnya sama sekali tidak mempengaruhi kecepatan situs, karena peramban bukan hanya "mengunduh data", tapi juga "membaca".
    Ke tiga, jangan terlalu banyak menggunakan widget-widget pihak ke tiga. Maksudnya adalah widget yang berasal dari situs lain selain Blogger. Katakanlah widget chatting. Beberapa orang lebih mempertimbangkan ukuran script sebagai penentu kecepatan, tapi sebenarnya bukan itu penentu utama kecepatannya. Transfer data, tentang seberapa lama peramban memanggil data dari situs penyedia aplikasi tersebut juga menentukan. Kesimpulannya adalah, semakin banyak widget pihak ke tiga yang kita tampilkan pada sebuah blog, maka itu akan semakin memperlambat proses muat halaman blog kita. Gambaran mudahnya, jika kita menampilkan widget yang berasal dari sepuluh situs penyedia widget/aplikasi yang berbeda, maka secara tidak langsung, saat kita sedang membuka halaman blog kita, kita sama saja sedang membuka 10 situs sekaligus! :)

  • Unknown

    @Taufik NurrohmanMakasih banyak Mas udah mau jelasin panjang lebar. Satu lagi nih :) . Widget ini gak jalan di browser opera ya, atau emang di tempatku aja yang ada konflik :)? trims

  • Taufik Nurrohman

    @Mivt elRahman Alhamdulillah... jalan. Saya memang tidak pernah mengetes widget-widget ini terlalu jauh. Setidaknya kalau widget ini bisa jalan di Internet Explorer, berarti peramban yang lain juga kemungkinan besar bisa haha :D Saya tidak begitu paham. Mungkin karena ini, proses pemuatan di Opera sedikit unik, yaitu justru terjadi setelah "ular-ularannya" berhenti:

    Atau karena konflik JQuery juga bisa. Saya baru mengetes dengan halaman demo Saya :p

  • Ujikom TKJ SMK MU 2020

    gan, di blog sy kok konflik ya jquerynya. kalo pasang widget ini, jquery template sy jadi ga jalan, kalo jquery di widget ini dihapus malah ga tampil. bukubukugratis dot com

  • Taufik Nurrohman

    @Taopik Kurrohman JQuery-nya masuk tag kondisional ya?
    Kalau begitu coba cari tag kondisional yang mengelilingi script ini:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>

    Lepas tag kondisional tersebut lalu simpan lagi. Dan saat memasang widget ini, kode yang Saya beri garis bawah tidak perlu diikutkan.

    Tag kondisional di blogmu seharusnya bentuknya seperti ini:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    ...
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>
    ...
    </b:if>
  • imams061111

    mas cara buat recent post berjalan.
    kayak di home blog ini gimna??

  • Taufik Nurrohman

  • Admin SS

    mas apa widget ini bisa untuk nampilkan posting label terbaru??
    terima kasih.

  • Unknown

    mas saya mau bertanya , apakah terlalu byk jquery bisa mempengaruhi seo ?

  • azewBz

    Mas kalau mau nampilin gambar Thumbnail pada artikel yang tidak ada gambar gimana ya? saya udah cari" di browsing ga ketemu.

    Contoh:

    jdi intinya di dlm postingan walapun tdak di menampilkan gambar tetap ada gambar mewakili..!! sperti tutorial di atas jika isinya pos ya cuman text maka ada gambar perwakilan seperti gambar pelangi ..!!

    • Taufik Nurrohman

      Tergantung jenis snippet postingnya.

      • azewBz

        cara membedakanya gmna mas?

  • Septian D Chandra

    haha, keren banget ini. Boleh deh dicoba :D

  • Smp negeri 2 Jumantono

    keren n unik nich tampilannya... :-bd
    cuma kok ada bbrp yg gak muncul gambarnya ya, padahal di postingan ada tp cm muncul pelangi aja...mungkin bisa bantu, maturnuwun

  • Jone

    Waduh keren banget nih, modern banget \o/

  • defantri.com

    sangat membantu, komentar2nya...
    terimakasih.

  • dhanyn10

    kebetulan saya berada di postingan ini, modem juga lagi lambat..tanya mas gimana caranya membuat halaman beranda/homepage seperti website ini?

  • Asep saja

    Terima kasih mas, inii berhasil di blog saya. salam kenal...

  • Unknown

    makasih berat untuk infonya ...

  • Unknown

    selaamat sore mas taufik ^_^ Saya mau nanya mengenai widget tooltip ini, bisa nggak tooltip seperti di widget ini di terapkan pada halaman utama blog, tolong di balas ea mas ^_^ ,

  • GREATEST WORLD KHANATE

    selamun aleykum Bro & Sis. thanks for your effort.. I'm a webmaster from Turkey. I tried a template for Blogger at http://proweblabs-ajans.blogspot.com. Also upload js : https://proweblabs-ajans-script1.googlecode.com/svn/trunk/rp-mini-gallery.js. And than opened a module at "Tata Letak" as "GALERI 1" . Insert your codes above, unfortunatelly do not work for me. Must must I do? How can I fix it? Thanks a lot...

    • Taufik Nurrohman

      Waalaikumsalam. There is no script named rp-mini-gallery.js installed in your template source.

  • Alpha Dian Tamalanrea

    mas kalau dibuat random / acak gitu bisa enggak? :D

  • M Fadhil

    Mas, boleh request tutorial "Cara membuat widget artikel terbaru dengan title tag", tapi tanpa image jadi hanya link + title tag pada link tersebut
    Terima kasih sebelumnya

  • Anonim

    MiMIN Kalo tooll tip pindah kekiri apa yang mesti di edit cos widget aku adanya di kanan jadi tool tip gak nampak

    • Taufik Nurrohman

      MiMIN Kalo tooll tip pindah ke KIRI apa yang mesti di edit cos widget aku adanya di KANAN jadi tool tip gak nampak

      Tidak tampak? Bukannya malah jadi tampak ya, kalau keadaannya begitu? -_-

      Kalau tooltip pindah ke KANAN, apalagi efek fade-in dan fade-out juga tidak tampil, itu artinya ada masalah di luar dari widget ini yang kemudian mempengaruhi widget ini min.

      • Anonim

        oalah jadi gak bisa nih tool tip di atur suka2 ?
        oklah kalo begitu

  • anak pagi staidarussalam

    Ane mau coba dulu....terimaksih mas...

  • anime

    Judul Widget Terlihat tapi Thumbnail Tidak Terlihat, padahal umpan situsnya dah di ubah gimana tuh ?

    • Taufik Nurrohman

      Thumbnail eksternal, atau karena plugin lazyloader?

  • anime

    bro knapa punya gue penjelasannya ditengah, jadi pas disorot sama mouse tuh ga kaya yang di contoh,penjelasanya munculnya ditengah ?

    • Taufik Nurrohman

      Kalau tooltip tidak mau ikut bergerak dan cuma muncul saja secara kaku berarti itu ada masalah di JQuery. Mungkin konflik, atau karena beda versi, atau karena widget ini sudah tidak mendukung lagi untuk versi JQuery yang sedang kamu pakai.

  • Sekedus

    ada versi javascript murni?

Komentar telah ditutup.