1058 followers
Follow us on Twitter!
260 followers
Join us on Facebook!
Windows Reloded, Download Latest Softwares
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.flipWindows Reloded, Download Latest Softwares
{
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 {Windows Reloded, Download Latest Softwares
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'>Windows Reloded, Download Latest Softwares
<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 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!
Windows Reloded, Download Latest Softwares
0 comments: