Blogging Ethics

MBT Tube

March 14, 2012

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 »

23 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. thanks mohammed for this new version

    ReplyDelete
  2. very nice, thank u, i think it need some modification ti look better!

    ReplyDelete
  3. Great info. Thanks for sharing it.

    ReplyDelete
  4. 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
  5. What Is Your Web Development Services Company's Process For Creating A New Web Design For New Domain?

    ReplyDelete
  6. 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
  7. Hello Mustafa bhai..

    Nice , but I like you old one .

    Can you take a look at my blog Tech Tips and Tricks and give me some tips and Suggestions. !

    Thank you MBT

    ReplyDelete
  8. Another Great Widget for Blogger by MBT Keep It Up!!

    ----------------------
    RockingTemplates.com

    ReplyDelete
  9. Thanks Sir,i Wana ask A Question do you create these code your self if you do so please you could teach us how we can create the same.
    Syed Faizan Ali Recently Posted Top 5 Tips To Increase Your Website Speed Load Time (Boost)

    ReplyDelete
  10. Totally good and like the script.

    www.fblatest.in

    ReplyDelete
  11. salam bhai i need ur help im using ur MONOP template there's a probl wiht ur this template when im sharing something from my blog to facebook it doesnt show the image and info about the post so pls me

    ReplyDelete
  12. 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
  13. 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
  14. Gosto muito dos artigos de ótima qualidade do seu Blog. Quando for possível dá uma passadinha para ver nosso Curso de Informática Online. Lucas

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

    ReplyDelete
  16. So nice plugin for blogger...
    http://www.alphahomeocare.com/

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup