CARA MENAMBAH KETERANGAN PADA SEBUAH LINK

Post ini berfungsi untuk menambah keterangan pada sebuah link. Tampilan keterangan tersebut akan muncul jika link ddisorot oleh mouse. Cara menerapkannya 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

1. Masuk ke Blogger dengan ID anda.
2. Pilih Rancangan bagian Edit HTML
3. Cari kode ]]></b:skin>
4. 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; }

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT97nWcAhXu4EmkPCZtlXEkykQAlkl2EC02IwmsAxiyOISqvns8MdGTdWfE2XvdVtwAw0mQtpGGZn3gyttX7FIeEKoPVBoCSNCd9Pwp7X9CUFjuLkBzqV6b_0dk6MWD-reJCurwHLA88M/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6J1lie5DMoq5UVJuTBLppHL6D6UNbjTOHplVwPYih0MgaD5tY8QrCG307hh8P7yCLgeiSW07oodhBe9rdWM5DvLfRns6hUUs80oSIFO7YP2lIEWNuPTgwk0FAd9ujGuxMVp2I3ByBaY/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT97nWcAhXu4EmkPCZtlXEkykQAlkl2EC02IwmsAxiyOISqvns8MdGTdWfE2XvdVtwAw0mQtpGGZn3gyttX7FIeEKoPVBoCSNCd9Pwp7X9CUFjuLkBzqV6b_0dk6MWD-reJCurwHLA88M/) no-repeat bottom;
}


5. Klik Simpan Template
6. 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 :

1. Pilih Rancangan bagian Elemen Halaman.
2. Klik Tambah Gadget.
3. Pilih HTML/JavaScript.
4. 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>


5. Klik tombol Simpan.
6. 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://muhammadfarizazri.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...!!!

Share this

Unknown