Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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="http://3.bp.blogspot.com/_7qeJ6kE1dEI/SoR5FBa4SPI/AAAAAAAAAAs/9V01v0UuNqE/S220/36_2_34.gif" width="100" height="90" /></a>
</div>

Dalam tag img :

Contoh penggunaan kode tooltip-3 :
<div class="GRzigzag">
<img src="http://3.bp.blogspot.com/_7qeJ6kE1dEI/SoR5FBa4SPI/AAAAAAAAAAs/9V01v0UuNqE/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="http://3.bp.blogspot.com/_7qeJ6kE1dEI/SoR5FBa4SPI/AAAAAAAAAAs/9V01v0UuNqE/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 «

19 komentar:

  1. akang, aku iri lihat tootip panjenengan di blog ini. apik!!
    aku boleh minta css & javascriptnya gak??

    kirim ya kang, indo_ina18@yahoo.co.id
    tak tunggu lho...
    matur nuwun sanget sak derengipun...........

    BalasHapus
  2. wah tootip nya bagus kang

    boleh minta kode css sama js nya gak?
    buat perindah blog aku kang
    kirim ke sini kang kalau boleh malang.injection@yahoo.com

    aku udah pakek yang energy power saving dari akang bagus banget kang makasih atas share nya

    http://keyremover32.blogspot.com

    BalasHapus
  3. yang ini juga ga keluar tooltipnya mas.... pemasanganya juga sudah sesuai dengan petunjuk diatas... mohon di cek blog saya trus kesalahanya dimana ?
    terima kasih...
    www.aandfx.blogspot.com

    BalasHapus
  4. kang kok tidak bisa ya kang terus file ziddunya sudah di hapus gitu kang ...??
    gimana kang caranya aku pengen kayak punya akang..??pliz kang buatin ....??

    BalasHapus
  5. ziddunya ga bisa di download,reupload donk tolong

    BalasHapus
  6. zigzaglap-tooltip 'dah update 08 jan 2012. Update posting lain terus jalan. Saat ini bru aku kerjakan yg bln maret 2010. Buih... melelahkan sekali update demo yg kodenya pada hilang!!! Sabar... sabar ... semuanya harap pada sabar! Hei ...siapa nih yg mo bantu update?!

    Salam ....

    gubhugreyot

    BalasHapus
  7. Sini bang aku bantu hehehe, izin MengCopy gan,

    BalasHapus
  8. minta izin aku pasang di blog ku kang...!! tooltip ini hanya khusus untuk template minima ya kang cos template ku yang dulu ngak bisa ..plis corecsi ke blog ku ..karinafotocollection.blogspot.com

    BalasHapus
  9. kang ,,, kasi demo dunk.....
    masih binggung

    BalasHapus
    Balasan
    1. Lha demonya itu .. tuh... tooltip yang dipakai di blog ini! Contohnya tooltip nyang di "Login ke Blogger". Klo mo banyak demo buka aja "Special Tutorials" dan semua link di menu sebelah kiri halaman. Oye?!

      Hapus
    2. kang,,, punya saya kok ga bisa dipasang tooltip zigzag nya....
      padahal udah sesuai pentunjuk diatas....
      apa karna beda template ???

      silahkan cek blog saya
      http://mr-cnblue.blogspot.com/#axzz1rW2QMZ5A

      Hapus
    3. Ini yang jadi sebab tooltip nggak mo kerja:
      <script src="http://andreykusanagi.googlecode.com/files/pop-up.js" type="text/javascript"></script>
      Hapus scriptnya!
      Blog kamu juga terlalu banyak menggunakan jQuery. Ada jquery.js, jquery.1.3.2. ,jquery.1.4 ,jquery.1.5 dan jquery.1.6
      Satu blog cukup 1 jquery saja dan letakkan di bawah <head>

      Hapus
    4. oh ya bener....
      terlalu banyak jquery...
      makasih kang ^,^
      by : http://mr-cnblue.blogspot.com/#axzz1rW2QMZ5A

      Hapus
  10. kang... bisa buat tooltip zigzagnya auto link ga ???
    kalau satu2... merepotkan...
    kalau auto kan lebih cepet... hehe :)

    BalasHapus
  11. maaf gan saya sudah copy langkah1-2 bahkan langah ke 3 tapi kok tooltipnya gak bisa terbang?? mlm muncul gambar ketawa...
    maklum saya kurang paham

    BalasHapus
  12. kaka, ni bisa pake jquery 1.7.1 ga? cz aq pake threaded comment n' harus pake jquery 1.7.1.

    BalasHapus
  13. ewoh kabeh bang...!!
    nang sing dicedek'i cursor trus mluncur kesamping warna biru,iku yo'Opo ngawene...??

    BalasHapus

 
GR | Edited by | gubhug reyot