Followers

15 Mac 2012

Mac 15, 2012 - No comments

Stickybar Jquery


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.

0 ulasan:

Catat Ulasan