Cara Membuat Widget Recent Post/Postingan Terbaru Dengan Gambar Thumbnail dan Tooltip - Hay sobat blog mas aldi, sudah lama saya tidak share widget blogger. Pada kesempatan kali ini saya akan share widget recent post/postingan terbaru dengan gambar dan tooltip.
Mungkin kalian sudah biasa menemukan widget recent post dengan gambar saja. Tapi mungkin anda berminat mencoba yang satu ini? yaitu widget recent post dengan thumbnail & tooltip.
Baca Juga :
Hampir sama dengan widget recent post dengan thumbnail biasa, namun widget yang saya share kali ini dilengkapi dengan Tolltip sehingga lebih keren dari widger recent post dengan thumbnail biasa.
Berikut Gambar Penampakan Widgetnya :
Mungkin kalian sudah biasa menemukan widget recent post dengan gambar saja. Tapi mungkin anda berminat mencoba yang satu ini? yaitu widget recent post dengan thumbnail & tooltip.
Baca Juga :
Hampir sama dengan widget recent post dengan thumbnail biasa, namun widget yang saya share kali ini dilengkapi dengan Tolltip sehingga lebih keren dari widger recent post dengan thumbnail biasa.
Berikut Gambar Penampakan Widgetnya :
Atau anda ingin melihat demo-nya secara langsung? Anda bisa melihatnya Disini
Berminat untuk memasang widget ini di blog anda? Mari kita ke tutorial pemasangnya.
Tutorial Membuat Widget Recent Post Dengan Thumbnail & Tooltip di Blog :
1.) Masuk ke dasbor blogger -> pilih menu Tata Letak -> Kemudian klik tambahkan gadget lalu pilih mode HTML/Javascript.
2.) Masukkan semua kode dibawah ini :
<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="http://dte-project.googlecode.com/svn/trunk/rp-mini-gallery.js"></script>
- Ganti http://nama_blog.blogspot.com dengan nama blogmu
3.) Klik Simpan & Selesai.
Resource : http://www.dte.web.id/2012/02/recent-post-widget-with-mini-thumbnail.html
Wah banyak tutor menarik ni di blog Mas Aldi. Nanti kalau ada waktu luang pengen juga ngerombak blog hhehehe
ReplyDeleteHehe, ok mas putra..
DeleteMas al aku nyimak aja iya soalnya kalo urusan kode-kode aku nyerah deh @_@
ReplyDeleteHehe.. ok deh mbak wida
Deletewah menarik juga nih kayaknya mas
ReplyDeletenanti saya coba deh
makasih sharingnya mas aldi
Samasama mas yanto
Deleteloh saya udah komentar dimari toh mas
DeleteHehe, iya mass..
Deletekeren mas widget recent postnya. bergaya galleri box lagi. saya pelajari dulu ya mas dan terima kasih atas tutorialnya. salam sahabat blogger.
ReplyDeleteSamasama mas..
DeleteKeren yee bang, coba nggak yaa?
ReplyDeleteTerserah Bang :D
Deletekeren gan.... (y)
ReplyDeleteoh ya widget news blog agan bermasalah nih....dan emo list comment juga...
jangan lupa kunjungan dan komentar balik ya :)
Bermasalah gimana gan?
DeleteDisini kok normal aja? [ Google Chrome ]
Setelah saya cek dimozila memang error..
DeleteSekarang sudah diperbaiki.. makasih udah ngasih tau :)
Kunjungan Balik & Komentarnya Juga Udah :)
kren sob, mau saran nie lates newnya error ya disini sangat mengangu sekali
ReplyDeleteOklah, kalo memang mengganggu akan saya hapus aja :)
DeleteSaya sampai pusing nih, apakah semua trik disini harus saya pasang di blog saya soalnya keren2
ReplyDeletemakin keren aja nih blog
Hehehe.. boleh dicoba semuannya :D
DeleteIni hanya untuk blogger yo mas ???
ReplyDeleteuntuk .id gak bisa mas ??
Dicoba dulu mas.. Siapa tau bisa,,
Deletemenarik sekali gan, artikel membuat widget recent post dengan gambar thumbnail dan tooltip yang super sekali :)
ReplyDeletewidgetnya yang populer post itu sangat menarik apalagi banyak tutorial disini
ReplyDeleteHehe makasih gan..
Deletewidget artikel terbaru dengan efek ini memang bagus banget mas
ReplyDeletejadi kepengen menerapkan diblog saya nih.
makasih sharingnya
Sama2 mas..
Deletetips yang sangat membantu,terimakasih sudah share
ReplyDelete