Membuat Tooltip Untuk Setiap Link Blogger

Bismillah ... Membuat tooltip untuk link pada blogger, itulah topik yang akan saya jelaskan sekarang. Jika sebelumnya saya telah menjelaskan cara membuat tooltip pada blogger yaitu :

** Membuat Balloon Tooltip pada Link Blog
** Membuat Balloon Tooltip dengan CSS3

Bagi yang belum membaca artikel sebelumnya silahkan klik aja link diatas. Untuk tooltip kali ini sungguh mempunyai kelebihan yaitu secara otomatis akan muncul pada setiap link yang ada pada blog kita. Namun tooltip ini hanya menampilkan Alamat URL dari suatu link. Untuk contoh, silahkan lihat gambarnya dibawah ini :

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :



Untuk membuat tooltip ini kalian harus login dulu ke blogger kalian, setelah itu silahkan baca artikelnya dibawah ini:

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

/* start Tooltip blogger Azis Lamayuda*/
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 Azis Lamayuda*/

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 kalian dan Lihat hasilnya

Semoga bermanfaat ...