Membuat Tooltip jQuery di Blogger

About this Post :
Post Title	>> Membuat Tooltip jQuery di Blogger
Date	>> January 23, 2012
Author	>> Mr. Lam3rs
Link	>> http://31337day.blogspot.com/2012/01/membuat-tooltip-jquery-di-blogger.html
Labels	>> jQuery

Untuk DEMO dapat dilihat disini
Untuk menerapkannya di blog anda, silahkan ikuti petunjuk di bawah ini:

1. Login ke akun blogger anda
2. Pilih Design » Edit HTML
3. Lalu copy kode di bawah ini dan letakkan di atas kode ]]></ b:skin>

#easyTooltip {
padding: 5px;
border: 1px solid #008000;
color: #00cc00;
background: #004000;
}

Note: silahkan anda modifikasi sendiri kode CSS di atas, sesuai dengan tampilan blog anda :)

4. Selanjutnya copy kode di bawah ini, dan letakkan di atas kode </ head>

<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(){
$(&quot;a.tooltip&quot;).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>

Note: perhatikan kode di bawah ini, jika dalam template anda sudah terdapat kode tersebut maka tidak perlu diikut sertakan.

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

5. Simpan template anda!
6. Dan untuk memanggil tooltip ini, silahkan anda lihat kode dibawah:

<a class='tooltip' href='url link' title='pesan tooltip'>text link</a>

Note: jadi setiap kita ingin memanggil tooltip tersebut, anda cukup menambahkan kode class='tooltip' di setiap link yang ingin anda beri tooltip.

Baik sekian penjelasan saya mengenai membuat tooltip jQuery di blogger, dan untuk yang merasa belum jelas dengan penjelasan saya di atas silahkan berkomentar di bawah postingan ini. Insya Allah akan saya respon secepatnya.

Terima kasih, semoga bermanfaat :)

Sources: http://www.z33s.co.cc/2010/09/membuat-tooltip-blogger-dengan-jquery.html