Membuat Tooltip Untuk Setiap Link

Kelebihan dari tooltip ini yaitu secara otomatis akan muncul pada setiap link, tetapi hanya menampilkan Alamat URL saja, kecuali jika link tersebut sudah memiliki title sebelumnya, maka secara otomatis title tersebut akan ditampilkan juga.

Sebenarnya kita juga bisa menampilkan text untuk Tooltip ini, dengan cara manual kita hanya perlu menambahkan title="" pada setiap link yang akan kita berikan title.

Contoh:
[<a href="http://caprt3a.blogspot.com" title="eBook si Ugi">eBook si Ugi</a>]

[eBook si Ugi]

dan yang berikut inplementasi pada sebuah gambar:


(Letakan cursor pada Gambar)

Atau sentuhlah saya Disini agar teman-teman semua dapat melihat Contoh Tooltip Untuk Setiap Link Disini

Untuk membuat tooltip ini teman-teman harus login dulu ke blogger, dan lanjut kan dengan mengikuti langkah-langkah dibawah ini,

• Langkah Pertama:

Simpan CSS berikut kedalamtemplate, tepatnya diatas kode ]]></b:skin>

Kode CSS Tooltip Untuk Setiap Link:

/*  Tooltip Untuk Setiap Link->>start */
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 Untuk Setiap Link*/


]]></b:skin>

• Langkah Kedua:

Lalu letakan Javascript dibawah ini tepat diatas kode: </head>

Javascript Tooltip Untuk Setiap Link:

<script src='https://sites.google.com/site/archivesiugi/javascr/Tooltiplink.js' type='text/javascript'/>
<script src='https://sites.google.com/site/archivesiugi/javascr/tooltipURL.js' type='text/javascript'/>

Simpan templet, selesai dan lihat hasilnya,,,!!!