Emank keren tooltip yang satu ini, Ga ada duanya, udah saya ubek-ubek banyak website tentang bouncing tooltip ga nemu yang keren kayak gini. Dateng ga diundang pulang gak dianter.... pake goyang dulu laghee he he he.
Padahal gak sengaja kena senggol eh dia nongol.... goyang dikit trus terbang dech. Bener-bener bikin penasaran. Emangnya tadi saya nyenggol apaan sih??? Itu pertanyaan waktu pertama kali sy mampir di blog nya Gubug Reyot. Karena penasaran maka dicari dech penyebabnya, eh... gak taunya sebuah link kena senggol. Hmmm gimana cara bikinnya ya???
Setelah berhasil membuatnya sesuai petunjuk dari Master Gubug Reyot, penasaran beralih pada bagaimana supaya blog sy bisa nongol di flying tooltip itu. HOREEE.... berhasil. Terbayar sudah penasaran sy terhadap flying tooltip ini. Jadi maaf kepada master gubug reyot kalau nama di tooltip sy ganti dengan nama blog saya.
Nah... buat anda yang penasaran untuk membuat flying tooltip ini silahkan mengikuti langkah2 berikut ini. Sebenarnya sama koq langkah2 seperti petunjuk di blog aslinya.
1. Login pada dashboard blog anda
2. Pilih Template > Edit HTML > Proceed.
3. Cari kode <head>
4. Untuk mempermudah pencarian, blok kode <head> kemudian pencet Ctrl + F dan paste kode <head>
5. Letakkan kode dibawah ini persis dibawah kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mytutorial-java.googlecode.com/files/EkmanTooltipTutorial.js' type='text/javascript'/>
6. Copy paste kode dibawah ini tepat diatas </body>
7. Simpan template anda.
<script type='text/javascript'>
$("..EkmanFlying a[title]").EkmanFlyingTooltip({effect: 'bouncy'});
$("..EkmanFlying img[title]").EkmanFlyingTooltip({effect: 'bouncy'});
</script>
Contoh penggunaan kode tooltip-1 :
<div class="EkmanFlying">
<a href="http://www.blogger.com/URL" title="Tuliskan teks tooltip di sini!">Teks Link</a>
</div>
Hasilnya :
Contoh penggunaan kode tooltip-2 :
<div class="EkmanFlying">Hasilnya :
<a href="jquerycssjavascript.blogspot.com/2012/10/tooltip-zigzag.html" title="Tuliskan teks tooltip di sini!"><img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYa54zAd71pLoNuVF9sx0rx7DPGGKZrVaMIBB93kYq8hoI5gwz0zUIm_T8MGv_AgoaPc007M0fnZlhh56q13kk6pZvLbp1vw5qn4DQAvVNvfk5wtHuiujCzFJZHMOmBeslAZuRJ_lycSc/s220/36_2_34.gif" width="100" /></a>
</div>
<div class="EkmanFlying">
<img height=".." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYa54zAd71pLoNuVF9sx0rx7DPGGKZrVaMIBB93kYq8hoI5gwz0zUIm_T8MGv_AgoaPc007M0fnZlhh56q13kk6pZvLbp1vw5qn4DQAvVNvfk5wtHuiujCzFJZHMOmBeslAZuRJ_lycSc/s220/36_2_34.gif" title="Tuliskan teks tooltip di sini!" width=".." />
</div>
Tooltip untuk seluruh conten menurut Petunjuk asli dari gubug reyot seperti ini :
<div class="GRzigzag">
Letakkan kode <br />
<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 <br />
<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 height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYa54zAd71pLoNuVF9sx0rx7DPGGKZrVaMIBB93kYq8hoI5gwz0zUIm_T8MGv_AgoaPc007M0fnZlhh56q13kk6pZvLbp1vw5qn4DQAvVNvfk5wtHuiujCzFJZHMOmBeslAZuRJ_lycSc/s220/36_2_34.gif" width="100" /></a></div>
</div>
Sekian dulu pembahasan tentang flying tooltip, semoga bermanfaat.
{ 0 comments... read them below or add one }
Post a Comment