Widget Post. Dengan Tooltip

 DEMONYA DISINI



Wah Sekarang dengan postingan baru lagi nich beberapa orang pasti bingung liatin namanya namanya baru pemula langsung aja tips ini membahas mengenai cara membuat Galery Recent Post.


Dari pada tambah  bingung langsung aja dech tutorialnya :


  1. Login ke Blogger Masing Masing
  2. Jangan Lupa BUka Design
  3. Lalu ADD Gadget
  4. Lalu HTML Jave Script
  5. Lalu Pastekan Kode dibawah INI :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#mini-gallery {
  width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0px auto;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#666;
  padding:8px;
  background-color:#222;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal 14px Impact,Arial,Sans-Serif;
  color:#999;
  text-shadow:0px 1px 0px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#3c3c3c;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://3.bp.blogspot.com/-Z0w4M80kNoE/Tz4_RrLC4fI/AAAAAAAACJY/2mQ2yk5hCdU/s1600/loading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  display:block;
  width:72px;
  height:72px;
  border:none;
  margin:0px 0px;
  padding:0px 0px;
  background:transparent;
}

#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-border-top:4px solid #3399ff;
  -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px rgba(0,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:0px 0px 5px;
  color:#2473A8;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>
<script type="text/javascript">
var rpTitle     = "Artikel Terbaru", // Tentukan judul widget
    numposts    = 20,                // Tentukan jumlah thumbnail/posting
    numchar     = 300,               // Tentukan jumlah karakter pada deskripsi tooltip
    rcFadeSpeed = 600,               // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pBlank      = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogURL     = "http://bukanpeniru.blogspot.com/"; // Alamat blogmu
</script>
<script src="http://hompimpa.googlecode.com/files/rp-mini-gallery.js" type="text/javascript"></script>
Note :
  • Scipt Diatas dapat ditaruh juga dalam kode HTML POada Postingan Dan lainnya teruslah berkarya salam Blogger
  • Dan Jangan LUpa ganti kode yang berwarna merah pada sript tersebut
Good LUck

0 Coment "Widget Post. Dengan Tooltip", Baca atau Masukkan Komentar

Posting Komentar