Collapsible JQuery Stickybar for blogs - Version5

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

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! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,69,Blogging tips,198,Bugs and Errors,34,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,305,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
SEO and SEM Guide For Bloggers: Collapsible JQuery Stickybar for blogs - Version5
Collapsible JQuery Stickybar for blogs - Version5
http://lh5.ggpht.com/-e3EZmbzRXgA/T1-YEkurCII/AAAAAAAAGDs/Q14jI6zS5Mc/image%25255B8%25255D.png?imgmax=800
http://lh5.ggpht.com/-e3EZmbzRXgA/T1-YEkurCII/AAAAAAAAGDs/Q14jI6zS5Mc/s72-c/image%25255B8%25255D.png?imgmax=800
SEO and SEM Guide For Bloggers
https://www.experiencelab.info/2012/03/collapsible-jquery-stickybar-for-blogs.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/03/collapsible-jquery-stickybar-for-blogs.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy