PurpleSlate CSS Navigation Menu for blogger/Blogspot . 0

Slate CSS Navigation Menu for blogger/Blogspot

Follow simple and easy step to adding this menu to your blog ---->>>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

<style type="text/css">
/* ---------------------- Purpleslate nav ---------------------- */
.purple #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(http://santabanta.mywapblog.com/files/purpleslate-background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#FBDAFA;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.purple #slatenav ul li a:hover,.purple #slatenav ul li a.current{color:#fff;background:transparent url(http://santabanta.mywapblog.com/files/purpleslate-backgroundove.gif) no-repeat top center;}
-->
</style>

* 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 in your blog sidebar.

* When open new window choose HTML/javascript from list.

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

<div class="purple">
 <div id="slatenav">
 <ul>
 <li><a href="ADD HERE YOUR BLOG URL" title="" class="current">Home</a></li>
 <li><a href="TAB1 URL HERE" title="">TAB1 TITLE HERE</a></li>
 <li><a href="TAB2 URL HERE" title="">TAB2 TITLE HERE</a></li>

 <li><a href="TAB3 URL HERE" title="">TAB3 TITLE HERE</a></li>
 <li><a href="TAB4 URL HERE" title="">TAB4 TITLE HERE</a></li>
 </ul>
 </div>
 </div>

NOTE:- Remove Highlighted text from above code with your own ok.

* Now click to save your HTML/javascript and after saving this element Drag and drop this element  below blogger Header and again click to save button.

* Now you are done.... CHEERS

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: PurpleSlate CSS Navigation Menu for blogger/Blogspot . ~