Flapping Custom Navbar

­

Following
the many concerns of the visitors over the SNDSOFT Custom Navbar For Blogger this time we
have come up with modified version of Custom Navbar with flapping feature.In
this Navbar you can even include images,HTML codes and many more as you like.As
the visitors click the navbar,the included part will be visible.For Demo click here.

For this Follow the following
steps:-

1.    Now
sign in blogger.com.
  •        Go
    to design(in old blogger interface) or Layout(in new blogger interface)
  •       Then  Add a
    gadget and choose HTML/java script


2.Copy and paste the below given code

<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:#891722;
border:solid 1px #891722;
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:#1B1789;
border:solid 1px #1B1789;
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>

3.Save the widget.

4.Then again Find <body> tag. (press ctrl + F to open the find box and copy the code to find box for quick finding)

5.After that copy the given code

<div class=’containerpanel’>
<p class=’flip’><span style=”font-weight:bold;”>&#9660; Click here to see effect &#9660;</span></p>
<div class=’panel’>
<p><center>Your Content here</center></p></div>
</div>
6.Replace Your Content here with your  respective content andSave the template.

Don’t
forget to  Comment regarding this
post.Feel free to comment if you have any problem or views regarding any post……

You may also like...

1 Response

  1. Your website seem very yummy!!! I love chocolate!
    Technology, Free Software, E-Books and Best Tutorial
    your blog is good! I'll visit again 🙂
    God Bless You

Leave a Reply

Your email address will not be published. Required fields are marked *