Collapsible JQuery Stickybar for blogs - Version5

jquery stickybar

We have published so far 3 different versions of a sticky bar as a custom design to Hellobar. It appears at the top of your website or blog to attract visitors towards an important announcement, ad or update. The previous versions included social media buttons and a close functionality. This widget uses Jquery to create a collapsible slide panel that can be expanded or collapsed. Any important message or blog update can be inserted inside the announcement box no matter how long it may be, the message will appear only once the visitor clicks the slidepanel.  I made sure it looks neat and clean and may not occupy big space therefore this latest Jquery script helped me to add the slide functionality to it thus giving birth to an entirely useful and cool blog widget. Kindly view a demo first,


Live Demo

Previous versions:

    1. Create a StickyBar and add it to Top

    2. Add a StickyBar at Bottom of your page

    3. Add a Close Button To Stickybar

    4. Stickybar with Facebook and Google+ buttons

Add Jquery Slidepanel To Blogger

  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>
 

 

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

Need Help?

If you need any further assistance related to this widget's customization then do not hesitate to ping me by commenting. I am a little busy with some work at home therefore not able to respond promptly. Do let me know how you find this new stickybar. I will publish server other versions too in coming days. Peace and blessings pals! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

3/14/2012

9 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. UnknownMar 14, 2012, 1:14:00 AM

    thanks mohammed for this new version

    ReplyDelete
  2. AnonymousMar 14, 2012, 9:22:00 AM

    Great info. Thanks for sharing it.

    ReplyDelete
  3. UnknownMar 14, 2012, 9:44:00 AM

    Looks smoother than the previous ones..

    Btw have you heard the noise all around of Mashable to be sold to CNN for $200 million.. I guess how much my blog would fetch o_O

    ReplyDelete
  4. UnknownMar 14, 2012, 11:20:00 AM

    Nice Shot !

    ReplyDelete
  5. Mohsin Ali WaheedMar 14, 2012, 7:59:00 PM

    Mohammad Mustafa Ahmedzai you have been nominated as the third highest blogger earner in Pakistan. Please Read this post http://www.internet-khazana.com/blog/2012/03/14/top-10-earning-blogs-and-bloggers-in-pakistan/

    ReplyDelete
  6. Dinesh SoniMar 15, 2012, 1:06:00 AM

    oooh shitttt...m loving it :-D

    ReplyDelete
  7. UnknownMar 16, 2012, 10:54:00 AM

    In the mashable type sharing widget the g+1 button is working for current url. I want it to +1 only website url. How do i do that?

    Thanks
    Harsh

    ReplyDelete
  8. UnknownMar 17, 2012, 10:15:00 AM

    I am having a problem while sharing to facebook. It does not show the image and info and breaks it down only into the url. This is how it looks http://bit.ly/vYWGto

    ReplyDelete
  9. Vivek NandhaJun 22, 2012, 1:08:00 PM

    @Mohammad Mustafa Ahmedzai I don't get <body> in my template...now what should I do???

    ReplyDelete

Subscribe to: Post Comments ( Atom )