Trick Untuk Blogger

Anda ingin memasang tooltip. Ikuti langkah berikut ini

Log in ke blog anda
Klik Rancangan
Klik Edit HTMl
Masukkan kode berikut di atas ]]></b:skin>

div.speechbubbles{
background-color:#EDEDED; 
border:1px solid black;
position:absolute;
top:0;
z-index:100;
visibility:hidden;
line-height:1.3em;
padding:8px;
width:200px; border-radius:8px; 
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 0 10px #888888; 
-moz-box-shadow:0 0 10px #888888;
-webkit-box-shadow:0 0 10px #888888;
}

div.speechbubbles div.speechbubbles-arrow{  
border-color: transparent transparent #EDEDED transparent; 
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-19px;
left:20px;
z-index:101;
_display:none; 
}

div.speechbubbles div.speechbubbles-arrow-border{

border-color: transparent transparent black transparent; 

border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-20px;
left:20px;
z-index:101;
_display:none;}

div.downversion div.speechbubbles-arrow{ 
border-color: #EDEDED transparent transparent transparent; 

top:auto;
bottom:-19px;
}

div.downversion div.speechbubbles-arrow-border{

border-color: black transparent transparent transparent; top:auto;
bottom:-20px;
}

Masukkan kode berikut di atas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script src="http://bloekoetoek-blogonol.googlecode.com/files/speechbubbles.js"></script>

<script type="text/javascript">

jQuery(function($){ //on document.ready

     //Apply tooltip to links with class="addspeech", plus look inside 'speechdata.txt' for the tooltip markups

    $('a.addspeech').speechbubble({url:'speechdata.txt'})

})

</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

Selanjutnya Simpan Template
Selanjutnya kita menggunakan kode seperti di bawah ini

<div>

<div id="speechbubble1" class="speechbubbles">
<a href="alamat link anda di sini">judul di sini</a>
</div> /* contoh untuk link */

<div id="speechbubble2" class="speechbubbles">
<a href="#"><img src="alamat gambar anda di sini"></img></a>
</div> /* contoh untuk gambar */

<div id="speechbubble3" class="speechbubbles">
<p>isi dengan teks atau link di sini</p>
</div> /* contoh untuk tulisan */

</div>

Silahkan terapkan ke dalam posting atau letakkan di sidebar anda.
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu