Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
We all know that CSS menus are in trend over blogger so i got this menu.....i found this menu in a blog but it was not working so i downloaded pics and put'em here and now it's working and still it's looking damn awesome......
- Go To Blogger > Template > Edit HTML
- Find ]]></b:skin> and just above it paste the below CSS code
#wmenu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 58px;
position: relative;
}
#wmenu span {
display: none;
position: absolute;
}
#wmenu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#wmenu a:hover {
background-position: left bottom;
}
#wmenu a:hover span{
display: block;
}
#wmenu .home {
width: 144px;
height: 58px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjaweIKRWqPhSBccL-yr9F_eV9McMhe7p_nV8pVBib5AnTqxOtlMc142whY9DlPBmMDtUucV-nkJUQo1qg5fmmr_G8ryWlxWgpGMT8TuG5XZpvqNCXNikwPHnh9ziT3Xf6VnFm4wGnqRU/s1600/home.gif) no-repeat;
left: 96px;
top: 20px;
}
#wmenu .home span {
width: 86px;
height: 14px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe_WnDelfanJpinTL6DRI-OPOCBFY6UDhD8aNTQYWRo4IKxbWJrJjXbeT_f7Cr0mMQvjG4_wr6tKGbhBC8L6UvUQ28XPc0B5MEjyqFGUHlHGCsmEZ6aYwHM3zLpfCTjEqRVgGj2ix2fU/s1600/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#wmenu .about {
width: 131px;
height: 51px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNMjnZ2khwfg2uliW_vzzucxCH6vtJ7KWmQiP2_SUbj6oKTvc-6UReJYZKDOKakAZlTz5Wt0dZWBu3y28aLUdqrksy-VZhr6wKEdZCUI2_UcK97vPv4cgUla7r-Gjw-xcDwByUp0_v3Y/s1600/about.gif) no-repeat;
left: 338px;
top: 20px;
}
#wmenu .about span {
width: 40px;
height: 12px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCn41S-WDIbwc72E4GbUna_1dhNANOJbLxtyMMGqnsWB4BE59aIESKt_E_lAWxwVpy9y8b0N-g1koWuevBCJ4hy_de-_jAAQPm42QRVE_mckY-DWyUCJdluzHZaSyojFCGljuDnetvXY/s1600/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#wmenu .rss {
width: 112px;
height: 47px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiInF3OvqjF7VyIb-8mAjw1v0NW_Ko42jMKpcHsZ93Fqshv7fBfEWXQV5u8CZWpN4G2rJbITe2d-gjlGK1VRvieE39pykRbQoVWkWd5xv_NaSLDsezgU4AGl5aSxOqewEB82O25dOnBX7Y/s1600/rss.gif) no-repeat;
left: 588px;
top: 20px;
}
#wmenu .rss span {
width: 92px;
height: 20px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGF9_dVc0sj34HVDiRdwyRRGYnTUEXksE0GhzWGzoWqABQK_3-N36xRFGLXYTtAE-gCe4RFcVTIMuk3PbbpgX-4iQ11gpVwytREpC4zDvn65nO0jk-DJhJbHbIrpIQRp9cWy3mtuIC8A/s1600/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
- Save Template
- Go to blogger > Layour > Add a gadget > HTML/JavaScript and place the HTML below and click save.
<ul id="wmenu">
<li><a href="#" class="home">Home <span></span>
</a></li> <li><a href="#" class="about">About <span></span>
</a></li> <li><a href="#" class="rss">RSS <span></span></a>
</li></ul>
- Replace # with your links....
If any widget/tutorial of this blog is not working then please let me know by commenting..........
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
