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.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Add best css cute navigation menu in blogger. ~ Twitter FaceBook

6 Responses So Far:

chanchal singh baghel said...

suitable information for blogger setting data

asad said...

good and effective tips

Android Linked said...

Thank you for you great tips. Let's me try it with my blogspot blog.

dharmarajarun said...

SIR,
i have done the above in my blog, but it appears diffrently, earlier i edited TABS BACKGROUND in my settings, i dont know how to clear this. can u help me pls? my blog URL is http://www.stocksindialive.blogspot.com

. said...

i too using this menubar in my blog. I like to add sub menu. How to add this?

Hari

dbestlists said...

Really wonderful post and tuts. But there is something lacking complete "just my opinian", it's demo link my brother :)

Maybe, if available demo link it's an amazing tuts. :D

In different times, our reviews list Best Menu for Blogger in my blog. Hopefully useful for your everybody.

Thx guys. Happy blogging!!

Categories

Select Your Categories