How To add Collapsible JQuery Stickybar for blogs - Version5


In this post Add Jquery Slidepanel To Blogger.If you want to create sitemap page just follow below given simple steps.

 
How To add Collapsible JQuery Stickybar for blogs

Instructions:

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for <body>    and just below it paste the following code: 
<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'>SHOW ANNOUNCEMENT &#9660;</p>
<div class='panel'>
<p>Add Announcement Text here. This is your message box</p>
</div>
</div>
Note:
  • To change the background and border colour of the Message box edit 252636
  • To change the background and border colour of the Slide box  edit 252636
  • To change the text inside Slide box edit SHOW ANNOUNCEMENT &#9660; . The weird number at the end is the ASCII code for the triangle icon.
  • To write a Message or announcement simple replace the yellow highlighted text with any message you like.
    4.  Save your template and you are all done!
Visit your blogs to see it sticking at the top of your blog just perfectly.
Enjoy Happy Blogging ....
banner
Previous Post
Next Post

0 comments: