How To Add 3D CSS Horizontal Menu to Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
#tabs22 {
 float:left;
 width:100%;
 background:#efefef;
 font-size:93%;
 line-height:normal;
 border-bottom:1px solid #666;
 }
#tabs22 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
 }
#tabs22 li {
 display:inline;
 margin:0;
 padding:0;
 }
#tabs22 a {
 float:left;
 background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EkllkC9g2K9JrkiaD1Fys_EeWM4oCa5_dLHMQybOfrjL-8a67UppMXBs5IyWpRoH6BhihxU0W_KJJ0aooki5yMY-P5cCea07PmxcxPlnEN9A4mbaJSPmc6voSONVEcwX1aygZdRtVON9/&quot;) no-repeat left top;
 margin:0;
 padding:0 0 0 4px;
 text-decoration:none;
 }
#tabs22 a span {
 float:left;
 display:block;
 background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWl37YMe9mhTfyHQVtfZOzVYrbZF_ZJ1_vhwM07SFaZkQe2gZwBmWxfBBBzghdmfnOsgH_BllXBCqw56Rkzf_Sd-hiGOB8VjEvvW35LP0oQBUqv2KNo18jW3JFeG0f2dYLOD6yDp8TJCYF/&quot;) no-repeat right top;
 padding:5px 15px 4px 6px;
 color:#666;
 }
#tabs22 a span {float:none;}

#tabsF a:hover span {
 color:#FFF;
 }
#tabs22 a:hover {
 background-position:0% -42px;
 }
#tabs22 a:hover span {
 background-position:100% -42px;
 }
</style>

Note : Please Host above 2 images yourself.

4.Save your template.

5.Now Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" from header section and add the code given below and click save.

<div id="tabs22">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>

7.Now you are done.It will look like this:

Beautiful CSS Horizontal Menu For Blogger