Memasang Tooltip Pada Link di Blog

Selasa, 25 Januari 2011

Memasang Tooltip Pada Link di Blog

Diposting oleh ayo Indonesia

Pada postingan sebelumnya saya sudah menjelaskan bagaimana kita memasang baloon tooltip pada kata atau kalimat tertentu. Bagaimana untuk memasangnya pada setiap link? Nah, itu pembahasan kali ini yaitu cara memasang tooltip pada link di blog. Jadi setiap link yang ada di dalam postingan jika cursor kita arahkan ke link tersebut akan muncul tooltip di bawahnya. Untuk pengertian tooltip sendiri sudah saya jelaskan pada postingan sebelumnya, jadi saya tidak perlu mengulangi lagi, bagi temen-temen yang belum membaca bisa dibuka dulu itu artikelnya.

Untuk membuat tooltip ini anda bisa ikuti langkah-langkah berikut :

1. Login ke Blogger anda
2. Pilih Rancangan
3. Pilih EDIT HTML (centang Expand template widget)
4. Sekarang simpan CSS berikut diatas kode ]]></b:skin>

/* start Tooltip blogger Download Disini*/
body div#toolTip {
position:absolute;
z-index:1000;
min-width:150px;
background:#000000;
border:2px double #E80101;
text-align:left;
padding:5px;
min-height:1em;
-moz-border-radius:5px;
}
body div#toolTip p {
margin:0;
padding:0;
color:#ccc;
font:11px/12px trebuchet MS,arial,sans-serif;
font-weight:bold;
}
body div#toolTip p em {
display:block;
margin-top:3px;
color:#fff;
font-style:normal;
font-weight:normal;
}
body div#toolTip p em span {
font-weight:bold;
color:#fff;
}
/* End Tooltip blogger Download Disini*/

4. Sekarang simpan script berikut diatas kode </head>

<script src='http://milikazis.googlecode.com/files/tooltipURL.js' type='text/javascript'/>
<script src='http://milikazis.googlecode.com/files/Tooltipz33s.js' type='text/javascript'/>

5. Simpan template dan anda bisa lihat hasilnya.

Cukup itu dulu penjelasannya, jika ada yang kesulitan temen-temen bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat.