Apr 26, 2015
Posting kali ini saya akan coba berbagi tentang salah satu trik yang baru saya pelajari
(walaupun sebenarnya sudah banyak yang menggunakan hahahahaha), yaitu tentang bagaimana membuat suatu widget yang menampilkan artikel-artikel terbaru kita dalam bentuk thumbnail gambar dan disertai dengan tooltip yang akan muncul ketika gambar thumbnail tadi disentuh mouse (onmouseover)...
Untuk contohnya bisa kawan-kawan lihat pada sidebar blog saya pada bagian Recent Post.
Nah, cukup menarik bukan ?? (walaupun masih kacau hahahaha)
Nah, kalau kawan-kawan ingin membuatnya, silahkan ikuti caranya... Let's go . . . ! ! !
1. Login ke akun blogger saudara-saudara
2. masuk ke menu tata letak >> add gadget >> HTML/JavaScript
3. Selanjutnya silahkan kawan-kawan paste kode berikut :
<style scoped="scoped">
#mini-gallery {
width:30%px; /* Tentukan lebar yang tepat, saya menggunakan % karena template saya sudah responsive */
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 = 9, // Tentukan jumlah thumbnail/posting yang ingin ditampilkan
numChars = 300, // Tentukan jumlah karakter pada deskripsi tooltip
tooltipFadeSpeed = 200, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
pictureBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpk2qOPKEqqHCPAW-7LEkZ3SicjGhguV24fmDf4QyqoYHv2NnxsYtPo6s9P46imu2O_lEHn0d03rbLP9e3pVT_5xHG0PNJvhsXG3NNAg3IsdEAThspfrQdcnCVLWPnj6l24A7N17V8Dvp2/s400/tanda+seru.jpg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
blogUrl = "http://nyzhar.blogspot.com"; // Alamat blogmu
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/rp-mini-gallery.js"></script>
4. Silahkan simpan
5. Silahkan lihat blog kawan-kawan :)
Oh..., iya trik ini membutuhkan jquery, jadi sebelumnya kalau blog kawan-kawan belum terdapat jquery silahkan copy-paste kode berikut di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
