November 20, 2010   Efek Link , JQuery

MEMBUAT KETERANGAN LINK LEBIH KEREN DNGAN TOOLTIP

Demo: Arahkan Kursormu di Sini! 1. Sign In Di Blogger 2. Klik Menu Rancangan 3. Klik Menu Edit HTML 4. Copy Kode Dibawah Ini, Lalu Pastekan...

Demo: Arahkan Kursormu di Sini!

1. Sign In Di Blogger

2. Klik Menu Rancangan

3. Klik Menu Edit HTML

4. Copy Kode Dibawah Ini, Lalu Pastekan Di Atas Kode </body>

<!-- jQuery -->
<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>
<!-- end tooltips -->

5. Cari Kode ]]></b:skin>

6. dan Letakan Kode Sript di Bawah Ini di Atasnya

#easyTooltip{
padding:5px 10px;
border: 1px solid #ddffff; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px; -moz-box-shadow: 0 0 40px #87CEFA;-webkit-box-shadow: 0 0 40px #87CEFA;box-shadow: 0 0 40px #87CEFA;
background: #f6f6f6;
color:#000;
text-shadow:4px 4px 4px #708090;

7. Klik Simpan Template

8. Untuk Membuat Link dengan Efek Keterangan Tooltip, Perhatikan Script di Bawah Ini

<a class='tooltip' href='http://www.Blogmu.com/' title='Keteranganmu di Tooltip'>Beranda</a>

Ubah http://www.Blogmu.com/ dengan Linkmu, dan Beranda dengan Nama Linkmu

dan Ubah Keteranganmu di Tooltip dengan Keterangan Link Tersebut