Cara Membuat Tooltip di blog

Cara Membuat dan Memasang Tooltip dengan ::before dan ::after
Tutorial kali ini, karena banyaknya request dan pertanyaan, bagaimana cara membuat tulisan Klik ganda untuk seleksi pada tag pre di blog ini.

Apa itu tooltip  ?
Tooltip adalah komponen grafis dalam user interface pengguna. Komponen akan muncul ketika pointer mouse diarahkan apda sebuah komponen. Tooltip dapat berisi bantuan maupun info lain yang terkait dengan komponen tersebut. Biasanya, saat link di hover/dituju oleh mouse, akan muncul tulisan teks informasi. Tetapi Tooltip pada dasarnya hanya akan muncul jika komponen/link terdapat atribut title .Cara ini  memudahkan pengunjung untuk mengetahui fungsi komponen tanpa harus mencobanya terlebih dahulu dan tidak memenuhi tampilan utama aplikasi.
Oke sobat, langsung saja anda buka blog kamu:

1. Login ke akun blogger kamu. 
2. Masuk ke dasbor > template > Edit HTML > Proceed
3. Cari kode ]]><b:skin/> atau dapat menggunakan CTRL+F
4. Tambahkan kode CSS dibawah ini tepat sebelum kode tulisan  ]]><b:skin/>


#tooltip {
width:400px;
height:90px;
background:#c7430f;
color:#f5d5c9;
text-align:center;
margin:0 auto;
text-transform:uppercase;
font-family:Arial, sans-serif;
font-size:18px;
line-height:90px;
vertical-align: middle;
position:relative;
}

#tooltip::before {
content:"Ini Tooltip Lho";
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}

#tooltip::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}

#tooltip:hover::before, #tooltip:hover::after {
opacity:.5;
visibility:visible;
}
 
5. KLIK SAVE DAN SIMPAN
 
 
6. Langkah terakhir sobat hanya perlu menambahkan data-tooltip di bagian komponen html. 
Contohnya pembuatan link pada navigasi blog:

<a href="http://sewaps.com.com/" data-tooltip="Teks yang akan muncul di tooltip">Beranda</a>
 
Tags: Memasang Tooltip, Membuat Tooltip valid HTML5 CSS3 

Ditulis Oleh : Web Hosting Indonesia

Judul Artikel "Cara Membuat Tooltip di blog" Jika salin Artikel Cara Membuat Tooltip di blog, mohon mencantumkan sumber link http://www.webhosting.web.id/2014/09/cara-membuat-tooltip-di-blog.html. Salam from Web Hosting Gratis

:: Web Hosting Indonesia ::

0 komentar:

Posting Komentar

 
 
Copyright © WEBHOSTING.WEB.ID, Powered by UNMETERED