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>
.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.
54 Response to "Modifikasi Efek Tooltip Widget Popular Post Blogger"
weeew keren tuh mas..jadi lebih unik pop-postnya mantaaab
Balaskok saya coba nggak bisa mas, nggak ada perubahan sama sekali, apa ada yang salah yah :)
Balaskalo sebelumnya sudah ada kode .PopularPosts yang terpasang silahkan di sesuaikan aja mas :)
Balasjadi nggak boleh dobel yah mas, makasih mas nanti saya coba lagi :)
Balasjadi cantik gitu tampilannya ya mas :)
Balaskeren gan mantap...
BalasBlog njenengan keren, mantabs
Balassiip infonya.
Balaskeren
Mas andes emang markotop deh :sip
Balaswuih mantap mas .. jadi seperti gelembung-gelembung hehe
Balaswah mas andes jago banget memodifikasi yah. ^^
Balasjadi lebih menarik ya sob, dengan adanya efek Tooltip pada hover nya, makasih tuk infonya sob sangat bermanfaat
BalasKode cssnya yang mantap ini mas sekali diletakkan tooltipsnya langsung jadi.
Balascantik dan aduhai yah kang...
BalasSerasa kaya di dunia bikini botum ya mas.. keren deh ih..... Hehe
BalasElegance...
BalasTokcer berarti ya mas :)
Balasoalah.. itu to yang di sebut tooltip. seperti pop-up berisi keterangan yang lebih jelas gitu ya mas.. wah keren nih mas.. bisa di coba hehehehe makasih tutor nya mas..
Balaswidget fungsinya?
BalasAkhirnya Trik modified populer posts, effects tooltip
BalasYang saya cari ada di Mas Andes,. Langsung Srruuput
Glekhhh... izini di ambil buat belajar dan terapkan di blog
Saya Mas Andes. terima kasih atas Trik nya.
Het dah Mas Budi bahase nye aye kaga ngarti dah..?
BalasBikini ntu... sejenis kue apa,an ntu Bang..? tt3tt3t3tt3
Kaya nya Mas Budi pengamat bikini yah. hkkhhk
Becanda Mas Bud.....iiiii...hkhkkhhk
Kalau Populer posts double pasti di marahin
BalasMas Andes Mas Anthonie..? kalau istri dobel
Kaya nya Mas Andes Nyaranin tuwh hkhkkhkh
Geulis meuren yah Mas? kata bahasa Brazil na mah hkkkhhkhk
BalasKang Ruly sapertos baloon meuereun nya Kang..? tt3tt3tt3
Balastutor ini nih yg ane cari" ..
Balaspengen modif efek tooltip di bblog sebelah ..
sumuhun kang Saud, leres pisan :)
Balassami-sami kang Saud :)
BalasCeres sama pisang...
BalasEnak tuh mas :)
Mas saud suka hurup t sama angka 3 ya.....
BalasMaksud kurang lebihnya..bikin keren mas...hehe :)
BalasWah ilmu saya belum sampai disini mas. Belum paham tooltip, hover, css. Baru bisa pasang widget saja saya hehehe :D
BalasTapi menarik juga ya sepertinya kalau widget popular post di beri semacam efek tooltip. Jadi akan lebih terlihat kece ya mas hehe :)
Lumayan nie mas, buat latihan.
Balaskeberhasilannya bisa dijamin gak ini mas ?.. saya coba dulu aja dah,
mungkin mas antonie eka lagi terputus koneksi internetnya, hehehe
Balaspokoknya kalau mas andes yang bikin saya langsung manut aja deh, dari pada kesasar ntar gak bisa balik, hehehehehhe
BalasLangkah"nya Sederhana Tapi Manfattnya Selangit :D
BalasMakasii Yah Gan Ats Infonya ^_^
Kok sampai ke dunia bikini segala mas Bud...???
Balasngikuti plontho jalan wae mas ben ga kesasar
Balashadir untuk menyimak ilmu dari mas andes ...salam :-)
Balassimpan dulu deh scrif nya
Balasd gandeng sekalian mas :-D
Balasnyatat dlu mas,,,, :-D
Balaskulkasnya udah penuh mbak Vina :)
Balassilahkan mbak dicatet, besok dikumpulkan yah :)
Balaswah mbak Wahyu merendah nih tapi kece juga sih hehe...
Balasenak mas Budi, mangga atuh diraosan hehe...
BalasKEEEEEEEEEERREEEENN, like this. saya gak begitu paham dengan coding seperti ini, tak coba perlahan sesuai petujuk mas andes, makasi
BalasSy ndak pake caos mas Ant...cukup kecap aja...hehe
BalasBuru buru jd keserimpet nulisnya mas virl...hehe :)
Balaswidget popular post semakin lebih hidup dan terlihat profesional dengan ditambahnya tooltip ini, mantap mas andes :)
Balaslanjutkan
mancapppp mas, keren pisa euy
Balaswuih mantap............. banget
Balasmenarik banget nih mas,kapan2 mau dicoba
Balassipz
Balasidcheat.com
duniagame.info
Dicoba dulu gan :)
Balas- Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
- Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
- Apabila artikel yang berjudul "Modifikasi Efek Tooltip Widget Popular Post Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode