Trik Membuat ToolTip di Blogger dengan JQuery

Trik membuat "Tooltip" ini menggunakan Easy Tooltip - jQuery plugin .
Pilihan "Easy Tooltip - JQuery plugin", karena lebih sederhana dan scriptnya tidak terlalu banyak

Berikut Langkah-langkah  Trik Membuat ToolTip di Blogger dengan jQuery:

1.Login ke Blogger >> Dasbor >> Pilih situs >> tata letak >> edit Html >> dan jangan lupa centang Expand Template Widget
Untuk memudahkan pencarian anda tekan Ctrl-F untuk menampilkan search dan cari kode </body>

2. Pasang script berikut (jika memang belum anda miliki), diatas kode </body> tadi.

<!-- jQuery -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- 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 -->

3. Selanjutnya masukkan kode CSS di bawah ini, dimana kode CSS ini dapat anda modifikasi, seperti warna, atau juga anda dapat menggunakan background image(seperti aslinya dari script ini), taruh  di atas ]]></skin>

#easyTooltip{

 padding:5px;

 border:1px solid #ccc;

 background:#f1f1f1;

 }

4. Ini tahap terakhir untuk mengaktifkan fungsi Tooltips, yaitu masukan kode berikut, disetiap link yang anda inginkan

class='tooltip' title='isi sesuai yang anda inginkan'

contohnya penerapannya seperti berikut:

<a class='tooltip' title='Lihat  isi beranda'>Beranda</a>


Hasilnya seperti di bawah ini :    
Beranda

Semoga bermanfaat..

Posted in: Tips n Trik Komputer/Blog