My Profile

Avatar


Designer, UI

London, UK

April 1, 1988


Some text..

Some other text..



Interests

News W3Schools Labels Games Friends Games Friends Food Design Art Photos


Hey!

People are looking at your profile. Find out who.

Social Media template by w3.css

Status: Feeling Blue

Recent Post Thumbnail dan Tooltip di blog

Asik..nulis lagi nih...kagak ngo-pazz lagi :) kali ini saya pengen membuat Recent Posts dengan thumbnail + tooltip...seperti gambar di bawah ini :
Recent Post Thumbnail dan Tooltip di blog
keren kagak???hehehehe.....
caranya :
1. login ke blogspot.
2. masuk ke tata letak, dan tambahkan widget HTML baru.

3. masukan kode di bawa ini :
<style type="text/css">
#mini-gallery {
  width:460px; /* 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:#fff;
  -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 h1 {
  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:center;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

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

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:100%;
  left:-20%;
  z-index:1000;
  width:150px;
  background-color:white;
  border-top:4px solid #3399ff;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  -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     = "New Apps And Game", // Tentukan judul widget
    numposts    = 18,                // Tentukan jumlah thumbnail/posting
    numchar     = 150,               // 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://androidkan.blogspot.com"; // Alamat blogmu
</script>
<script src="https://sites.google.com/site/kekulanden/css/rp-mini-gallery.js" type="text/javascript"></script>
4. save dan lihat hasilnya..jreng.....anda sudah mendapatkan Recent Posts + Thumbnail yang keren.

contoh : lihat sini

Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama