Cara Membuat Tooltip

Kali ini kita membahas masalah tooltip, hampir sama dengan bahasan Menu Pop Up yang saya posting sebelumnya. Saya kira kawan-kawan semua sudah mengetahui apa itu tooltip. Kalau belum silahkan lihat demonya di bawah ini. Oh ya...script ini dikembangkan oleh dynamic drive. silahkan ikuti langkah berikut.

• Log in ke blog anda
• Klik Rancangan
• Klik Edit HTML
• Tempatkan Kode CSS berikut di atas kode ]]></b:skin> 

.stickytooltip{ box-shadow:5px 5px 8px #818181;  -webkit-box-shadow:5px 5px 8px #818181;  -moz-box-shadow:5px 5px 8px #818181;  display:none;  position:absolute;  display:none;  border:5px solid black;  background:white;  z-index:3000}
.stickytooltip .stickystatus{ background:black;  color:white;  padding-top:5px;  text-align:center;  font:bold 11px Arial}

• Selanjutnya masukkan kode berikut di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/stickytooltip.js' type='text/javascript'></script>

Catatan Penting

1. Kalau anda sudah memasang kode berwarna biru dalam template anda, maka kode di atas tidak perlu disertakan. Masukkan saja kode berwarna merah
2. Guna mendukung kelancaran script ini, lebih baik anda menggunakan script yang anda simpan di penyimpanan online anda sendiri. Download scriptnya di sini.
3. Kalau anda belum paham cara menyimpan dan mengambil link script dipenyimpanan online silahkan baca di sini

Cara Membuat Widget dengan Tooltip

• Klik Rancangan lagi
• Klik Tambah Gadget
• Pilih HTML/JavaScript
• Masukkan Kode berikut ke dalamnya

<a data-tooltip="sticky1" href="http://blogonol.blogspot.com/"><b>BLOGONOL</b></a> /* silahkan ganti dengan tulisan yang anda inginkan */

<div class="stickytooltip" id="mystickytooltip">
<div style="padding: 5px;">

<div class="atip" id="sticky1" style="width: 320px;"> /* lebar kolom tampilan, silahkan sesuaikan dengan kebutuhan anda */
<img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/cooltext491101786.gif" /> /* silahkan ganti dengan alamat gambar anda. kalau mau tanpa gambar hapus saja */

Terima Kasih telah berkunjung. Semoga semua informasi berguna dan membuat anda senang berada di sini.</div> /* silahkan ganti dengan tulisan yang anda inginkan. kalau mau tanpa tulisan hapus saja */

</div>

Cara Menggunakan di Halaman Posting

• Masuk ke Posting Area atau klik Posting
• Klik Edit HTML di sebelah kanan atas halaman posting anda (samping Compose)
• masukkan kode di atas ke dalamnya

Jika anda ingin menambah beberapa tooltip, silahkan copy dan paste kode di atas. Lalu ganti kode "sticky1" menjadi "sticky2". Contohnya seperti di bawah ini. (perhatikan kode merah)

<div class="atip" id="sticky1" style="width: 320px;">

<img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/cooltext491101786.gif" /><br/>

Terima Kasih telah berkunjung. Semoga semua informasi berguna dan membuat anda senang berada di sini.</div>

</div>

<div class="atip" id="sticky2" style="width: 320px;">

<img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/cooltext491101786.gif" /><br/>

Terima Kasih telah berkunjung. Semoga semua informasi berguna dan membuat anda senang berada di sini.</div>

</div>

<div class="atip" id="sticky3" style="width: 320px;">

<img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/cooltext491101786.gif" /><br/>

Terima Kasih telah berkunjung. Semoga semua informasi berguna dan membuat anda senang berada di sini.</div>

</div>

• Simpan Template 
• Selesai dan lihat hasilnya
• Selamat mencoba dan sukses selalu
  

"keep spirits and do the best"