Membuat Artikel Terbaru Desain Gallery Dan Tooltip

Membuat Artikel Terbaru Desain Gallery Dan Tooltip - Layaknya semua blog yang pada umumnya sudah pasti akan terdapat widget Artikel Terbaru (Popular Post) pada sidebar. Widget Artikel Terbaru atau yang kita kenal sebagai POPULAR POST merupakan sebuah daftar sekumpulan menu blog yang menampilkan link artikel yang telah lampau maupun artikel terbaru, sehingga saat pengunjung berada pada artikel anda yang sebelumnya, mereka akan lebih mudah menemukan artikel anda yang lain dalam widget ini.

Tampilan default sudah cukup untuk melengkapi widget kosong pada sidebar blog Anda dengan title Popular Post, maka pada sidebar blog Anda akan menampilkan 10 daftar Artikel yang terdapat pada blog Anda. Untuk postingan kali ini SAHABAT BLOGGER 77 akan memberikan cara termudah membuat artikel terbaru dengan desain gallery dan tooltip seperti ilustrasi gambar dibawah ini

Cari Artikel.? baca - Desain Tampilan Daftar Isi Model Tab

Widget popular post kali ini, bisa terbilang masih baru karena belum begitu banyak rekan-rekan blogger yang menampilkan widget seperti ini, namun desain dan fungsinya sama, dan agar lebih menarik dan terlihat keren, tampilan widget ini sudah saya modifikasi secara total, sehingga daftar artikel terbaru pada sidebar blog Anda akan bergaya Desain Gallery dengan tampilan tooltip seperti ini

DEMO SHOW

Untuk menempatkan desain tampilan widget artikel terbaru ini pada blog Anda, cukup ke-tata letak, pilih HTML/JavaScript lalu copy kode dibawah ini, namun sebelumnya perhatikan kode yang saya beri warna Merah, jika pada template Anda sudah mempunyai jQuery yang sama, maka hapus saja kode tersebut, selanjutnya pastekan pada area halaman gadget

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style popPost="mini-gallery">
/*Desain Artikel Terbaru (Popular Post) dengan gambar dan tooltip
css design: miniImage="popPost-thumbanail","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani*/
#mini-gallery {
  width:300px;margin:0 auto;
  font:normal normal 11px/normal Verdana,Arial,Sans-Serif;
  color:#666;padding:8px;
  background:#222;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;}

#mini-gallery h2 {
  font:normal normal 14px/14px Impact;
  color:#fff;
  text-transform:uppercase;
  margin:2px;padding:7px 14px;
  background-color:#080;}

#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;margin:0 0 0 10px;
  top:95%;left:95%;z-index:1000;
  width:200px;background:#333;
  border-left:7px solid #080;
  border-top:3px double #333;
  padding:10px 15px;overflow:hidden;
  word-wrap:break-word;
  display:none;color:#fff;}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  border-bottom:3.5px dotted #ccc;
  padding-bottom:2.5px;text-align:center;
  margin:0 0 5px;color:orange;}
#mini-gallery .rp-item:hover .hidden {display:block}
</style>

Sampai tahap ini, pekerjaan Anda belum selesai. Sebagai tambahan saya sudah meringkas beberapa perintah CSS dan menggantikan fungsinya dengan perintah script variable seperti berikut

<script>
var widgetTitle = "Daftar Artikel",
numPosts = 20,
numChars = 300,
tooltipFadeSpeed = 200,
    pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    blogUrl = "http://sahabatblogger77.blogspot.com";</script>

KETERANGAN

var widgetTitle - Untuk menentukan judul widget
numPosts - Tentukan berapa jumlah artikel yang akan Anda tampilkan
numChars - Untuk menentukan jumlah kata descripsi pada tooltip
tooltipFadeSpeed - Atur kecepatan saat tooltip akan tampil
pictureBlank - Untuk menggantikan jika postingan Anda tidak memiliki gambar
blogUrl - Hapus lalu ganti dengan URL-blog Anda

Hmmmm...!! saatnya cuci tangan karena semua pekerjaan Anda sudah selesai. Dan mudah-mudahan Artikel Terbaru Desain Gallery Dan Tooltip kali ini dapat diterima oleh mas +Aldino Sya, karena atas reques beliau yang ingin dibuatkan widget popular post yang berbeda, maaf ya permintaannya membuat mas aldino lama menunggu, hehe..!!

Dan akhir kata saya ucapkan Terimakasih...