Membuat Tooltip Berlink Di dalam-nya

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 () { $('.bubbleInfo').each(function () { // options var distance = 10; var time = 250; var hideDelay = 500; var hideDelayTimer = null; // tracker var beingShown = false; var shown = false; var trigger = $('.trigger', this); var popup = $('.popup', this).css('opacity', 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't trigger the animation again if we'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: 'block' // brings the popup back in to view }) // (we're using chaining on the popup) now animate it's opacity and position .animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', 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: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, 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="<b>http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3<b></b></b>" 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://pelajaran-blog.blogspot.com/" target="_blank">Pelajaran Blog dan Seo</a></small></td></tr> </tbody></table></div></div>

Lalu simpan dan lihat hasilnya,oh ya,kode yang bercetak tebal (http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3) , (http://3.bp.blogspot.com/-OyJmeSaNDXA/T60LK6s8WxI/AAAAAAAABkQ/x6UY2x9CGw8/s1600/download%2Bbutton%2Bpelajaran%2Bblog.jpeg) dan juga (Benarkah Bid'ah Itu Sesat?) ganti sesui selera anda.
try