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
LANGKAH PERTAMA
- Masuk ke Blogger dengan ID anda.
- Pilih Rancangan bagian 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; }
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/AVvXsEhtrFQSZdJdG1paGikwzhyphenhyphenOD-FkH0c93iPKkYfIRxsdyx13w7_QiyrKxnS1ludp9WkVf1sywmCuIc-w6nIHq8XalRCt2dERWsyGlmj30i-VGnnNq2q_RnqaHZYurc82AUVswrocmrMY2Ng/) no-repeat top;}a.tt:hover span.middle{display: block;padding: 0 8px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGCsdkzsADlPFY4xBSv_Hvt2vOJ3fIsUkvP2lLP0Gy4q8FxnjYOy-JFFthDQBjndvPy3XPzZjUVSAbYpe8aWSTbPC3La-C-4JsfST5z5j5wKojP4weJTlX_zDqsDDWLwEy72rdy_g6xI/) repeat bottom;}a.tt:hover span.bottom{display: block;padding:3px 8px 10px;color: #548912;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtrFQSZdJdG1paGikwzhyphenhyphenOD-FkH0c93iPKkYfIRxsdyx13w7_QiyrKxnS1ludp9WkVf1sywmCuIc-w6nIHq8XalRCt2dERWsyGlmj30i-VGnnNq2q_RnqaHZYurc82AUVswrocmrMY2Ng/) no-repeat bottom;} - Klik Simpan Template
- Selanjutnya ikuti langkah kedua.
- Pilih Rancangan bagian Elemen Halaman.
- Klik Tambah Gadget.
- Pilih 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.
<a href="http://dewa-pro.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
TERIMAKASIH
0 ƘǿmєиtąЯ: