Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan 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:

Masuk ke halaman Tata Letak

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

<br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><br /> <style type="text/css"> #mini-gallery { width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */ margin:0px auto; font:normal 11px Verdana,Arial,Sans-Serif; color:#666; padding:8px; background-color:#222; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } #mini-gallery h2 { font:normal 14px Impact,Arial,Sans-Serif; color:#999; text-shadow:0px 1px 0px black; text-transform:uppercase; margin:2px 2px 2px; padding:7px 14px; background-color:#3c3c3c; } #mini-gallery .rp-item { float:left; display:inline; position:relative; margin:2px; padding:0px 0px; background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%; width:72px; height:72px; } #mini-gallery .rp-item img { width:72px; height:72px; border:none !important; margin:0px 0px !important; padding:0px 0px !important; background:transparent !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:0px 0px 3px rgba(0,0,0,0.7); -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7); box-shadow:0px 0px 3px rgba(0,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:0px 0px 5px; color:#2473A8; } #mini-gallery .rp-item:hover .hidden {display:block;} </style><br /> <script type="text/javascript"> var rpTitle = "Artikel Terbaru", // Tentukan judul widget numposts = 20, // Tentukan jumlah thumbnail/posting numchar = 300, // Tentukan jumlah karakter pada deskripsi tooltip rcFadeSpeed = 600, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar blogURL = "http://MafiaSitez.blogspot.com"; // Alamat blogmu </script><br /> <script src="http://mafiaproject.googlecode.com/files/RecentPost.js" type="text/javascript"></script><br />

Ganti URL http://MafiaSitez.blogspot.com dengan alamat blog Anda. Tentukan judul widget pada variabel rpTitle, tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numposts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numchar.
Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, buang kode itu dari widget.
Klik Simpan dan lihat hasilnya.

Ditulis Oleh : Yandi Mulyadi ~ Semua Artikel Menarik Ada Disini

Sobat sedang membaca artikel tentang Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip. Yang diketik tangan Oleh Admin Yandi Mulyadi, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya ya? <a href="http://mafiazblogger.blogspot.com/2012/09/widget-posting-terbarurecent-post.html" target="_blank">Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip</a>

Artikel tersebut bisa Anda akses via mobile, klik disini.

Share this post :

Related Posts :