AYAH BUNDA 
CARA MENAMBAH KETERANGAN PADA SEBUAH LINK
Berbagi Ilmu dan Pengalaman Sebuah link akan lebih terlihat mengesankan jika link tersebut ketika disorot mouse akan menampilkan keterangan tentang link tersebut. Untuk contoh silahkan anda sorot banner EPG Studio diatas atau boleh juga pada link ini :Cara menampilkannya sangat mudah, anda hanya perlu menambahkan kode CSS pada template blog anda daan menambahkan kode pada link yang akan ditambah keterangan. Jadi ada dua langkah yang harus anda lakukan.
LANGKAH PERTAMA
- Masuk ke Blogger dengan ID anda.
- Pilih Tata Letak.
- Pilih Edit HTML.
- Cari kode
]]></b:skin> - Copy kode CSS dibawah ini, kemudian paste tepat diatas kode
]]></b:skin>
/*---------- Keterangn link -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
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:0px; left:0;
padding: 15px 0 0 0;
width:200px;
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: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
} - Klik Simpan Template
- Selanjutnya ikuti langkah kedua.
LANGKAH KEDUA
untuk langkah kedua, silahkan anda pilih dulu link mana yang akan ditambahkan keterangan . Anda bisa menempatkannya pada sidebar, juga dapat ditambahkan pada postingan.
Untuk link pada sidebar, ikuti langkah-langkahnya :
- Pilih Tata letak.
- Pilih Elemen Halaman.
- Klik Tambah Gadget.
- Klik tanda positif (+) pada HTML/JavaScript.
- Masukkan kode link yang ingin anda tampilkan seperti contoh dibawah ini :
<a href="Isi dengan sebuah alamat link tujuan" class="tt">Link yang ingin ditampilkan<span class="tooltip"><span class="top"></span><span class="middle">Teks yang akan tampil ketika link disorot mouse</span><span class="bottom"></span></span></a> - Klik tombol Simpan.
- Lihat penampilan pada blog anda.
Untuk menambahkan pada postingan, caranya sama. Hanya yang perlu anda ingat, saat membuatnya harus pada mode Edit HTML bukan pada Mode Compose/Tulis.
Jika anda suka menampilkan link berupa sebuah image, anda tinggal menambahkan alamat sebuah image seperti contoh dibawah ini :
<a href="http://epg-studio.blogspot.com/" class="tt"><img src="http://1.bp.blogspot.com/_1j80TgNqd_8/SaESR56aNhI/AAAAAAAAAnY/3YSBhu-aHLU/S220/LOGO+EPG+1.jpg" /><span class="tooltip"><span class="top"></span><span class="middle">Berbagi Ilmu dan Pengalaman</span><span class="bottom"></span></span></a> |
Selamat mencoba, semoga bermanfaat...!!!
EPG STUDIO
