Cara Membuat Tool Tip / Mini Popup Memiliki Link Anchor dan Menu Pilihan Didalamnya

Meskipun tutorial membuat tooltip link ini diposting tengah malam kaya ghene(bahasa gaul sekarang gan pent-),tapi tetep semangat ya bro,langsung aja deh,coba sobat arahkan kursor pada gambar link download di posting KLIK DISNI,nanti akan keluar tooltip keren yang memiliki link didalamnya (adapun masalah apa itu tooltip dan pembahasannya telah disharing beberapa waktu lalu di SINI pent-):

Gambar screenshotnya akan tampil seperti ini gan:

Gimana gan,pingin bikin juga buat menghias blog kamu,betul sob,kita bisa membuat tooltip yang didalam tool tip tersebut memiliki link bahkan gambar sekalipun,yuk kita intip gimana sih cara ngbikinnya :D

Langkah Membuat Coda Bubbles dengan jQuery

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).


(1)


(2)


(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.

.bubbleInfo { position: relative;}
.popup { font-size:11px; width:200px; background:#F3F3F3; padding:3px 5px; border:1px solid #CCC; position: absolute; display: none; /* keeps the popup hidden if no JS available */ bottom:60px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.popup:after{ border:15px solid; border-color: #F3F3F3 transparent transparent transparent; content:""; display:block; height:; width:; position:absolute; bottom:-30px; left:80px;}

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/><script src='jquery.js' type='text/javascript'/>
<script type='text/javascript'>$(function () { $(&#39;.bubbleInfo&#39;).each(function () { // options var distance = 10; var time = 250; var hideDelay = 500;
var hideDelayTimer = null;
// tracker var beingShown = false; var shown = false;
var trigger = $(&#39;.trigger&#39;, this); var popup = $(&#39;.popup&#39;, this).css(&#39;opacity&#39;, 0);
// set the mouseover and mouseout on both element $([trigger.get(0), popup.get(0)]).mouseover(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don&#39;t trigger the animation again if we&#39;re being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true;
// reset position of popup box popup.css({ top: -100, left: -33, display: &#39;block&#39; // brings the popup back in to view })
// (we&#39;re using chaining on the popup) now animate it&#39;s opacity and position .animate({ top: &#39;-=&#39; + distance + &#39;px&#39;, opacity: 1 }, time, &#39;swing&#39;, function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ top: &#39;-=&#39; + distance + &#39;px&#39;, opacity: 0 }, time, &#39;swing&#39;, function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn&#39;t do the job) popup.css(&#39;display&#39;, &#39;none&#39;); }); }, hideDelay); }); });});
</script>

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)


(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="bubbleInfo"><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" trigger=""><img class="trigger" src="http://3.bp.blogspot.com/-OyJmeSaNDXA/T60LK6s8WxI/AAAAAAAABkQ/x6UY2x9CGw8/s1600/download%2Bbutton%2Bpelajaran%2Bblog.jpeg" height="65" width="150" /></a><div class="popup"><table><tbody><tr> <td>Nama File</td><td>: Benarkah Bid'ah Itu Sesat?</td></tr><tr><td>Ukuran</td><td>: 337kb</td></tr><tr> <td>Hosting </td> <td>: Google Code </td></tr><tr><td>Url Link </td> <td>: <small><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" target="_blank">Klik Di Sini</a></small></td> </tr><tr> <td>Referensi </td><td>: <small><a href="http://ngeblogbarengbareng.blogspot.com/" target="_blank">belajar nge-blog</a></small></td></tr></tbody></table></div></div>

Lalu simpan dan lihat hasilnya,oh ya,kode yang bercetak tebal sesuikan saja ya,udah terlalu malem soalnya gan,see you ya :D