Latest News

Saturday, 28 September 2013

Modifikasi Efek Tooltip Widget Popular Post Blogger

Efek Tooltip Widget Popular Post BloggerModifikasi Efek Tooltip Widget Popular Post Blogger – setelah pada tutorial sebelumnya membahas mengenai widget related post atau artikel terkait, maka kini beralih ke widget popular post atau artikel populer. Tentu sudah tidak asing lagi dengan istilah tooltip, sebuah teks box yang muncul pada sebuah link saat hover atau tersentuh kursor. Tooltip muncul secara otomatis saat pointer di arahkan ke link tanpa harus di klik terlebih dahulu. Untuk membuat efek tooltip pada widget popular post blogger caranya cukup mudah. Pertama kali hanya perlu menambahkan atau pastikan terlebih dahulu blog sudah terpasang widget popular post default blogger. Setelah itu kemudian baru modifikasi widget popular post menggunakan CSS untuk menciptakan tooltip hover. Berikut langkah-langkahnya untuk Modifikasi Efek Tooltip Widget Popular Post Blogger.

1. Login ke akun blogger.
2. Masuk ke Edit HTML template.
3. Copy kode berikut ini lalu taruh di atas kode ]]></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;}
4. Simpan template lalu lihat hasilnya.

Demikian tutorial sederhana untuk Modifikasi Efek Tooltip Widget Popular Post Blogger, sangat mudah tentu dalam penerapannya.
  • Blogger Comments
  • Facebook Comments

0 comments:

Post a Comment

- Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
- Untuk pertanyaan di luar topik artikel silahkan tag [OOT]

Item Reviewed: Modifikasi Efek Tooltip Widget Popular Post Blogger 9 out of 10 based on 10 ratings. 9 user reviews.
Scroll to Top