15 Mac 2012

Stickybar Jquery

Tiada ulasan:
 

Sila lihat demo

Ia terletak di atas blog korang untuk memberitahu pengunjung tentang mesej penting,iklan atau update.Kemas dan menjimatkan ruang pada blog anda.

Langkah Pemasangan

Login ke blogger dashboard-->Klik Design-->Edit HTML

Hanya cari kod <body>

dan pastekan keseluruhan kod ini diBAWAHnya


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.flip&quot;).click(function(){
$(&quot;.panel&quot;).slideToggle(&quot;slow&quot;);
});
});
</script>

<style type='text/css'>

div.panel
{
vertical-align: baseline;
letter-spacing: 1px;
padding:10px 10px 10px 20px;
background:#252636;
border:solid 1px #252636;
color:#fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
width:100%;
margin:0px;
}

p.flip
{
FONT-FAMILY: Georgia, 'Times New Roman', arial, serif;
font-size:14px;
color:#fff;
padding:4px;
text-align:center;
background:#252636;
border:solid 1px #252636;
margin-bottom:1px;
width:100%;
}

div.panel a, p.flip a {
text-decoration:underline;
color:#fff;
}

div.panel a:hover, p.flip a:hover {
text-decoration:none;
color:#fff;
}

div.panel
{
height:auto;
display:none;
}

div.containerpanel {
z-index:9999;
margin-top:-55px;
margin-left:-20px;
padding:0px;
position:fixed;
width:100%;
}
</style>




<div class='containerpanel'>
<p class='flip'>KLIK MESEJ &#9660;</p>

<div class='panel'>
<p>Letak teks disini. Ini adalah kotak mesej</p>

</div>

</div>


Itu saja.Save template.

Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger