Cara membuat Title Seperti KapanLagi.com
Cara membuat Title ala KapanLagi.com

Pasang Iklan
  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....

15 Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

  1. artikel bagus sob..cuman menurut saya mendingan original dari kita sendiri. jadi pengunjung akan ingat dengan blog kita. contohnya terselubung tulisannya ori kreativitas dia.

    BalasHapus
    Balasan
    1. Trima kasih gan atas sarannya.Coba anda cari apakah ada artikel mirip atau persis artikel ini di GOOGLE,YAHOO atau Seach anggine lainnya,,,,

      Hapus
    2. Bukannya terselubung blog copas sob?

      Hapus
    3. Yang penting kita tidak mematikan atau menjatuhkan kratifitas sesama blogger indonesia raya hehehehe... :D http://i925.photobucket.com/albums/ad93/kaskusradio/709-446.gif ... coz kita juga sesama blogger masih saling membutuhkan alias ketergantungan. :)

      Hapus
    4. "..terselubung tulisannya ori kreativitas dia"...??
      Teselubung y mna sob..??
      hehehh...

      Hapus
    5. terselubung itu blog copas semua ga ada yg reel, dia mengandalkan para blog yg ngirim artikel ke dia tnpa di edit atau di bookmark untuk ditujukan ke blog pencipta artikel, dia tulis semua artikelnya, shrusnya kya kucoba.com artikel yg dikirim dri kita hnya ditulis stngh dan stngh lg di rekomendasikan ke link kita,, :D

      Hapus
    6. Betul om jadi blog kita engak jelek di mata mbok google

      Hapus
  2. wah bagus sob . . . keren :)

    BalasHapus
  3. Anonim17/6/12

    klo membuat menu ber beda2 gimana , contoh nya : Menu Musik warna nya merah ,Game warna nya biru , kayak punya mas gituuu

    BalasHapus
    Balasan
    1. wah kalau di jalasin diKomentar sini agak bingung saya gan hehehehe,,,,entar kalau ada waktu,akan saya buat artikel saja gan Biar lebih jelas.

      Hapus
  4. nice post, thank's you for artikel^^

    BalasHapus
  5. makasih sudah mau berbagi tipsnya

    BalasHapus

Posting Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

Lebih baru Lebih lama