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