Breaking News
Loading...
Saturday, 28 June 2014
» » fixed dropdown menu for blogger

fixed dropdown menu for blogger

Admin
01:53
Hi! To all sweet readers today in this post I am going to share with you a great navigation style for your website/blog. This horizontal dropdown menu with social icons on the left hand side will increase the beauty of your blog. The interesting thing is that it will remain fixed while scrolling and visitors can have easy access to your menus and it will have positive effect on your total pages views. This navigation horizontal menu is made up with CSS, HTML and a few JavaScript code. It doesn’t have negative effect on page load time and other SEO of your blog rather it will improve the structure of your blog with great menu and popular social media icons. So, don’t miss this great horizontal dropdown CSS menu if you are looking for your blog/website. It can be used in every website but I will show you the method of how to put this menu in Blogger (BlogSpot) blog. 

Get started to tutorial...]
Below is the simple process to add these horizontal dropdown menu for blogger blogs and it can be added in any website by adding CSS and HTML given.
For blogger(blogspot)
1) Login to your blogger dashboard.
2) Template>> backup your template>> Edit HTML.
Now search for
</b:skin>

and paste the below CSS code above </b:skin>

/*----Horizontal fixed bar----*/
*html #header-wrap {
position:absolute
}
#header-wrap {
width:100%;
background:transparent;
border:none; z-index:100;
margin:10px 0;
padding-top:6px;
overflow:hidden
}

/* social icon   */
#social-networking li
{
float: left;
}
#social-networking a
{
display: block;
padding: 0 3px 0 0;
position: relative;
}
#social-networking span
{
opacity:0.5;
width: 24px;
height: 24px;
display: block;
border:4px solid #252628;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow:inset 0 2px 6px #000000;
webkit-shadow:inset 0 2px 6px #000000;
moz-shadow:inset 0 2px 6px #000000;
moz-transition: all .1s linear;
webkit-transition: all .15s ease-in-out;
o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
#social-networking span:hover
{
border:4px solid #888;
opacity:0.9;
}
#social-networking .social-icon
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yOMgRBbPsH6f0tCUsdg0y4xsL5_jekISWJTQjmOQ0vu4QThV4PZbOhmwWvfqsz7h3S0eeEEsHpzheMnjOYt_-Hlaiqw0eX8b_m-XypWyvYPf444RigQH9SkYU7ig_1V7LtR8O1IEQ7Y/s1600/social.png') no-repeat; padding: 0px 1px;
}
.opacity #social-networking .social-icon { opacity: 0.85; }
.opacity #social-networking a:hover .social-icon { opacity: 0.6; }
#social-networking .facebook { background-position: 0 -28px; }
#social-networking .flickr { background-position: 0 -87px; }
#social-networking .vimeo { background-position: 0 -233px; }
#social-networking .youtube { background-position: 0 -291px; }
#social-networking .linkedin { background-position: 0 -322px; }
#social-networking .googleplus { background-position: 0 -353px; }
#social-networking .dribbble { background-position: 0 -205px; }
#social-networking .tumblr { background-position: 0 -177px; }
#social-networking .skype { background-position: 0 -262px; }
#social-networking .delicious { background-position: 0 -149px; }
#social-networking .digg { background-position: 0 -117px; }
#social-networking .rss { background-position: 0 -57px; }
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: right;
font-size: 11px;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
text-transform:uppercase;
}
ul.topnav li a:hover{
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://lh5.googleusercontent.com/-xW4p9b_uWyI/TeQwwBEAGGI/AAAAAAAAAGY/rGxrR1WBhgE/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.subnav {
list-style: none;
position: absolute;
left: 0;
border-radius: 5px;
top: 35px;
background: #202020;
margin: 0;
padding: 0;
display: none;
float: left;
width: 150px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-bottomright: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
z-index: 1001;
}
ul.subnav_last{
list-style: none;
position: absolute;
right: 15px; top: 35px;
background: #202020;
margin: 0; padding: 0;
display: none;
float: left;
width:150px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
z-index:1001;
}
ul.subnav li, ul.subnav_last li{

margin: 0; padding: 0;
border-top: 1px solid #111;
border-bottom: 1px solid #333;
clear: both;
width:150px;
}
ul.subnav li:last-child{
border-bottom: none;
}
ul.subnav_last li:last-child{
border-bottom: none;
}
html ul.subnav li a, ul.subnav_last li a {
float: left;
border-bottom: 1px solid #030303;
width: 125px;
border-radius: 5px;
text-align: left;
background: transparent url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center;
padding: 8px 0 8px 20px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-bottomright: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-bottom-right-radius: 5px;
text-transform: none;
}
html ul.subnav li a:hover, ul.subnav_last li a:hover{ /*--Hover effect for subnav links--*/
background: #191919 url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center;
}
#header-bar-outer{
position:fixed;
z-index:9999;
width:100%;
height:38px;
padding:0;
margin:0;
background:#212121;
border-top:1px solid #000;
border-bottom:1px solid #000;
padding-top:1px;
padding-bottom:1px;
top:0;
}
#header-bar {
width:100%;
height:37px;
margin:0 auto;
padding:0;
border-top:1px solid #444;
border-bottom:1px solid #444;
}
#top_nav{
height:33px;
line-height:33px;
text-align:left;
float:left;
}
#top_nav ul{
margin:0; padding:0 0 0 5px;
}
#top_nav li{
display:inline;
}
#top_nav li a{
color: #CCCCCC;
font-size: 11px;
margin: 0 0 0 0;
padding: 0 0 0 10px;
text-transform: uppercase;
}
Now the next step is to add HTML and a few JavaScript code. Search for <body>
and paste the below HTML code after/below <body>


