Subscribe:

Tuesday 25 March 2014

dd Apple Styled Sliding Navigation Bar In Blogger

Add Apple Styled Sliding Navigation Bar In 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='https://pctricksguru.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='https://pctricksguru.googlecode.com/files/kwicks.js' type='text/javascript'/>
<script src='https://pctricksguru.googlecode.com/files/custom.js' 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:
<style>
.kwicks {
     list-style: none;
     position: relative;
     margin: 0;
     padding: 0;
     background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HMphXh3tbs99JbcMGtit4C7OW2TWQm1sE-WFa9sTqHaadLZ2BQVT-3YnOENyLB84EQojPTR1n13Z5P0lD5GVHe4Jw3Z2kI8HqboNrqFv-Nxya5WRY7lFPJhc2kQ-1vT07BshJbz8HGU/s1600/btrix_no_flicker.jpg); /*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;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9N4vYa-mQt4Om4mnBq5O_4jw9V6cShAMRjBX0USQNWCvyosfHEo6W1lHEH09PvQUfcrtY-c8mJIYNQ60MwDms2Qd0JKE7HrjN9oBNVtt0QOfvnFSC9iYn8ABr_erLEndsQ39uFc8UXqU/s1600/btrix_kwicks_sprite.jpg);
 background-repeat:no-repeat;}
.kwicks a{
 display:block;
 height:40px;
 text-indent:-9999px;
 outline:none;}
#kwick1 {
 background-position:0px 0px;}
#kwick2 {
 background-position:-200px 0px;}
#kwick3 {
 background-position:-400px 0px;}
#kwick4 {
 background-position:-600px 0px;}
#kwick1.active, #kwick1:hover {
 background-position: 0 bottom;}
#kwick2.active, #kwick2:hover{
 background-position: -200px bottom;}
#kwick3.active, #kwick3:hover {
 background-position: -400px bottom;}
#kwick4.active, #kwick4:hover {
 background-position: -600px bottom; }
#kwick1 a{
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-v6O23r7-Gg6rzU1fqcYJiIVnVyAFNISe354Z0rCSO8FPMzbZk9bYTuJd1EcBHG-yovNta_qOFXB98sBRnICBs16HALh1y5nCZvqr1TY7v3vsJOjwgGveaUD9-Ayti2yL_p5hZ2ki6h8/s1600/btrix_end.jpg);
 background-repeat:no-repeat;
 background-position: left 0px;}
#kwick1 a:hover{
 background-position: left -80px;}
#kwick4 a{
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-v6O23r7-Gg6rzU1fqcYJiIVnVyAFNISe354Z0rCSO8FPMzbZk9bYTuJd1EcBHG-yovNta_qOFXB98sBRnICBs16HALh1y5nCZvqr1TY7v3vsJOjwgGveaUD9-Ayti2yL_p5hZ2ki6h8/s1600/btrix_end.jpg);
 background-repeat:no-repeat;
 background-position: right -40px;}
#kwick4 a:hover{
 background-position: right -120px;
}
</style>
<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="http://www.pctricksguru.com/">Search</a></li>
 </ul>
  • 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 comments:

Post a Comment

Pc tricks
Powered by Conduit Mobile