Skip to main content

WIDGET RECENT POST THUMBNAIL DAN TOOLTIP

Assalamualaikum, selamat malam kawan blogger...
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/AVvXsEihcVfpV-60QwVyQKeQ9GVs1TeTgwRFIX0_9YxgD03hk5cOW5D9Jgx8Ik5GejHv1S4SoRSKJxE6nAmA5K6Z_qVwY4ZRanuurHHoxiqBlQq8L4aFrkx-i6_gzm_K9byUXKuN4kp0r7k8SB3l/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'/>

Comments

Post a Comment

Popular posts from this blog

MEMBUAT JUDUL BLOG BERGERAK MENULIS

Mungkin sebagian dari para blogger sudah tau seperti apa cara untuk memodifikasi title atau judul blog. Misalnya bisa diut berjalan, menulis secara berurutan, menulis secara acak (random) dan lain sebgainya. Nah, beberapa waktu yang lalu saya juga sudah pernah menulis bagaimana cara untuk membuat title blog bergerak seolah-olah menulis secara acak, kalau mau lihat silahkan lihat di  Membuat Title Bergerak Random . Dan kali ini saya akan berbagi tentang bagaimana memodifikasi title blog untuk bergerah seolah menulis secara berurutan dari kiri ke kanan kemudian menampilkan URL blog kalian sejenak dan kembali lagi menulis title berurutan, dan begitu seterusnya. Contohnya bisa kalian lihat pada title blog saya saja, lumayan kan untuk seorang yang baru belajar seperti saya :) Oke, langsung saja ke TKP para sahabat blogger :) 1. Login akun blogger seperti biasa 2. Masuk ke menu template >> edit HTML 3. Cari kode </head> , untuk lebih mudahnya gunakan tombol ...

MEMBUAT LOADING PAGE SAAT MASUK BLOG

selamat dini hari saudara :) setelah lama sekali vakum dari dunia per-bloging-an (haha alay) akhirnya bisa bloging dan berbagi lagi dengan kawan-kawan sekalian nah, kali ini saya akan berbagi tentang caranya "Membuat Loading Page Saat Masuk Blog" nah, kalau lihat judulnya saja, lihat kata-katanya "loading" pastinya sudah tau dengan yang saya maksud. Kalau belum tau, dicoba aja, nanti pasti tau juga, contohnya bisa lihat saat kalian mengakses blog ini dan sedang loading pasti keliatan ada animasi loadingnya :D :P ok, langsung ke TKP saja kawan :) 1. Login Blogger 2. Masuk ke menu Template 3. Pilih Edit HTML 4. cari kode </head> lalu paste kode berikut tepat diatasnya :) <!-- Loading Page Script --> <style type='text/css'> /* add loading image */ body { background:#4B4B4B url( http://fc03.deviantart.net/fs71/f/2013/003/6/9/partart_loading_boredoom_6_by_g2k2007-d5q8zyt.gif ) no-repeat fixed center; } /* hide page div */ #...