Mecha versi 2.6.4 sudah dirilis!

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??

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?

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.

Asep saja

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

Unknown

makasih berat untuk infonya ...

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.

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

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.

Komentar telah ditutup.