Gank Zone Blog? Join Now!
RSS Feed Facebook Twitter

Membuat Efek Tooltip dengan CSS

Share or Like on :


Membuat Efek Tooltip dengan CSS

Oke, kali ini saya akan share tentang tutorial mempercantik blog, yaitu cara membuat efek tooltip. Efek tooltip ini dibuat menggunakan CSS, jadi jangan khawatir, karena tidak mengurangi kecepatan blog sama sekali. Sebelumnya pada tahu belum apa itu tooltip? Tooltip ini sama saja seperti title pada link, yaitu jika cursor diarahkan ke link, maka akan keluar tulisan. Nah, itu yang disebut tooltip.


Cara membuatnya yaitu langsung saja simak tutorial berikut :


Pertama, login dulu ke blogger terus masuk ke menu rancangan dan pilih edit HTML Biar aman, backup dulu template blog sobat. Abis itu cari kode ]]></b:skin> kemudian jika sudah ketemu, copy script CSS dibawah ini dan paste sebelum kode ]]></b:skin>.


a.tooltip{
position:relative;
}
a.tooltip span{
display:none;
}
a:hover.tooltip span{
background:#FFFFCC;
padding:10px 15px;
max-width:200px;
height:auto;
display:block;
position:absolute;
left:10px;
top:20px;
-moz-border-radius:5px;
-moz-box-shadow:3px 3px 7px #ccc;
color:#000;
z-index:100;
border:1px solid #999;
text-decoration:none;
font-weight:normal;
}


Jika sudah, simpan template blog sobat. Langkah pertama sudah selesai.


Langkah berikutnya apabila efek tooltip ini ingin ditampilkan pada link, sobat hanya cukup menambahkan kode yang berwarna merah pada link yang ingin sobat beri efek tooltip tersebut, tentunya jika sobat membuat postingan dengan mode HTML.

Berikut contoh dan kodenya :


<a href="http://link-tujuan" class="tooltip">Nama Anchor Link <span>Teks yang akan ditampilkan pada tooltip</span></a>


Nah, itulah langkah-langkah untuk membuat efek tooltip pada blog, selamat mencoba, sekian dan terima kasih.




9 komentar

Selasa, 03 April, 2012

Tutor yang bermanfaat ... makasih banyak...
Salam kenal ..

Terimakasih ricdetop atas Komentarnya di Membuat Efek Tooltip dengan CSS
Rabu, 04 April, 2012

Makasih juga mas atas kunjungannya, . .

Kamis, 05 April, 2012

top informasinya sob...

salam kenal dan di tunggu kunjungan baliknya....

Terimakasih christian tatelu atas Komentarnya di Membuat Efek Tooltip dengan CSS
Kamis, 05 April, 2012

Sip makasih juga atas kunjungannya sob.

Minggu, 10 Juni, 2012

BLOGWALKING

Terimakasih xblogskin atas Komentarnya di Membuat Efek Tooltip dengan CSS
Senin, 11 Juni, 2012

silakan blogwalking sob, tapi perlu diingat juga jangan nyepam yah, makasih udah mampir

Anonim
Kamis, 07 Februari, 2013

Mkasih kak sudah kasih tutorial nya ...

Terimakasih Anonim atas Komentarnya di Membuat Efek Tooltip dengan CSS
Kamis, 27 Juni, 2013

Contohnya mana ini gan ?

Terimakasih Blog Ardy atas Komentarnya di Membuat Efek Tooltip dengan CSS
Sabtu, 22 Maret, 2014

kunjungan perdana sob.... postingan menarik... :D

Terimakasih BASRENG-NET atas Komentarnya di Membuat Efek Tooltip dengan CSS

Posting Komentar

Silahkan berkomentar pada blog ini dengan baik dan sopan. Jadilah Top Komentator Untuk Mendapatkan Backlink Gratis!!!

 
© Copyright 2012 - Gank-Zone Blog. Powered by Blogger.com and Gank-Zone
Gank Zone Blog