Home » » Cara Menambahkan Keterangan Pada Sebuah Link

Cara Menambahkan Keterangan Pada Sebuah Link




Post ini berfungsi untuk menambah keterangan pada sebuah link. Tampilan keterangan tersebut akan muncul jika link disorot 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/AVvXsEg5jkgY3T3wiyawf3tOg36Zz8Ms9WiJD5hzodESSpLY6Pp-t3X7meebiEU4GiMGtPB2-bVtXkKiqb7Lq08TjT3hr_ff13l9f1zhV0dwTngfSxGE_iHamSDFRN9YDDIgIzHHIS9QNqOTKBs/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWldrkCl9D_7Mk3rc9E0J-dP5IT1GdLY3fvds5v7S7JF8xspNQaJJ6V4ka3BN35j-2YS6Ano0xe_Gz-SBNcAeM6NWh4PT9EvXSbR2l2KQaYhLQEyv9aL5vxPipSXXmKuXQwAt-NnJn7Xk/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5jkgY3T3wiyawf3tOg36Zz8Ms9WiJD5hzodESSpLY6Pp-t3X7meebiEU4GiMGtPB2-bVtXkKiqb7Lq08TjT3hr_ff13l9f1zhV0dwTngfSxGE_iHamSDFRN9YDDIgIzHHIS9QNqOTKBs/) 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://www.3xploration.co.cc/" 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>

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .