Cara membuat Title Seperti KapanLagi.com

  Facewoman -Mungkin situs KapanLagi.com memang sudah tidak asing di mata dan telinga anda. Yah KapanLagi.com kan adalah situs Infotaiment Terbesar di indonesia.Kalau kita melihat tampilan KapanLagi.com memanglah sangat apik,jika anda melihat Destop alias komputer maka akan ketahuan fitur-fitur apa yang ada di KapanLagi.com

 Di bagian menu horisontal kalau anda perhatikan ada Title yang tidaklah sama dengan yang title yang ada di blog.Kadang saya berfikir bagaimanasih cara membuatnya?????.Nah sebelum kita membuatnya kita harus tau apakah fitur itu.Fitur itu namanya adalah   :

" TOOTIF " 

 Lalu bagaimana cara membuatnya agar mirip TOOTIF KapanLagi.com.Caranya yaitu kita pasang scrip di bawah ini di atas scrip </ head>   Untuk mencarinya Kita masuk Ke Dasboard Blog Kita Terus kita cari TEMPLATE dan Edit HTML Nah sekarang kita tinggal cari Kode   </ head>  Untuk mempercepat pencarian Tekan tombol CTRL + F lalu kita masukkan kode </ head> .Kalau sudah ketemu kita tinggal paste kode di bawah ini.

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

 <script src='http://facewoman.googlecode.com/files/jQuery%20v1.7.2.js' type='text/javascript'/> 

Kopi kode di atas tepat di atas kode  </ head>    Untuk memodif warna Dari TOOTIF kita tinggal masukkan Code dibawah ini tepat di atas kode

 ]]></ b:skin> 

#easyTooltip{padding:2px;border:1px solid #343332;color: #222;background:#ffde00;}

Dan untuk pemasangan TOOLTIF adalah sebagai contoh :

Untuk link ini :

  <li><a href='http://facewoman.blogspot.com/' title='News Hollywood'>INDONESIA</a></li>

Maka pemasangannya adalah : 

 <li><a class='tooltip' href='http://facewoman.blogspot.com/' title='News Hollywood'>INDONESIA</a></li>

Jadi kita untuk penembatan title yang kita akan beri TOOLTIF tinggal kita pasang kode  class='tooltip'

Langkah terakhir tinggal kita simpan Template dan kita lihat hasilnya.

Keterangan:

• Jika template sobat sudah ada code mirip <script src='http://facewoman.googlecode.com/files/jQuery%20v1.7.2.js' type='text/javascript'/>  Kode di atas sudah tidak usah anda gunakan.

Gimana sobat hasilnya.Sudah miripkah " TOOLTIF " kapan lagi.com hehehehe....