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.
3. Simpan template Anda, Selamat mencoba and Happy Blogging !!
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.
.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 !!
apalagi untuk template yg nuansa gelap cocok banget tuh hehe
-keep blogging-
Kunjungan perdana nich.. :)