Thursday, September 13, 2012

Attractive Slate CSS Menu Menu Bar For Blogger

Earlier i posted about more menubars. Actually This is also great menu bar, This include 4 colors.
and nice hover style. Few days ago i posted about Stylish CSS3 Lavalamp Menu Bar For Blogger
With jQuery
.Its also look like similar.But this not include jquery.you can add it as your like. Follow
these step well to add to your blog. Menubar Collection


DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFQjm31QDVNAR9IeLpkVMWdZ3oFTSLtS4b36tkzs9mfAkfJtg07lmrTCsYfhBbR_4uxYDqsj_c881C_pgKmvsh2OdC4fEuqeM7cLlZ0ml_-lwYcd0DjAVxATMSCv9tkbWSGuHZSnfQtXU/s1600/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnUAGF2EmSOILxuaBrLcztusF5t8q3H51lOsKpP0rsHzLpPTtTZ13WBXmg_57hNTntQoDdYf0ilrC8pq59QU7zHcvWdKm4SQv7IaP3eN8_SEyVLc1carvlgyH9ZG3ESairEuaYpqJriI/s1600/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Blueslate nav ---------------------- */

/* ---------------------- Greenslate nav ---------------------- */
.green #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeGCFJXRotgToQ3YZUgDefFiLiQAm_4kbKfamdhB1kqIWozNrhJS1S-gi2QKqFHsPrgXMfRbpY1moR-zeYixI3hm7Ro_Kx9wN5YDKwv6rNGpwppd0UTHP51DPfRwC2D0e4UHjqYw5Il70/s1600/greenslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.green #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbE9DTNnqdvQkFqtnZc0IlMR2Hv5J4hygGI2KBUVixwNPYNDDISzwc5skBhyphenhyphenOUTBENTRDqrkHwrrENgb7YUE1Xsv9YGEoAQvO1K1qvaxzns9r8fSpZFI4NRoEL_xkIBpv8XYcocoZnQk8/s1600/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Greenslate nav ---------------------- */

/* ---------------------- Redslate nav ---------------------- */
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7I4-75dffha3HiaisMSob1Vr8YpT8_6hKtLoVUrVU7DeVO1nYkSwIJZ5xHB15f0Zni2iBs7ChmfziHiHH-CQ-aK9zMzEQBBabLW3mCicvWgEx0xBGuj4dCUWNL86zv5tOrB18vIIJvkU/s1600/purpleslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4txM_p8EnFXGOekNQ5fz46RSppD3GigTWxewNNRcbxwtnZt8VKZuyQP7D67bra5vOX-YQCEvUxMdXj-SKH6VgsuWoQ5Y8OqdaIOQORIN27AW88FwQoydWKXpXNHHNakrTtvwfEERklS8/s1600/purpleslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Redslate nav ---------------------- */

/* ---------------------- Purpleslate nav ---------------------- */
.purple #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsucOfmcp2WXLsqpP_9FP83MJJFS8tqKSebll-f25qQO1i8EVDZC5OLxsSKRS-iz_oVQlDFfHQyERayhvtN9ojWMkAQWYIwqXC8UsRINwpdlK1RxP37Ma20pHAvyXUlpBjyXYwWSw0J-0/s1600/redslate_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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjMfQwtQHJSAcZRc3M2GkhwBk4hKcMCPlSgK7mT9jd9wh46q9F4WBHTkE2AO982cv35TPiitaO3T5ww4Or3x55p6by1YRG5hf7d6DrpGerZEKoxusb8qinjHDeGWpDoMelj-q6mdjdgjk/s1600/redslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Purpleslate nav ---------------------- */

6. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

5.  Paste below code Before <div id='content-wrapper'> code

<div class="blue">
 <div id="slatenav">
 <ul>
 <li><a href="http://www.bloggertrix.com/" title="css menus" class="current">Home</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">About Us</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">Services</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">Our Work</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">Contact Us</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">Add This</a></li>
 </ul>
 </div>
 </div>


*Replace # With your URL
*Replace Name with as your like.

6. To change the style, you have to replace <div class="blue"> with below styles


     <div class="blue">


   <div class="green">

   <div class="red">

  <div class="purple">

7. Now save your template
 you are done.

4 comments:

  1. It said this Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup.

    Error 500

    ReplyDelete