Stylish CSS Sprites Menu For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

It's always hard to find a suitable menu for your blog. We're making that decision more hard for you by sharing another awesome menu... :p Remember, you can't change menu option, because it's an image based menu. Here we go:

• Go To Blogger > Template > Edit HTML > Find ]]></b:skin>.

• Just above ]]></b:skin> post following css:

/*Menu Stars BWidgets.com */
.bwidgets-nav {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bwidgets-nav ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bwidgets-nav ul li {
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoeMzNPpTXbvyIK9XVcaPLMaIhPyECOa_ZkXtlYYXdu1DqXelgqfZhxHE9Ps3pQcNvJU6MsF1FRkgyF9aPSF5-FTLhZUMgTU32xvQK_9YRann8kyme9ND8jXlg-9vDc28lmAL2s0yW9I/s1600/SpritesMenu.png');
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bwidgets-nav ul li a {
    display:block;
    height:100%;
    width:100%; }
.bwidgets-nav ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bwidgets-nav ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bwidgets-nav ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bwidgets-nav ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bwidgets-nav ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bwidgets-nav ul li:hover {
    z-index:1000; }
.bwidgets-nav ul li.sm1:hover {
    background-position:0 -75px; }
.bwidgets-nav ul li.sm2:hover {
    background-position:-125px -75px; }
.bwidgets-nav ul li.sm3:hover {
    background-position:-249px -75px; }
.bwidgets-nav ul li.sm4:hover {
    background-position:-373px -75px; }
.bwidgets-nav ul li.sm5:hover {
    background-position:-498px -75px; }
/*Menu Ends BWidgets.com */

• Now save your template...

All done with this past, now it's time to add html mark-up of this menu on your layout.

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code:

<div class="bwidgets-nav">
<ul>
<li class="sm1"><a href="#"></a></li>
<li class="sm2"><a href="#"></a></li>
<li class="sm3"><a href="#"></a></li>
<li class="sm4"><a href="#"></a></li>
<li class="sm5"><a href="#"></a></li>
</ul>
</div>

Replace all # in above code with your links.....Save It.......

Don't forget to leave a comment.... :)

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.