Plugin tooltip jQuery adalah salah satu alat yang hebat untuk menjelaskan kepada banyak pengunjung dari blog Anda. Anda dapat dengan mudah menerapkan ini ke dalam blog juga sangat mudah untuk menggunakannya.

Anda dapat menyorot beberapa kata dan menambahkan tooltip kepada mereka, bila ada pengguna melayang pada kata sebuah tooltip mulus akan muncul tepat di atas dari kata disorot dengan tooltip jQuery description.

Tooltip ini dirancang oleh Nettuts + dan saya telah membagikan ulang ini pada Helper Blogger.Now mari kita lihat bagaimana untuk menambahkannya dan menggunakannya,



Tambah Tooltip JQuery Untuk Blogger?

Seperti yang saya sebutkan di atas instalasi dan penggunaan tooltip sangat mudah, Anda hanya perlu meletakkan beberapa kode dalam template Anda, cukup ikuti langkah-langkah sederhana di bawah ini.


jQuery


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery-tooltip.js"></script>


CSS


.tip {
    width: 212px;
    padding-top: 37px;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 500;
    background: transparent url(http://4.bp.blogspot.com/-xpwFJf-vMnE/UIApQOlfT3I/AAAAAAAAFuk/n92iBaVrsR8/s1600/OW_tipTop.png) no-repeat top;
}
.tipMid {
    background: transparent url(http://2.bp.blogspot.com/-KqFH-zkCSas/UIApPH35EtI/AAAAAAAAFuc/q3HHqB-Gzus/s1600/OW_tipMid.png) repeat-y;
    padding: 0 25px 20px 25px;
}
.tipBtm {
    background: transparent url(http://3.bp.blogspot.com/-8QcOkbZfk30/UIApOOQVh-I/AAAAAAAAFuU/1c09CFr0990/s1600/OW_tipBtm.png) no-repeat bottom;
    height: 32px;
}


Pemanggil


Pada saat menulis atau mengedit postingan Anda letakkan kode berikut untuk memanggil Tooltip

<div class="tTip" title="Tambahkan Pesan Tooltip Disini">Tambahkan Text Anda Disini</div>
Dan jangan lupa untuk merubah teks yang di block merah di atas dengan teks Anda sendiri.

Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top