How To Customize Navigation Menu On Blogger

How To Customize Navigation Menu On Blogger :

Hello Pro Bloggers Today I Am Teach You How To Customize Navigation Menu On Blogger.So Follow My Steps..............

1-> Please Download Backup Your Blog

2-> Click On Layout And Click On Add Gadget

3-> Select The HTML/JAVASCRIPT

4-> Paste The Below Code

<div class="shadowblockmenu">
<ul>
<li><a href="#">*</a></li>
<li><a href="#">*</a></li>
<li><a href="#">*</a></li>
<li><a href="#">*</a></li>
<li><a href="#">*</a></li>
<li><a href="#">*</a></li>
</ul>
</div>

5-> Change # With Your Link And Change * With Your Tab Name You Want

6-> Now Save Your HTML/JAVASCRIPT

7-> Now Go To Template And Select Customize

8-> Now Click On Advanced And Click On Add CSS

9-> Now Paste The Below Code

/* The CSS Code for the menu starts here www.showmedreams.blogspot.com */

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 687px;
margin:0 auto;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB;
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu li:nth-of-type(1) a{
border-left: 1px solid #BBB;
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicwdfc8O6NhyaPjy1cp1IqVLmVLE_IRIf0PMb7JqHNc_3O-InHONgG1l2y1BP6lJ_BjAag_DHdMP0rEXxaBGiRzZYaAq3n5SKczU1HP10J113MBDu6uPdpSZQYubD4vy9NZ0NtdFaEENg/s1600/bt_home.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(2) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUvBPylCDjGo_Lw82gAF5lcNrY08gtPx-XL9pOScaC-PkD21HCqxbp20q15srf_4QA_l5YyS6RroLAh2QT-BXvQxiJIhHP0PvIzRg014mDTN3VzEW9N6RochWQHmxeopzQrgfMza7gG-c/s1600/bt_bulb.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(3) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5BDkI_KGk7tVKp2KZyIkPVAsDSzy2aZIh4TazJOaSgXH6p77kbUHcxsZkO22e5SPlPzcwuiWn7j9_yoySVp3rST1SfBRf-6JmFhJ_68yfYIY7kV1ge0G_q7GCQyIR17bETz4KL4QZVQY/s1600/bt_database_add.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(4) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3etzTOJ4C9Lc-J3WQWJz2maQSlPLM_u4WHnc9x9TBlnmku_judpcos3bXXDxrQZddo6J4f34lsu2YNyDLhpXTdCH1Eq6N2u6b4i7RLYW9ajGBbWPsv-Etm5BLKndn0NOIjnFFv7nNZo/s1600/bt_films.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(5) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw83mjZzXTTybjx3jLYfhqw3106o8w6T9ShTRVk5V75l-rQBEPF1u89lCbyIQAUcaGegVXjIbiTcrfwNaRJ4Kz25ahvZEy0tAsdpERnvp2cRlHVmWYduLurUsl7UqFUqviRSgw0WS5jJo/s1600/bt_mobile-phone.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(6) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5yb_tQXNaRBXhL6QJv_mONdG4eFCaa6wrW0ywa_98ouXp0uHGFWRBQKzq8ZO6xAfjuF47uovwgnuNp2JDUQ9S_zcYndXgFwBHmTvPd_qTxiaCsAJ1PbpYYbcRb0M3rLAYUwTfosZtrM/s1600/Bt_Help_Circle_Blue.png) 1px center no-repeat;
}
.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);