Cara Membuat Balon Tooltip

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;
    }


Source: Cara Membuat Balon Tooltip - blogonol http://blogonol.blogspot.com/2011/02/cara-membuat-balon-tooltip.html#ixzz1HnrWu1Ef
Under Creative Commons License: Attribution

-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

Posted in: Belajar Nge-Blog