Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Modifikasi Efek Tooltip Widget Popular Post Blogger

Efek Tooltip Widget Popular Post Blogger 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.

Berlangganan artikel via email

54 Response to "Modifikasi Efek Tooltip Widget Popular Post Blogger"

weeew keren tuh mas..jadi lebih unik pop-postnya mantaaab

Balas
avatar
Anonymous

kok saya coba nggak bisa mas, nggak ada perubahan sama sekali, apa ada yang salah yah :)

Balas

kalo sebelumnya sudah ada kode .PopularPosts yang terpasang silahkan di sesuaikan aja mas :)

Balas

jadi nggak boleh dobel yah mas, makasih mas nanti saya coba lagi :)

Balas

jadi cantik gitu tampilannya ya mas :)

Balas
avatar
Anonymous

keren gan mantap...

Balas

Blog njenengan keren, mantabs

Balas
avatar
Anonymous

Mas andes emang markotop deh :sip

Balas

wuih mantap mas .. jadi seperti gelembung-gelembung hehe

Balas

wah mas andes jago banget memodifikasi yah. ^^

Balas

jadi lebih menarik ya sob, dengan adanya efek Tooltip pada hover nya, makasih tuk infonya sob sangat bermanfaat

Balas
avatar
Anonymous

Kode cssnya yang mantap ini mas sekali diletakkan tooltipsnya langsung jadi.

Balas

cantik dan aduhai yah kang...

Balas

Serasa kaya di dunia bikini botum ya mas.. keren deh ih..... Hehe

Balas

oalah.. 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..

Balas
avatar
Anonymous

widget fungsinya?

Balas

Akhirnya Trik modified populer posts, effects tooltip
Yang 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.

Balas

Het dah Mas Budi bahase nye aye kaga ngarti dah..?
Bikini ntu... sejenis kue apa,an ntu Bang..? tt3tt3t3tt3
Kaya nya Mas Budi pengamat bikini yah. hkkhhk
Becanda Mas Bud.....iiiii...hkhkkhhk

Balas

Kalau Populer posts double pasti di marahin
Mas Andes Mas Anthonie..? kalau istri dobel
Kaya nya Mas Andes Nyaranin tuwh hkhkkhkh

Balas

Geulis meuren yah Mas? kata bahasa Brazil na mah hkkkhhkhk

Balas

Kang Ruly sapertos baloon meuereun nya Kang..? tt3tt3tt3

Balas
avatar
Anonymous

tutor ini nih yg ane cari" ..
pengen modif efek tooltip di bblog sebelah ..

Balas

sumuhun kang Saud, leres pisan :)

Balas

sami-sami kang Saud :)

Balas

Ceres sama pisang...
Enak tuh mas :)

Balas

Mas saud suka hurup t sama angka 3 ya.....

Balas

Maksud kurang lebihnya..bikin keren mas...hehe :)

Balas

Wah ilmu saya belum sampai disini mas. Belum paham tooltip, hover, css. Baru bisa pasang widget saja saya hehehe :D
Tapi menarik juga ya sepertinya kalau widget popular post di beri semacam efek tooltip. Jadi akan lebih terlihat kece ya mas hehe :)

Balas

Lumayan nie mas, buat latihan.

keberhasilannya bisa dijamin gak ini mas ?.. saya coba dulu aja dah,

Balas

mungkin mas antonie eka lagi terputus koneksi internetnya, hehehe

Balas

pokoknya kalau mas andes yang bikin saya langsung manut aja deh, dari pada kesasar ntar gak bisa balik, hehehehehhe

Balas
avatar
Anonymous

Langkah"nya Sederhana Tapi Manfattnya Selangit :D
Makasii Yah Gan Ats Infonya ^_^

Balas

Kok sampai ke dunia bikini segala mas Bud...???

Balas

ngikuti plontho jalan wae mas ben ga kesasar

Balas

hadir untuk menyimak ilmu dari mas andes ...salam :-)

Balas

simpan dulu deh scrif nya

Balas

d gandeng sekalian mas :-D

Balas

nyatat dlu mas,,,, :-D

Balas

kulkasnya udah penuh mbak Vina :)

Balas

silahkan mbak dicatet, besok dikumpulkan yah :)

Balas

wah mbak Wahyu merendah nih tapi kece juga sih hehe...

Balas

enak mas Budi, mangga atuh diraosan hehe...

Balas

KEEEEEEEEEERREEEENN, like this. saya gak begitu paham dengan coding seperti ini, tak coba perlahan sesuai petujuk mas andes, makasi

Balas

Sy ndak pake caos mas Ant...cukup kecap aja...hehe

Balas

Buru buru jd keserimpet nulisnya mas virl...hehe :)

Balas

widget popular post semakin lebih hidup dan terlihat profesional dengan ditambahnya tooltip ini, mantap mas andes :)
lanjutkan

Balas

mancapppp mas, keren pisa euy

Balas

wuih mantap............. banget

Balas
avatar
Anonymous

menarik banget nih mas,kapan2 mau dicoba

Balas

sipz
idcheat.com
duniagame.info

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