Modifikasi 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>4. Simpan template lalu lihat hasilnya.
.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;}
Demikian tutorial sederhana untuk Modifikasi Efek Tooltip Widget Popular Post Blogger, sangat mudah tentu dalam penerapannya.
Demikian artikel tentang Modifikasi Efek Tooltip Widget Popular Post Blogger ini dapat kami sampaikan, semoga artikel atau info tentang Modifikasi Efek Tooltip Widget Popular Post Blogger ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
