Membuat Recent Post Thumbnail With a Tooltip Effect

Membuat Recent Post Thumbnail With a Tooltip Effect - Sebelumnya saya sudah pernah mengulas tentang membuat recent post, pada resen sebelumnya dan kali ini memiliki persamaan dan perbedaan.Persamaannya yaitu sama-sama memberitahukan pengunjung blog mengenai beberapa artikel terbaru yang anda publikasikan, dan yang membedakan yaitu pada recent posts berikut ini terdapat efek tooltip.

Efek Toltip adalah pesan singkat yang muncul pada saat kita arahkan kursor kearah link, gambar atau elemant yang lain yang akan kita klik. Efek Tooltip bisa kita buat semenarik mungkin, seperti yang akan saya ulas berikut ini.

Membuat Recent Post Thumbnail With a Tooltip Effect
1. Login keakun Blogger
2. Selanjutnya anda pilih layout/Tata letak » klik add Gadget
3. Pilih HTML/Javascript
4. Kemudian silahkan anda copy kode dibawah ini dan letakkan dikolom yang tersedia

<style type="text/css">
#aak-gallery {
  width:100%;  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#70787C;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#aak-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#aak-gallery .bgt-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5iP6j-w4dtHwRjGhn1d1GvhkRhFXN9z38JvIFE__04J0O8glLN4Z4CtK08ztzaejKtrfO-dpDUBZy8IOHnzcgc3oanpdS3jDL9N3oRSxJNrShXO5yWij0Mn0nKquwxCp4mx6L73L8gw/s1600/loading9+(1).gif') no-repeat 50% 50%;
  width:86px;  height:86px;}
#aak-gallery .bgt-item img {
  width:86px;  height:86px;  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#aak-gallery .bgt-item .bgt-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:rgb(244, 244, 244);
  border-top:5px solid #095E91;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#aak-gallery .bgt-item .bgt-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#095E91;
}
#aak-gallery .bgt-item:hover .hidden {display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var bgtTitle     = "Latest Posts",
    numposts    = 12,
    numchar     = 190,
    rcFadeSpeed = 610,
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpOilsr_qCwmalEgPUCrLxbYCwBc_K6YOh_PpIQeXTyKlrOIAMFrcBI1IKWtkQxgTbGieHc4Ca_2O8jTyly8AGLGDAs0S9eWxhRE4GgNPQuVHX17XvMqQ7Ot2hSW9jeHWo29ud5u36FhY/s1600/no-image-ava.jpg",
    blogURL     = "http://aak-share.blogspot.com";
</script>
<script src="https://aakyos.googlecode.com/svn/trunk/recent-post-effek-tooltip.js" type="text/javascript"></script>

Note :

• http://aak-share.blogspot.com ganti dengan URL Blog/website anda
• width:100%; ukuran lebar widget
• 12 Jumlah postingan yang akan ditampilkan
• width:86px;  height:86px; Ukuran gambar

5. Klik Simpan

Demikian cara membuat Membuat Recent Post Thumbnail With a Tooltip Effect, dan jang anda lewatkan artikel aak menarik lainnya.
Cukup sekian dari saya, selamat mencoba dan semoga bermanfaat!

Share this post