Thursday 14 March 2013

Add Apple Styled Sliding Navigation Bar In Blogger

Add Apple Styled Sliding Navigation Bar In Blogger
Hi friends. In my previous posts, I have provided the codes to add some stylish navigation menu bars in blogger. Today, I am going to provide a very stylish sliding navigation bar for blogger. It's menus slide on the mouse hover and the image appears with the main button. So, let's start.

Follow The Instructions Below:

  • Login to blogger.
  • Go to Template > Edit HTML > Proceed > Expand Widget Templates.
  • Search for the code </head>.
  • Just above the </head>, copy and paste this code:
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>
  • Now, Save your template.
  • Now, go to Layout > Add New Gadget > Add HTML/Javascript Gadget.
  • Copy and paste the following code in the content box:
.kwicks {
     list-style: none;
     position: relative;
     margin: 0;
     padding: 0;
     background-image:url(; /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/}
 .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
 float: left;
 width: 125px;
 height: 40px;
 margin-right: 0px;
.kwicks a{
#kwick1 {
 background-position:0px 0px;}
#kwick2 {
 background-position:-200px 0px;}
#kwick3 {
 background-position:-400px 0px;}
#kwick4 {
 background-position:-600px 0px;}, #kwick1:hover {
 background-position: 0 bottom;}, #kwick2:hover{
 background-position: -200px bottom;}, #kwick3:hover {
 background-position: -400px bottom;}, #kwick4:hover {
 background-position: -600px bottom; }
#kwick1 a{
 background-position: left 0px;}
#kwick1 a:hover{
 background-position: left -80px;}
#kwick4 a{
 background-position: right -40px;}
#kwick4 a:hover{
 background-position: right -120px;
<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="">Search</a></li>
  • Now, save the gadget and check your blog.
Note: To change the link, replace # with your link and replace red text with your text.
See Demo Here.

0 blogger:

Post a Comment

Custom Search Box

Earn Money With Crypto


Offers and Deals

Blog Archive

Contact Form


Email *

Message *