Sunday, November 1, 2015

Cara Pasang Tooltip Di Blogger

Tooltip URL pada elemen A ? Jadi setiap kali kursor berada di atas elemen A (hover), maka akan menampilkantooltip berisi URL. Lebih jelasnya pengertian tooltip adalah sebuah text melayang ketika kursor kita diarahkan menuju URL tertentu yang kita pasang tooltip.


tooltip melayang di setiap elemen



Tooltip diperlukan ketika text yang kita baca kurang jelas atau rada blur.Pada setiap blog yang dipasang tooltip akan ada text yang melayang ketika kursornya diarahkan menuju elemen tertentu. seperti pada blog saya ini coba kursornya arahkan ke link atau menu diatas.

Tooltip Pada Elemen A Hanya URL

Pada bagian ini, kode tooltip yang saya bagikan akan menampilkan URL saja sebagai konten tooltip, seperti yang ada pada blog ini. Bagaimana cara memasangnya ? Cukup masukan kode berikut pada CSS sobat (sebelum </style> atau </b:skin>)
a:link:before,
.a:visited:before {
content:"Tautan Menuju "attr(href)"";
background:#2c3e50;
position:absolute;
z-index:2;
padding:.5em 1em;
border-radius:7.5px;
margin:2em 0 0 0;
color:#FFF;
opacity:0;
visibility:hidden;
transition:.3s ease-in-out;
}
a:link:hover:before,
a:visited:hover:before {
opacity:.95;
visibility:visible;
}


Tooltip Pada Elemen A Judul dan URL


Nah buat sobat yang rajin menambahkan title tag pada setiap tautan saya rekomendasikan menggunakan yang ini karena lebih keren karena menampilkan judul sekaligus URL yang di tuju. Sebelumnya saya akan berikan satu buah demo.
Bagaimana cara memasangnya ? Cukup masukan kode berikut pada CSS sobat (sebelum </style> atau </b:skin>)
a:link:before,
a:visited:before {
content:"Tautan "attr(title)" Menuju "attr(href)"";
background:#2c3e50;
position:absolute;
z-index:2;
padding:.5em 1em;
border-radius:7.5px;
margin:2em 0 0 0;
color:#FFF;
opacity:0;
visibility:hidden;
transition:.3s ease-in-out;
}
a:link:hover:before,
a:visited:hover:before {
opacity:.95;
visibility:visible;
}

Jangan Lupa setiap memasukan link atau tautan tambahkan title tag seperti ini :
<a href="contoh.com" title="judul tautan contoh">Contoh Tautan</a>

Namun apabila sobat lupa memasukan title tag maka akan tampil seperti Tooltip Pada Elemen A Hanya URL, jadi tenang saja. Mungkin sekian dulu artikel dari saya, semoga membantu mempercantik blog sobat

incoming search jquery tooltip, tooltip html, tooltip css, tooltip javascript, tooltip bootstrap, tooltip text, tooltip c#, tooltip image

Anda Sedang Membaca Artikel Tentang Cara Pasang Tooltip Di Blogger Dan Artikel Ini URL Permalinknya Adalah http://muiztech.blogspot.com/2015/11/cara-pasang-tooltip-di-blogger.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner