Membuat Link Postingan Atau Sidebar Keluar Balon Dengan CSS

Selamat Siank Sahabat DJ Site Semua,

Ehm, Test Suara dulu ah wkwkw..... setelah tadi pagi saya bagi-bagi Film "Suster Keramas" yang hanya 124 MB (halah promosi lagi), kini saya mau memenuhi janji saya Kepada Sahabat baik saya Om Rame katanya si Om dia ini gak ganteng tapi ngangenin, Penasaran? sambangi kemarkasnya wkwk

Emank Si Om rame ReQuest apaan? Sebelumnya saya tanya dulu, anda udah baca Tutorial Dasar Pembuatan Top Menu Keluar Balon Belum? Klo Belum Baca dulu DISINI. Udah baca? baru kita lanjut, nah klo Tutorial yang saya kasih kemaren kan Untuk Top Menu, dan si Om rame Nanya klo untuk Menu Blog Sidebar bisa gak? Dan saya udah jawab bisa dan ini dia tutornya...

Sebelumnya, arahkan dulu kursor anda ke Tulisan MERDEKA!!! Dibawah ini untuk ng'liat bentuknya....

Indonesia MERDEKA!!!Katanya sih Gtu Brotha N Sista, tapi kenyataannya entah, saya juga gak tau hhe..

Gimana Udah Paham maksud saya?

Nah, pertanyaannya sekarang gimana cara bikinnya? iya kan hha.... Nie dia caranya

1. Login dengan akun Blogger anda masing-masing(jangan pake Punya orang ya haha)
2. Sampai di Dasbor Pilih Rancangan atau Design
3. masuk ke Edit HTML(centang Expand Template Widget-nya)
4. Biar aman Save Dulu deh mendingan templatenya(takutnya anda gak percaya sama saya wkwkw)
5. Cari Kode Dibawah ini

]]></b:skin>

6. Udah ketemu? klo udah Masukkan Script Dibawah ini tepat Diatas Kode ]]></b:skin> tersebut

/*---------- Bubble DJ -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://i785.photobucket.com/albums/yy131/djnand/BubblenyaBangDJ.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://i785.photobucket.com/albums/yy131/djnand/Bubble_Fillernya_Nie_Bang_Dj.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://i785.photobucket.com/albums/yy131/djnand/BubblenyaBangDJ.gif) no-repeat bottom;
}

7. Save template anda

Nah Ini Dia Script Untuk manggilnya, Script Dibawah ini terserah dan suka-suka anda sih mau dimasukkin Di dalam postingan boleh(Di bagian Edit HTMLnya) dan mau ditaruh di sidebar juga boleh. Intinya sih bisa dimana aja asal anda kuat nulis keterangan isi balonnya aja hhe....

Scriptnya:

Text Postingan <a href="Url yang Dituju" class="tt">Text untuk Urlnya<span class="tooltip"><span class="top"></span><span class="middle">Keterangan Di Dalam balon</span><span class="bottom"></a>

Ps: yang saya beri warna merah silahkan ganti Sesuai dengan kebutuhan masing-masing...

Huah.. tuntas Sudah Tugas Saya.... Buat Sahabat DJ Site Semua, Happy Blogging N Have a nice day....

To: Pak Jiox(Alkatro)Aku Wes Bikin template HTML 5 yang Valid 100%, Cuma belum tak bikin Top Menunya