Sabtu, 19 Desember 2009

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

3 komentar:

Denny mengatakan...

Mantab mbah blognya, mari belajar bersama. :)
mengenai back to top yang ini, liat aja di source blog ane.. <!-- Scrolltop --> nah itu scriptsnya, jangan lupa pasang indukan jQuery. :D

CSSnya ada di #top-link :) terus cari class id='top-link'

ganti <body> dengan <body id='top'>

kalo puyeng, coba dulu di blog lain, terus di copas scripts2 diatas, insyaallah jalan, tinggal sesuain CSS untuk warnanya. :)

selamat mencoba.

Mbah Goblog mengatakan...

Oke banget sob. makasih ya. sempet pusing tadi. tapi ternyata gak sesulit yang aku bayangin.hehehehe

choen mengatakan...

sip keren bro

Posting Komentar