Cara membuat Tooltip

Tooltip adalah sebuah tool yang melekat pada sebuah link dan berfungsi memberikan keterangan atau petunjuk kepada pengunjung mengenai isi suatu dokumen atau sebuah halaman web atau blog yang akan dituju sebelum link tersebut di klik. Tooltip ini muncul ketika pointer mouse diarahkan diatas sebuah link teks atau link image. Jadi dengan adanya tooltip ini pengunjung akan tahu pentingnya isi sebuah artikel atau halaman web yang diarahkan lewat link yang menggunakan tooltip tersebut. Sebagai contoh, silahkan arahkan pointer mouse anda diatas link dibawah ini :

Cara buat web

Cara buat web

Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
 1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<!-- begin Tooltips --> <script type='text/javascript'> $(document).ready(function(){ $("a.tooltip").easyTooltip(); }); </script> <script type='text/javascript'> //<![CDATA[ (function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery); //]]> </script> <!-- end tooltips --> <style type="text/css"> #easyTooltip{ padding:5px 10px; border:2px solid #BDBDBD; border-top-width:10px; border-bottom-width:10px; background: #FFFFFF; color:#6E6E6E;} </style>

6. Simpan Template.

Langkah selanjutnya memasang tooltip pada sebuah link :
1. Bila anda akan memasang tooltip pada LINK TEKS. 

<a class="tooltip" title="PETUNJUK ATAU KETERANGAN ARTIKEL" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a>

 2. Bila anda akan memasang tooltip pada LINK IMAGE. 

<a class="tooltip" title="PETUNJUK ATAU KETERANGAN ARTIKEL" href="ULR ARTIKEL" target="_blank"><img src="ULR IMAGE" width="100px" height="100px"></a>

Nah...., mudah kan....?

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Judul: Cara membuat Tooltip; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat fitur slide showBanyak kegunaan fitur slide show ini, antara lain bisa kita manfaatkan untuk menampilkan produk terbaru yang kita tawarkan. Terutama untuk web atau blog yang banya ... readmore
• CSS BackgroundFitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efe ... readmore
• Css untuk menampilkan judul blog di hompage blogTtutorial-Onlineku..Fungsi dari pada code Css di bawahini adalah untuk menampilkan "judul postiangan/entry saja"pada homepage blog atau halaman utama,jadi jika blog ... readmore
• Cara buat menu navigasi Slide OutMasih terus memperbanyak jumlah koleksi menu navigasi. Menu ini bukan termasuk jenis drop down melainkan hanya sekedar navigasi biasa. Tapi menu ini memiliki kelebi ... readmore
• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore