Membuat Javascript-jQuery ZigZagLap Tooltip

Tooltips! Ah ..., aku sungguh sangat menyukai ini. Sebuah desain yang tidak saja bermanfaat bagi pengunjung, akan tetapi dia juga merupakan sebuah "barang berharga" yang mampu membuat sebuah blog terlihat lebih cantik, lebih keren serta mampu mencerminkan sebuah kesungguhan dalam "pribadi pengelola blog". Maaf..., itu hanya penilaian subyektif dari aku. Yang jelas bahwa toolttip memang menambah "gaya" dan "penampilan". Rasa suka akan tooltip ini membuat aku mencoba menuangkannya dalam beberapa posting. Yah ..., moga-moga saja memberi manfaat bagi para sobat blogger. Hanya perlu aku sampaikan bahwa posting "javascript tooltip-4" yang sudah aku terbitkan beberapa bulan yang lalu "tidak diperuntukkan bagi blogspot". E ..., barangkali saja ada yang ngeblog di luar blogspot dan tertarik untuk menggunakannya. O..., ya..., sebagai pelengkap koleksi tooltip, aku punya sebuah tooltip yang sangat menarik yang pada saat ini juga masih aku gunakan (23-Okt-10), mungkin sampeyan tertarik untuk memanfaatkan sebagai pelengkap blog. Silahkan coba untuk dibuat.

Javascript ZigZagLap Tooltip


Javascript-1:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://gubhugreyot-javascript.googlecode.com/files/GRzigzaglaptooltip.js" type="text/javascript"></script>
Javascript-2:
<script type="text/javascript">
$(".GRzigzag a[title]").myGRzigzagtips({effect: 'bouncy'});
$(".GRzigzag img[title]").myGRzigzagtips({effect: 'bouncy'});
</script>

Cara Membuat ZigZagLap Tooltip

  1. Login ke blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
  6. Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
  7. Copy dan pastekan Javascript-1 di bawah kode <head>.
  8. Cari kode </body>.
  9. Copy dan pastekan Javascript-2 di atas kode </body>.
  10. Klik Simpan Template (Save Template).

Catatan :

Jika anda sudah menggunakan jQuery yang sama dalam blog, silahkan gunakan javascriptnya saja. Dalam satu blog hanya perlu satu jQuery saja!

Cara Menggunakan Kode tooltip

Tooltip akan bekerja dengan memanfaatkan title yang berada dalam "tag a" atau "tag img". Sampeyan tak perlu menambahkan terlalu banyak kode lain. Satu kode tambahan yang di butuhkan adalah "tag DIV" yang menjadi wadah bagi "tag a" ataupun "tag img". Tooltip cantik ini bisa bekerja dengan baik di semua bagian blog, seperti di sidebar ataupun dalam posting. Cara menuliskan kodenya sebagai berikut:

Dalam tag a (link berbentuk teks dan gambar):

Contoh penggunaan kode tooltip-1 :
<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!">Teks Link</a>
</div>
Contoh penggunaan kode tooltip-2 :
<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7qsEA98ve29SZ_BqWBuLN5ZtFqbz7q9CNv2bBj3JnouWlXwUHBgoEJoxxEWpuL0Sof_aHC-ePtj20hz3WZjKmL_LZUz5__OimSeeW5_dwhURadevF1YU9PK4vJgnCwUPUnEJBo8z4J_Q/s220/36_2_34.gif" width="100" height="90" /></a>
</div>

Dalam tag img :

Contoh penggunaan kode tooltip-3 :
<div class="GRzigzag">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7qsEA98ve29SZ_BqWBuLN5ZtFqbz7q9CNv2bBj3JnouWlXwUHBgoEJoxxEWpuL0Sof_aHC-ePtj20hz3WZjKmL_LZUz5__OimSeeW5_dwhURadevF1YU9PK4vJgnCwUPUnEJBo8z4J_Q/s220/36_2_34.gif" width=".." height=".."  title="Tuliskan teks tooltip di sini!" />
</div>

Tooltip untuk seluruh content :

Tooltip ini dapat sekaligus berfungsi bagi seluruh kontent berupa link dalam area tertentu (misalnya box posting) atau keseluruhan blog.
Contoh penggunaan kode tooltip-4 :
<div class="GRzigzag">
Letakkan kode <div class="GRzigzag"> sebagai tag pembuka dan isikan seluruh konten berikut link, baik berupa tek link ataupun image link. Anda bebas menggunakan link dalam jumlah tak terbatas di antara kode <div class="GRzigzag"> dan </div> Cobalah ini sebagai contoh setelah anda menyimpan javascript dalam template. Anda bisa mencoba di box posting maupun melalui Add a Gadget.<br />
<a href="http://gubhugreyot.blogspot.com" title="Panduan dan tutorial blogger terlengkap. Dapatkan berbagai trik dan tip termudah untuk memodifikasi template, pasang widget, tooltip ... ">Tutorial, tips & trik blogger GR</a>
Setelah link di atas, anda masih bisa menempatkan link lain di bawahnya. Silahkan tambah sebanyak yang anda butuhkan. Ya ... hingga tetes terakhir.... ha ..... <br />
<a href="http://gubhugreyot.blogdetik.com" title="Gambar spesial buat anda. Silahkan simpan buat bantal tidur!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7qsEA98ve29SZ_BqWBuLN5ZtFqbz7q9CNv2bBj3JnouWlXwUHBgoEJoxxEWpuL0Sof_aHC-ePtj20hz3WZjKmL_LZUz5__OimSeeW5_dwhURadevF1YU9PK4vJgnCwUPUnEJBo8z4J_Q/s220/36_2_34.gif" width="100" height="90" /></a><br /≶
Sudah dua link terpasang di atas, berupa teks link d an image link. Silahkan anda tambah sendiri di bawahnya. Yah ... anda bisa coba pasang lagi 100 buah link sebagai koleksi sekaligus biar ada lemburan!
Ha... ha... ha....<br />
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


Update » Jemuah    KLIWON, April, 06, 2012

» Happy Blogging - gubhugreyot «

Comments

Post a Comment