Cara Membuat Tooltip dengan jQuery

Cara Membuat Tooltip dengan jQuery - Cara Membuat Tooltip dengan jQuery , ada yang sudah mengenal Tooltip?, Tooltip pada blogger bisa memperkeren bllog dengan ringan, Tooltip di Blogspot biasa digunakan untuk memberi tittle yang jelas. Jika sudah memasangnya Coba arahkan Kursor Pc anda ke salah satu Judul Artikel dan akan tampak tampilan seperti Gambar diatas.

Cara Membuat Tooltip dengan jQuery

1. Login 'Blogger'

2. Ke menu 'Templates'

3. Klik 'Edit Html"

4. Cari Kode ]]></b:skin> (Gunakan Ctrl + f supaya lbh mudah) Lalu Pastekan Kode berikut tepat diatas kode ]]></b:skin> .

#easyTooltip {

padding: 5px;

border: 1px solid #008000;

color: #00cc00;

background: #004000;

}

5. Lalu Cari Lagi Kode </head> dan "paste"-kan kode berikut tepat diatas kode </head> .

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



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

6. Klik Simpan

Demikian tutorial blog/tips blog "Cara Membuat Tooltip dengan jQuery" , Semoga bermanfaat.
berkenan?.. Baca Juga:

Judul: Cara Membuat Tooltip dengan jQuery
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Bayu Satrio Nugroho 12:37 AM

Home

SEO Tips

Tutorial

Menarik

Info Pendakian

Travel

Cara Membuat Tooltip dengan jQuery