Memasang Tooltips di Blog Seri 2

Sudahkah mengikuti RUANG SAHABAT blog ini ?
Kalau belum, ikuti terlebih dahulu .....
sebelum anda menggunakan tutorial ini.

Saya yakin anda semua telah mengetahui apa itu Tooltips

sekaligus kegunaannya. Tooltips yang satu ini dibumbui

dengan efek hollover dan moz border radius sehingga

membuat semakin menarik tampilannya seperti yang anda

lihat pada gambar di atas. Apakah anda ingin mencoba ?

Silahkan ikuti langkah memasangnya sebagai berikut :

1.   Masuk ke Edit HTML.

2.   Sebelumnya jangan lupa untuk selalu memback-up
      template anda guna berjaga-jaga bilamana
      terjadi kesalahan dalam penempatan kodenya.

3.   Carilah kode </head>

4.   Di atas kode </head> ini, letakkanlah kode
      JavaScript sebagai berikut :

<script src='http://h1.ripway.com/syamsudin/Tooltip-2A.js' type='text/javascript'></script><br /> <script src='http://h1.ripway.com/syamsudin/Tooltip-2AA.js' type='text/javascript'></script>

5.   Kemudian cari lagi kode body{
      Letakkan kode berikut di bawahnya.
      Pratinjau terlebih dahulu, setelah Tooltipsnya
      sudah terlihat, simpanlah template anda.

body div#toolTip{position:absolute;z-index:1500;min-width:220px;background:#FF0000;border:7px double #FFFF00;text-align:left;min-height:2em;-moz-border-radius:10px #FF0000;-webkit-border-radius: 10px #FF0000;-webkit-box-shadow: #FF0000 0px 1px 12px;-moz-box-shadow: #FF0000 0 1px 12px;padding:5px}<br /> body div#toolTip p{color:#FFFFFF;font:12px verdana,arial,sans-serif;font-weight:300;margin:0;padding:0}<br /> body div#toolTip p em{display:block;margin-top:3px;color:#FFFF00;font-style:normal;font-weight:300}<br /> body div#toolTip p em span{font-weight:300;color:#FFFFFF}

ANDA DAPAT MENGUBAH :

Warna backgroundnya pada kode :

background:#FF0000;

Ukuran, jenis & warna border pada kode :

border:7px double #FFFF00;

Warna & ukuran blur / bayangan border pada kode :

-moz-border-radius:

-webkit-border-radius:

-webkit-box-shadow:

-moz-box-shadow:

Warna & ukuran huruf baris pertama pada kode :

color:#FFFFFF;font:12px

Warna huruf baris kedua pada kode :

color:#FFFF00;

KETERANGAN :

Agar Tooltips membaca link anda, gunakan pemakaian
kodenya seperti contoh yang berikut :

<a title='Teks Tooltips di sini' href='URL link'>Keterangan link</a>

CATATAN :

Bila anda menemukan kode <br />
dalam kode-kode di atas, hilangkanlah kode tersebut
lalu turunkan ke bawah kode yang setelahnya.

( hal ini berlaku untuk semua kode-kode
tutorial di blog ini agar kodenya dapat berfungsi
atau bekerja sebagaimana mestinya )

Selamat mencoba, good luck!