Cara Menambahkan Tooltip jQuery Untuk Blogger

Plugin tooltip jQuery adalah alat yang hebat untuk menjelaskan banyak dari sebuah word.You tunggal dapat dengan mudah menerapkan ini dalam blog Anda juga itu adalah sangat mudah untuk use.You dapat menyoroti beberapa kata dan menambahkan tooltip kepada mereka, ketika setiap melayang pengguna pada kata sebuah tooltip halus akan muncul tepat di atas dari kata disorot dengan tooltip jQuery description.This Anda dirancang oleh Nettuts + dan saya telah telah berbagi ulang pemutakhiran itu pada Helper Blogger.Now mari kita lihat bagaimana untuk menambahkannya dan menggunakannya,

Live Tooltip Demo

Cara Menambahkan 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 sederhana di bawah ini.

1. Menambahkan Script Tooltip

1. Pergi ke Blogger Dashboard> Template
2. Download salinan template Anda
3. Klik pada Edit HTML
4. Hit Lanjutkan tombol
5. Cari untuk di bawah kode dalam template Anda                                                                                   

</head>

 

Tambahkan Kode ini Tepat di atas nya




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

<script type="text/javascript" src="http://code.helperblogger.com/jquery-tooltip.js"></script>

 

Catatan - Jika Anda telah menambahkan sebuah plugin jQuery untuk blog Anda maka jangan tambahkan baris pertama dari kode di atas.  




2. Menambah Gaya Tooltip 

Temukan kode Di Bawah ini dalam template Anda, 

]]></b:skin

Tambahkan Kode ini Tepat di atas nya




.tip {

    width: 212px;

    padding-top: 37px;

    overflow: hidden;

    display: none;

    position: absolute;

    z-index: 500;

    background: transparent url(https://lh6.googleusercontent.com/-0KM2ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR8/s1600/hb_tipTop.png) no-repeat top;

}

 

.tipMid {

    background: transparent url(https://lh4.googleusercontent.com/-Vu0rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M6hXn5zozh4/s1600/hb_tipMid.png) repeat-y;

    padding: 0 25px 20px 25px;

}

 

.tipBtm {

    background: transparent url(https://lh3.googleusercontent.com/-fcuks1eGyhM/UALZXjVS6CI/AAAAAAAACmQ/GZF8z7d7S4c/s1600/hb_tipBtm.png) no-repeat bottom;

    height: 32px;

}

 

 

 

3. Menggunakan Tooltip ini

Jika Anda ingin menambahkan tooltip dalam posting blogger, kemudian pergi ke tab Edit HTML dan menambahkan kode di bawah ini di dalamnya.   

<div class="tTip" title="Add Tooltip Message Here">Add Your Text Here</div>

 

• Ganti Add Tooltip Message Here dengan pesan yang ingin ditampilkan dalam tooltip.
• Ganti Add Your Text Here dengan teks yang ingin ditampilkan tooltip.

Harap Anda menyukainya :)