<div class='navbar section' id='navbar'>
<script type='text/javascript'>
$(document).ready(function(){
 $(&quot;ul.subnav, ul.subnav_last&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

 $(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

  //Following events are applied to the subnav itself (moving subnav up and down)
  $(this).parent().find(&quot;ul.subnav, ul.subnav_last&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click
  $(this).parent().hover(function() {
  }, function(){
   $(this).parent().find(&quot;ul.subnav, ul.subnav_last&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
  });
  //Following events are applied to the trigger (Hover events for the trigger)
  }).hover(function() {
   $(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
  }, function(){ //On Hover Out
   $(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
 });
});
</script>

</div>
<div id='header-bar-outer'>
<div id='header-bar'>
<ul class='topnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Blogger</a>
<ul class='subnav'>
<li>
<a href='#'>Wordpress</a>
</li>
<li>
<a href='#'>Joomla</a>
</li>
<li>
<a href='#'>Typepad</a>
</li>
</ul>
</li>
<li>
<a href='#'>Blogging</a>
<ul class='subnav'>
<li>
<a href='#'>SEO Tips</a>
</li>
<li>
<a href='#'>Widgets</a>
</li>
<li>
<a href='#'>Template</a>
</li>
</ul>
</li>
<li><a href='#'>Tricks</a>
<ul class='subnav'>
<li>
<a href='#'>free games</a>
</li>
<li>
<a href='#'>Android</a>
</li>
<li>
<a href='#'>iOS</a>
</li>
</ul>
</li>
<li>
<a href='#'>APPS</a>
<ul class='subnav'>
<li>
<a href='#'>Android</a>
</li>
<li>
<a href='#'>iOS</a>
</li>
<li>
<a href='#'>Windows 8</a>
</li>
</ul>
</li>
<li>
<a href='#'>Designing</a>
<ul class='subnav_last'>
<li>
<a href='#'>Tips</a>
</li>
</ul>
</li>
</ul>
<div id='top_nav'>
<!-- start #social-networking-->
<ul id='social-networking'>
<li><a href='http://twitter.com/your twitter username' id='twitter-link' target='_blank' title='Twitter'><span class='twitter social-icon'/></a></li>
<li><a href='http://www.facebook.com/your facebook username' id='facebook-link' target='_blank' title='Facebook'><span class='facebook social-icon'/></a></li>
<li><a href='https://plus.google.com/your google+ username?prsrc=2' id='googleplus-link' target='_blank' title='Google + '><span class='googleplus social-icon'/></a></li>
<li><a href='https://youtube.com/your youtube username?prsrc' id='youtube-link' target='_blank' title='youtube'><span class='youtube social-icon'/></a></li>
<li><a href='http://feeds2.feedburner.com/your feedburner username' target='_blank' title='Rss'><span class='rss social-icon'/></a></li>
</ul>
<!-- end #social-networking-->
</div>
</div>
</div>
Customization Of this fixed header bar:
your twitter username..     replace it with your twitter user name.
your Facebook username...  replace it with your Facebook user name.
your google+ username...     replace it with your Google+ id.
your youtube username...     replace it with your youtube user name.
your feedburner username... replace it with your feedburner user name/id.

Save your template and you are done with this beautiful fixed header bar.
if you have any problem to install the fixed dropdown menu, kindly let me know in comment section.

Posted by Admin at 01:53
Share:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Toggle Footer