Blog Cinangka

Membuat Link Postingan Atau Sidebar Keluar Balon Dengan CSS

Posted by Taufiq Rohman Wednesday, October 19, 2011
Share this Article on :




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 ]]></b:skin>
6. Klo udah ketemu, Masukkan Script dibawah ini tepat diatas Kode 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="http://www.blogger.com/Url%20yang%20Dituju" class="tt">Text untuk Urlnya<span class="tooltip"><span class="top"></span><span class="middle">Keterangan Di Dalam balon</span><span class="bottom"></span></span></a>

Related Post:

Post a Comment