Senin, 06 September 2010

Membuat Link Postingan dan Sidebar Keluar Balon Dengan CSS3

1. Login dengan akun Blogge
2. Dasbor Pilih Rancangan atau Design
3. ke Edit HTML(centang Expand Template Widget-nya)
4. Save Dulu
5. Cari Kode

]]></b:skin>

6. 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

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>

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

Copas dari Kang Dj Site

0 komentar: