RSS

>Membuat keterangan link timbul

22 Apr

>

Beranda

Sesuai judulnya
 hend kasi unjuk tutorial keren
langsung saja tanpa banyak cotba :

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>

Cilub baaaa::
<!– jQuery –>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#8217; 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

Cilub baaaa::

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

<a class=’tooltip’ href=’http://www.bravohendry.blogspot.com/‘ title=’Keteranganmu di Tooltip‘>Beranda</a>


7. Klik Simpan Template
8. Untuk Membuat Link dengan Efek Keterangan Tooltip, Perhatikan Script di Bawah Ini

Ubah http://www.bravohendry.blogspot.com/ dengan Linkmu, dan Beranda dengan Nama Linkmu
dan Ubah Keteranganmu di Tooltip dengan Keterangan Link Tersebut

Demo: Arahkan Kursormu di Sini!

Semoga bermanfaat………………

Tolong Kunjungi ini

Semoga bermanfaat…

 
Tinggalkan komentar

Ditulis oleh pada April 22, 2011 in Tutorial

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: