Tambah Tooltip jQuery Untuk Blogger

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,

Lihat Demo

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbL9SD3E2wVyRyZJCGq9aATsTn3tgheOxHi80Tn4XatqZxxYgwfP1tvLXYwonAzIKzKH9SDMeUhkywx5_RuEwJZBcJm3o5w_Vpa3n7yJNNiP5TKIJBRfJsaJnSrMMWaB4npby9qSY6hg/s1600/OW_tipTop.png) no-repeat top;
}
.tipMid {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvA0uig35jt4cRH-MRCUxF8Pis9YiH4y3tF6_bdNvVF2-PDaBhYq3Oz60Szw4uofp4zybOfK8NUaxHPivfn_WEJ_G8A6cT0DYMViVBpFZIlF2rCPBLe0eUSfa0zw-CSG5YA-vqNbB2ig/s1600/OW_tipMid.png) repeat-y;
    padding: 0 25px 20px 25px;
}
.tipBtm {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm8GPpX0q3efSHVO0pEZNELWq6hfjyCGQbEEWqzAD8Jp4zMbChr3BOEN9Ut9p-AplX6sGGcEQ_RpCM9TymeOy9XPRAdoDwTCsdmvvsuazUB9iersAEH6nSO0h6p7Lyw3_wdW8XS9OeHg/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.