Baru kemarin Blog Oto Website membahas tentang Cara Membuat Tooltip Preview Image Dengan jQuery dan kali ini kita akan membahas tentang Cara Membuat Tooltip Otomatis Semua Title.

Bagi sobat yang tidak tahu apa itu Tooltip sobat bisa membacanya di Cara Membuat Tooltip Preview Image Dengan jQuery karna kemarin saya sudah pernah membahasnya di situ.
Kali ini dalam Pembuatan Tooltip Otomatis Semua Title ini kita akan menggunakan script dari warungbebasa[dot]com. Tootlip ini akan muncul di semua title pada blog sobat.
Agar tidak berlama-lama lagi sekarang mari kita bahas Cara Membuat Tooltip Otomatis Semua Title di blog sobat.

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Edit HTML.

3. Jangan lupa Centang Expand Template Widget ➨ Bckup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template sobat cari kode <body>  Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Jika sudah ketemu sekarang sobat copy kode berikut dan paste atau letakkan di bawah kode tadi.

<script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Princexells Seyka (Princelling Saki)</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>

6. Selanjutnya sobat cari kode </body> lalu letakkan kode di bawah ini di atasnya.

</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

7. Simpan template.

Sekarang lihat sendiri hasilnya pada blog sobat.

Keterangan :
Untuk merubah warna silahkan sobat ganti warna hijau pada tahap nomer 5, untuk melihat kode warna silahkan klick disini.

Saya rasa cukup untuk kali ini semoga bisa bermanfaat!

Bagaimana apakah sobat berhasil menerapkannya di blog sobat? silahkan tinggalkan tanggpan atau komentar sobat tentang postingan atau articles di atas!

Posting Komentar Blogger Disqus

  1. ketika di save templatenya kog gagal tidak bisa di save

    BalasHapus
  2. @Yaqind Tlog d prhtikn wktu pnmptannya, sya kmrin jga mglmi kslhan krna slah mnruh antra kode <body> dan </body>

    BalasHapus
  3. oh thanks
    saya coba dulu..:D

    BalasHapus
  4. semua artikel,a bermanfaat bro,,numpang copas ya,,thx nih,,!!

    BalasHapus
  5. wah udah saya coba dan hasilnya apik gan

    BalasHapus
  6. asiiik sukses gan, udah saya coba... mksh ya

    BalasHapus
  7. All sama-sama senag bisa membantu!!! B)

    BalasHapus
  8. Gozineinfo Says :Thanks informasinya,tooltip itu otomatis deh pokoknya
    Terimakasih

    BalasHapus
  9. gan gimana caranya bwt ngubah lebar tooltipnya ..mohon petunjuknya gan \m/ \m/

    http://adagamez.blogspot.com/

    BalasHapus
  10. oke thank's gan ane coba dlu

    :-d :-d

    BalasHapus
  11. ga bisa di copy gan scriptnya

    BalasHapus
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