Stylish CSS Sprites Navigation Menu For Blogger Users

 Download Script    Live Demo

How to use CSS Code : 

1. Go To Blogger > Template > Edit HTML > Find ]]></b:skin>.
2. Just above ]]></b:skin> post following css:

/*Menu Stars Digitalhubinc.com */

.digitalhubincwidget-nav {

    display:block;

    height:72px;

    margin:30px auto;

    position:relative;

    width:525px; }

.digitalhubincwidget-nav ul {

    float:none;

    list-style-image:none;

    list-style-type:none;

    margin:3px 0; }

.digitalhubincwidget-nav ul li {

    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtCDopeUN4isqq3uSQAaF4KuIMn0MQgtkiOvSpeHp0vqDpOX_upkeMUlIQMlywKolu_uoYwJFnx6M_YsPXOHYG2zmyyPY59xfLWrIbnHXCyFAsqs10MqS78eq3lw8DC8Jng83qwjNlx2k/s1600/SpritesMenu.png');

    background-repeat:no-repeat;

    float:left;

    height:72px;

    margin:0px;

    padding-top:5px;

    position:absolute; }

.digitalhubincwidget-nav ul li a {

    display:block;

    height:100%;

    width:100%; }

.digitalhubincwidget-nav ul li.sm1 {

    background-position:0 0;

    left:0px;

    width:125px; }

.digitalhubincwidget-nav ul li.sm2 {

    background-position:-125px 0;

    left:100px;

    width:124px; }

.digitalhubincwidget-nav ul li.sm3 {

    background-position:-249px 0;

    left:200px;

    width:124px; }

.digitalhubincwidget-nav ul li.sm4 {

    background-position:-373px 0;

    left:300px;

    width:125px; }

.digitalhubincwidget-nav ul li.sm5 {

    background-position:-498px 0;

    left:400px;

    width:126px; }

.digitalhubincwidget-nav ul li:hover {

    z-index:1000; }

.digitalhubincwidget-nav ul li.sm1:hover {

    background-position:0 -75px; }

.digitalhubincwidget-nav ul li.sm2:hover {

    background-position:-125px -75px; }

.digitalhubincwidget-nav ul li.sm3:hover {

    background-position:-249px -75px; }

.digitalhubincwidget-nav ul li.sm4:hover {

    background-position:-373px -75px; }

.digitalhubincwidget-nav ul li.sm5:hover {

    background-position:-498px -75px; }

/*Menu Ends Digitalhubinc.com */

    3. Now save your template...

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

HTML Code : 

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

<div class="digitalhubincwidget-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"><ahref="#"></a></li>

</ul>

</div>

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

End.

Credits : widget created by : HARDEEP ASRANI

FOLLOW US ON