Mengaplikasikan Easy Tooltips ( Jquery )

Easy tooltips ini yang saya aplikasikan pada blog ini adalah hasil dari pengembangan dari cssglobe. Jika anda ingin mengaplikasikan pada blog anda, maka anda dapat mengikuti langkah langkah di bawah ini.

• Masukkan Script dibawah ini tepat di atas </head>

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

• Lalu paste kode ini tepat dibawah kode diatas

<script type='text/javascript'>
$(document).ready(function(){   
    $(&quot;a&quot;).easyTooltip();
    $(&quot;a#link&quot;).easyTooltip({
        tooltipId: &quot;easyTooltip2&quot;
    });
});
</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>

• Selanjutnya anda harus memasukkan kode CSS berikut ini. caranya cari kode : ]]></b:skin>  lalu masukkan kode di dawah ini tepat diatas kode : ]]></b:skin>

#easyTooltip{
padding:5px 10px;
border:2px solid #ffffff;
background:#195fa4 url(http://www.masukkan alamat hostingan anda/bg.gif)repeat-x;
color:#E0EFE0;
width:150px;
font-weight:bold;
text-shadow: 2px 1px 1px #021564;
font-family: Verdana;
-moz-border-radius: 5px;
}

• Simpan Template
  

•  selanjutnya anda perlu melakukan konfigurasi pada setiap link yang anda buat untuk melakukan pemanggilan terhadap fungsi dari easy tooltips dengan cara seperti ini :

<a style="font-weight:bold;" class="tooltip" href="http://alamat yang dituju.com/" title="Terserah anda disi apa">Link Anda</a>

• Begini nih Hasilnya

Situs Aslinya Css Globe