Cara Membuat Tooltip dengan jQuery

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

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

6. Klik Simpan 

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

• Mitos SEO yang menyesatkan Newbie Pemula SEO
• Membuat Ucapan Selamat Datang di blog
• Cara Membuat Blog menjadi DoFollow
• Cara Membuat Artikel Standar SEO

• Tweet

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

Artikel Terkait Tips Blog, Trik dan Tips, Tutorial :