We have published so far 4 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.
Previous versions:
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 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!
No comments:
Post a Comment