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,
[a name='more'][/a]Previous versions:
-
[a href="http://www.mybloggertricks.com/2011/09/make-sticky-bar-for-blogspot.html"]Create a StickyBar and add it to Top[/a]
-
[a href="http://www.mybloggertricks.com/2011/09/notification-bar-for-blogspot-with.html"]Add a StickyBar at Bottom of your page[/a]
-
[a href="http://www.mybloggertricks.com/2011/12/how-to-create-stickybar-with-button.html"]Add a Close Button To Stickybar[/a]
-
[a href="http://www.mybloggertricks.com/2011/12/stickybar-with-facebook-like-and-google.html" target="_blank"]Stickybar with Facebook and Google+ buttons[/a]
Add Jquery Slidepanel To Blogger
- Go To Blogger > Design > Edit HTML
- Backup your template
- 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(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</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 ▼</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 ▼ . The weird number at the end is the [a href="http://www.mybloggertricks.com/2011/06/post-ascii-comments-in-blogger-grab.html" target="_blank"]ASCII code[/a] 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! :)
Post a Comment