Recent Post dengan Thumbnail dan Tooltip

Monday, October 20, 2014

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 dilengkapi dengan tooltip sebagai implementasi dari tulisan dalam artikel yang dimaksudkan.

Lihat Demo

Penerapannya

Untuk membuatnya, pertama-tama masuk ke halaman tata letak dengan mengeklik menu Tata Letak

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

<script src="https://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,R0lGODlhSABIAMQAADU1NTc3NzIyMiwsLCsrKzExMTQ0NC0tLS4uLioqKjMzMzAwMC8vLzEyMkVFRSssLDc4NzIxMTAxMSkpKTg4OCgoKDk5OTY2Njo6OicnJwAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAABIAEgAAAX/oHONZGmeaKqubOkIWSzPdG3feK7PwrX/wKBwJCwaj8SjcolLMp9PJ3RqlFKvP6uswu16v+CweDy+aTOVC2XNbrvf8LgcHpjYzhUKZs/v+/+AgYKAFnY1eHqDiouMfoV3PjV5jX0WAAUMAwkJBwwCABaUhIY0iKIXCBU5EwwXopWkM6aMFwMyBAwKACMACgwJMgOur4+HkTSTihYMMRMLAYMBC4YMoZTFpcczyYIUBGgL1osUC6qcnQWgg9iy2luJgQHACcOn38gI9Y6xMrOE3wPgETMAwIAABgRUZUAgjg+7fu5icPtzIAOBhq8c8iFnTiCGhzH8+YExAVrGP6kS/yAAgCEAwH2QbEzcaEfByX/B1tgxACumJI97CmQYcDOQNgIYhCLoaUwmUAvAWBYFhGBGAB9EHfILGRENUAAZEkwNZECGWLBZ94DMIHLPggwMxgKioKoCy6oLmGZz+scWz0EGCggeXEAA0D4JWYJlq7cd354myeJAKkgBtAt28jaG+HgjF4x+hN6YANqPAlUH/qxtGyAD6UEXFNZIPagi3FE+kXlUMBQDhQulWwIYTnx4aWmubC3F3fSnH1sCMDCbcKCAgQDBCQUwsODeUt5pYTbX3YduHpATBiBYIIDgrgsFFWDSVIO0BVWRN3PtjKEs0cVYZMCTLTapthVbXU0kVP9eotlwwAK2OAjhDXm9VQBzeznHR1XR2WYDS7x9iEGIs424EIaOabiHXxjcQ8MADegRQAMuZvBAjC3RWANSYNEmXobk8WGLK8DUoBkfzMgggR9JziAWVihypiIGtrBUowwHGKAHBQZEGEOWW3ZZw5O9GZjbNgJVZJOXNYB4g5s2IFWWj/ohyB8zFzY5mwAe0oAAnzcsBUNcZo6HZh8wCBpgDNExE12hQB7Khw9itbaoK99I9WOKQaplB6YBIuXDa5ByKimSGeQFww0CBODqq69S0CAN0b21XKlSdroHWK8VWcOjgbw1pgWPaLpprqcKmWp/N1BGiK8z2CSUs7juN+X/rmhAU5UNEQQyqwxL0SWgIKsleFhVtF0pA7B8fBvDRRhURGe1dl67BwWZ+aZuDAN8AoAA+xKgh1AlrXNgW3yUlcGFFvQZxAGhrPoXuQebK8iqF2IggGw7VJCxaOwGUi5/f6wKsW8McCwTA3pYsG3IIldM8h8GqDJBgRYYgEACslWgkgLWGABMBRMrI7O9fwRgGwFAO/SqOBYocM8A+Rl95juNCN3Mn2qEYsFvCiBgSAUwW20o1o1YUADHXEzABQ0HQJDRyEgPQsG2OExQtCh060oJKjZMUEB2i/Sd7CsBFHDAJgg0PZXhaMsl+UdH+z15UZBLhB2xnHfu+eeghy46Ouj4Xr3FBKinrvrqrLfu+uutq4zsorRHWvvt9eKO+xm6Y8F771T8DjwUF6w6/KICiNDC8sw337wDIQAAOw=='
  ) 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/gif;base64,R0lGODlhSABIAMQAADU1NTc3NzIyMiwsLCsrKzExMTQ0NC0tLS4uLioqKjMzMzAwMC8vLzEyMkVFRSssLDc4NzIxMTAxMSkpKTg4OCgoKDk5OTY2Njo6OicnJwAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAABIAEgAAAX/oHONZGmeaKqubOkIWSzPdG3feK7PwrX/wKBwJCwaj8SjcolLMp9PJ3RqlFKvP6uswu16v+CweDy+aTOVC2XNbrvf8LgcHpjYzhUKZs/v+/+AgYKAFnY1eHqDiouMfoV3PjV5jX0WAAUMAwkJBwwCABaUhIY0iKIXCBU5EwwXopWkM6aMFwMyBAwKACMACgwJMgOur4+HkTSTihYMMRMLAYMBC4YMoZTFpcczyYIUBGgL1osUC6qcnQWgg9iy2luJgQHACcOn38gI9Y6xMrOE3wPgETMAwIAABgRUZUAgjg+7fu5icPtzIAOBhq8c8iFnTiCGhzH8+YExAVrGP6kS/yAAgCEAwH2QbEzcaEfByX/B1tgxACumJI97CmQYcDOQNgIYhCLoaUwmUAvAWBYFhGBGAB9EHfILGRENUAAZEkwNZECGWLBZ94DMIHLPggwMxgKioKoCy6oLmGZz+scWz0EGCggeXEAA0D4JWYJlq7cd354myeJAKkgBtAt28jaG+HgjF4x+hN6YANqPAlUH/qxtGyAD6UEXFNZIPagi3FE+kXlUMBQDhQulWwIYTnx4aWmubC3F3fSnH1sCMDCbcKCAgQDBCQUwsODeUt5pYTbX3YduHpATBiBYIIDgrgsFFWDSVIO0BVWRN3PtjKEs0cVYZMCTLTapthVbXU0kVP9eotlwwAK2OAjhDXm9VQBzeznHR1XR2WYDS7x9iEGIs424EIaOabiHXxjcQ8MADegRQAMuZvBAjC3RWANSYNEmXobk8WGLK8DUoBkfzMgggR9JziAWVihypiIGtrBUowwHGKAHBQZEGEOWW3ZZw5O9GZjbNgJVZJOXNYB4g5s2IFWWj/ohyB8zFzY5mwAe0oAAnzcsBUNcZo6HZh8wCBpgDNExE12hQB7Khw9itbaoK99I9WOKQaplB6YBIuXDa5ByKimSGeQFww0CBODqq69S0CAN0b21XKlSdroHWK8VWcOjgbw1pgWPaLpprqcKmWp/N1BGiK8z2CSUs7juN+X/rmhAU5UNEQQyqwxL0SWgIKsleFhVtF0pA7B8fBvDRRhURGe1dl67BwWZ+aZuDAN8AoAA+xKgh1AlrXNgW3yUlcGFFvQZxAGhrPoXuQebK8iqF2IggGw7VJCxaOwGUi5/f6wKsW8McCwTA3pYsG3IIldM8h8GqDJBgRYYgEACslWgkgLWGABMBRMrI7O9fwRgGwFAO/SqOBYocM8A+Rl95juNCN3Mn2qEYsFvCiBgSAUwW20o1o1YUADHXEzABQ0HQJDRyEgPQsG2OExQtCh060oJKjZMUEB2i/Sd7CsBFHDAJgg0PZXhaMsl+UdH+z15UZBLhB2xnHfu+eeghy46Ouj4Xr3FBKinrvrqrLfu+uutq4zsorRHWvvt9eKO+xm6Y8F771T8DjwUF6w6/KICiNDC8sw337wDIQAAOw==", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogUrl = "https://nama_blog.blogspot.com"; // Alamat blogmu
</script>
<script src="https://cekidot.96.lt/file/js/recent.gallery.js"></script>

Klik Simpan dan lihat hasilnya.

1. Kode yang Admin beri garis bawah adalah JQuery. Jika templat Anda sudah dilengkapi dengan JQuery
2. Ganti URL https://nama_blog.blogspot.com dengan alamat blog Anda.
3. Tentukan judul widget pada variabel widgetTitle.
4. Tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numPosts
5. Tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numChars.

Source » DTE

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini