MEMBUAT KETERANGAN LINK LEBIH KEREN DNGAN TOOLTIP

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

Posted in: Tips Mempercantik Blogmu