Cara Membuat Tooltip pada Tag Pre

Assalamualaikum sobat blogger. Kesempatan kali ini aku mau berbagi tutorial tentang membuat tooltip pada tag pre. Setelah ane dapet dari kang ismet, ane langsung praktekin diblog ane dan hasilnya manjur. Jadi ane juga mau berbagi dengan kalian sapa ttau bermanfaat. Oke deh langsung disimak saja.
- Sumber referensi : http://blog.kangismet.net/2013/09/membuat-tooltip-dengan-before-dan-after.html




Langkah 1
kalian masuk ke dasbor blogger kalian. Kalian pilih template dan edit html.

Langkah 2
Pada template pasti sudah ada kode .post-body blockquote atau .post blockquote ataupun #blockquote. Nah, jika sudah ada kode yang seperti itu, kalian tinggal tambahkan kode di bawah ini dibawah kode .post-body blockquote, atau yg #blockquote

blockquote::before{content:"Double klik untuk seleksi"; position:absolute; right:0; color:#ddd;font-size:12px;margin-top:-46px; background:#696969; padding:4px; border-radius:5px; opacity:0; visibility:hidden; transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -khtml-transition:all 1s ease; z-index:9}
#box-message{position:fixed!important;top:-1000px;left:50%;margin:0 0 0 -182px;width:292px;height:290px;padding:0;background:#fff;color:#111;z-index:999}
#box-message a.close{position:absolute;top:1px;right:1px;background:red;text-decoration:none;line-height:25px;width:22px;text-align:center;cursor:pointer;font-family:Arial black;font-weight:bold;font-size:20px;color:#eee}
blockquote::after{content:""; position:absolute; right:24px; top:0; margin-top:-11px; border-style:solid; border-width:8px 8px; border-color:#696969 transparent transparent transparent; z-index:0; opacity:0; visibility:hidden; transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -khtml-transition:all 1s ease}
blockquote:hover:before, blockquote:hover:after{opacity:5; visibility:visible}

Nah, kode diatas untuk pemasangan pada tag blockquote, kalau kalian ingin memasangnya pada tag pre, kalian cari dulu di template kalian ada kode .pre atau .post-body pre. Jika ada kalian tinggal tambahkan kode dibawah ini tepat dibawah kode .pre atau .post-body pre tadi

pre::before{content:"Double klik untuk seleksi"; position:absolute; right:0; color:#ddd;font-size:12px;margin-top:-46px; background:#696969; padding:4px; border-radius:5px; opacity:0; visibility:hidden; transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -khtml-transition:all 1s ease; z-index:9}
#box-message{position:fixed!important;top:-1000px;left:50%;margin:0 0 0 -182px;width:292px;height:290px;padding:0;background:#fff;color:#111;z-index:999}
#box-message a.close{position:absolute;top:1px;right:1px;background:red;text-decoration:none;line-height:25px;width:22px;text-align:center;cursor:pointer;font-family:Arial black;font-weight:bold;font-size:20px;color:#eee}
pre::after{content:""; position:absolute; right:24px; top:0; margin-top:-11px; border-style:solid; border-width:8px 8px; border-color:#696969 transparent transparent transparent; z-index:0; opacity:0; visibility:hidden; transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -khtml-transition:all 1s ease}
pre:hover:before, pre:hover:after{opacity:1; visibility:visible}

karena disitu tertulis double klik untuk seleksi, maka kunjungi juga Cara membuat seleksi otomatis pada tag blockquote

Yoroshiku ^^ !!!!!

Share :

Tweet

More

Related Post