Cara Modifikasi Efek Tooltip Widget Popular Post di Blog

Kode Iklan Di Sini
Cara Modifikasi Efek Tooltip Widget Popular Post di Blog
Cara Modifikasi Efek Tooltip Widget Popular Post di Blog,Anaktimor17 Blog - Untuk membuat widget popular post dengan efek tooltip di blog
caranya cukup mudah. Anda tinggal menaruh code css agar dapat menhasilkan efek tooltip yang di inginkan.
Nah sobat pasti sudah tau kan apa itu Tooltip??Tooltip adalah sebuah teks box yang muncul pada sebuah link saat hover atau tersentuh kursor.

Cara Pasang :
1. Login ke akun blogger Anda >> Pilih Edit HTML
2. Copy kode di bawah ini dan simpan tepat di atas code ]]></b:skin>

 .PopularPosts .widget-content ul li{padding:0;position:relative;border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222; color: #fff; float: left;list-style: none;margin-left: -15px !important;padding: 5px !important; height: 30px;}
.item-snippet { font-size: 90%; line-height: 1.2em; position: absolute; width: 230px; background-color: #222; padding: 7px; border: 2px solid #333; color: #fff; box-shadow: 1px 1px 6px 1px #52E052; z-index: 2; left: 300px; top: 60%; height: 4.5em!important; visibility: hidden; opacity: 0; transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{z-index:999;left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:30px;height:30px}
.PopularPosts .item-title{font: Verdana 14px bold;}

3. Simpan template Anda, Selamat mencoba and Happy Blogging !!

You Might Also Like:

Disqus Comments