Nih satu lagi komandan dapet ilmu dari komandan saya kang rohman.
trik kali ini tidak terlalu berat untuk di terapkan di blog anda karena ini 99.9% menggunakan teknik CSS.
Mau tahu apa yang akan saya berikan ke anda sekarang ini?
Jadi seperti ini penjelasannya.
Anda bisa memberi keterangan singkat pada suatu link dan keterangan tersebut akan muncul dengan gaya css yang begitu cantik.
Kita mulai aja dengan persyaratan
1. Login di Blogger
2. Tata Letak
3. Edit HTML
Cari kode seperti ini ]]></b:skin>
Jika sudah ketemu taruh kode di bawah ini tepat di atas kode tersebut.
/*---------- bubble tooltip -----------*/
a.tt{ position:relative;
z-index:24 ;
color:#3 CA3 FF;
font-weight:bold;
text-decoration:none; }
a.tt span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25 ; color: #aaaaff;
background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0 px; left:0 ;
padding: 15 px 0 0 0 ;
width:200 px; color: # 993300 ;
text-align: center; filter: alpha(opacity:90) ;
KHTMLOpacity: 0.90 ;
MozOpacity: 0.90 ;
opacity: 0.90 ; }
a.tt:hover span.top{
display: block;
padding: 30 px 8 px 0 ;
background: url(http://lh3. ggpht.com/ _pt7 i0 nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ ol5 o6 rqB5 Qw/bubble_thumb.gif) no-repeat top; }
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8 px;
background: url(http://lh3. ggpht.com/ _pt7 i0 nbIOCY/SzIcrZtXeiI/AAAAAAAACes/ f3 SeQ8 tdw5 A/bubble_filler_thumb%5 B1 %5 D.gif) repeat bottom; }
a.tt:hover span.bottom{ display: block;
padding:3 px 8 px 10 px;
color: # 548912 ;
background: url(http://lh3. ggpht.com/ _pt7 i0 nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ ol5 o6 rqB5 Qw/bubble_thumb.gif) no-repeat bottom; }
Jika sudah jangan lupa untuk menyimpan template anda. Klik simpan.
Jika ingin efek bubble tooltips'nya keluar saat di sorot dengan mouse maka anda hanya perlu menambahkan sedikit kode Kode html pada link yang ingin ada efek bubble tooltips, berikut contohnya
<a href="linktujuananda.co.id" class="tt">text link<span class="tooltip"><span class="top"></span><span class="middle"></span>Keterang / pesan yang akan muncul pada link</span><span class="bottom"></span></span></a>
jadi setiap anda ingin menampilkan efek bubble tooltips tinggal menambahkan seperti kode di atas tersebut. Gimana mudahkan and selamat mencoba.
Posting Komentar