Add best css cute navigation menu in blogger. 6

Hello friends add this best css cute navigation menu in blogger easily.

Follow simple and easy step to ading this special cute navigation menu in blogger ---->>>>

* First go to your blogger Dashboard.

* Click in design tab and edit HTML.

* click in small box to expand your blogger template.

* Now find this code ]]</b:skin> by Ctrl+F key.

* Copy below code and paste before ]]</b:skin>

#cats { max-width: 974px; height: 37px; margin: 0; padding: 6px 15px 0px 15px; max-height: 42px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQe2wK15V3i9SgAP8etKhgaxyd-g8Y5X-kOqSEhs58ts9d7gIkaWfPpeR79MWcpnb5nqPLBUSfM8iTPbl6eQrRhQaQLWOUqy_T6MJRNlSR616gFUjTH8U0HNSbPaLG7YHqsH-isi2GwRFq/s1600/navbg.png) no-repeat; overflow:hidden;}
#cats ul { list-style-type: none; float: left; padding: 0px 0px 0px 0px; margin: 0; width: 970px; }
#cats ul li { float: left; display: block; height: 31px; padding: 0px; margin-right: 10px; margin-bottom: 6px; }
#cats ul li:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7P4JV6c71eY-jQeNSs2TXH-_WoAFIQGrKlO6CVkEIF3TRPqKCFBeWrqg5rfhyphenhyphenXWvWiMCg-8Se-PmuKQ4dVAsKpzmZ5j24IbsVVITsFugeCYd93v_KjJLUbF6mvIW49PfjI2zuknQd9nT/s1600/cats-hover-left.png) left; }
#cats ul li a:link, #cats ul li a:visited, #cats ul li a:active { float: left; color: #fff; text-transform: uppercase; display: block; height: 29px; font: bold 12px arial; padding: 7px 10px 0px 10px; margin: 0px; text-decoration: none;}
#cats ul li a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDi-6OcArBM473Mkvw-nlSbWfuSNZk0D0MmbukHkQg_AbwtjfFGGGiSC9mQZaj4CW49taSvAwuoat1icioQRk8oTt8zhjCS8O9OTiU5p1W83w_BuJ7Bbm2Ekzx2sJ7kVz9KL0ilkC8wofK/s1600/cats-hover-right.png) no-repeat top right !important; background: none; color: #FFF; height: 29px; text-decoration: none; }
#cats .home a:link, #cats .home a:visited, #cats .current_page_item a:link, #cats .current_page_item a:visited { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDi-6OcArBM473Mkvw-nlSbWfuSNZk0D0MmbukHkQg_AbwtjfFGGGiSC9mQZaj4CW49taSvAwuoat1icioQRk8oTt8zhjCS8O9OTiU5p1W83w_BuJ7Bbm2Ekzx2sJ7kVz9KL0ilkC8wofK/s1600/cats-hover-right.png) no-repeat top right !important; background: none; color: #FFF; }
#cats .home, #cats .current_page_item { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7P4JV6c71eY-jQeNSs2TXH-_WoAFIQGrKlO6CVkEIF3TRPqKCFBeWrqg5rfhyphenhyphenXWvWiMCg-8Se-PmuKQ4dVAsKpzmZ5j24IbsVVITsFugeCYd93v_KjJLUbF6mvIW49PfjI2zuknQd9nT/s1600/cats-hover-left.png) left !important; background: none; position: relative; z-index: 80 !important; }
#searchbox {
width:222px !important;
width:230px;
height:27px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKoQ5c85efsq7IegoK5HzM89njXifVKWPYCJ5q2rr8B6hN_kZL5e9ux_bocfDC6WQDPEcJZnqheMrCIMl8nvxAgXwF3hfkpsFEAEGZEz3mH-3WbOJ9dYBTrxcgdOPPBbFnMc1wnArDqo75/s1600/input.png) no-repeat;
}

* Now click to save your blogger template.

* Again go to your blogger dashboard and click in design tab.

* Now you are here-->>>Page element.

* Click in add gadget which is below Blogger Header.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<div id='cats'>
<ul>
<li class='home'><a href='YOUR BLOG URL HERE' title='HOMEPAGE'>HOME</a></li>
<li class='cat-item'><a href='TAB2 URL HERE' title='TAB1 TITLE'>TAB2 TITLE HERE</a></li>
<li class='cat-item'><a href='TAB3 URL HERE' title='TAb2 TITLE'>TAB3 TITLE HERE</a></li>

<li class='cat-item'><a href='TAB4 URL HERE' title='Tab3 title'>TAB4 TITLE HERE</a></li>
<li class='cat-item'><a href='TAB5 URL HERE' title='Tab4 title'>TAB5 TITLE HERE</a></li>
</ul>
</div>
</div>

NOTE:- Change Highlighted text with your own text ok.

* Now click to save your HTML/javascript and now you are done.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Add best css cute navigation menu in blogger. ~