Horizontal Blue Menu 2

This menu almost similiar with horizontal blue menu, but it have a little different. If horizontal blue menu have border under menu, horizontal blue menu 2 have border above the menu.

For the demo, please click at the button below :



Do you like this menu? Ok, please follow the instruction below :

Step 1 ;

1. Sign in to blogger with your ID


2. Click layout tab


3. Click Edit HTML tab


4. Click Download Full Template, save your template for backup data


5. Place this CSS code above ]]></b:skin>


/*Credits: CSS Library for new blogger (beta) */ /*URL: http://css-lybrary.blogspot.com */ #blue-menu2{ padding: 0; width: 100%; border-top: 5px solid #236411; background: transparent; voice-family: "\"}\""; voice-family: inherit; } #blue-menu2 a{ float: left; display: block; font: bold 13px Arial; color: white; text-decoration: none; margin: 0 1px 0 0; padding: 5px 10px; background-color: #113464; border-top: 1px solid white; font-weight:bold; } #blue-menu2 a:hover{ background-color: #2E5E9E; color: white; font-weight:bold; color:#66FFFF; } #blue-menu2 #current a{ background-color: #236411; color: white; border-color: #236411; }




6. Click Save Template button

Step 2 :

1. Click Page Element tab


2. Click Add a Page Element


3. Click ADD TO BLOG button below Javascript/HTML


4. Copy and paste the code below in to the element


<!-- Please change the links with your own links --> <div id="blue-menu2"> <div style="margin-left: 100px"><a href="http://css-lybrary.blogspot.com" title="Home">Home</a></div> <a href="http://kolom-tutorial.blogspot.com" title="Tutorial blogger in bahasa indonesia">Kolom Tutorial</a> <div id="current"><a href="http://template-unik.blogspot.com" title="free blogger template">UniQue Template</a></div> <a href="http://www.obralplus.com/?id=rohman" title="Menjual berbagai software & e-book dengan harga super murah, klik di sini !">Obral Plus</a> <a href="http://www.resepbisnis.com/?id=rohman" title="Panduan membuat website secara praktis, klik di sini !">Belajar Website</a> <!-- you can add saveral link ini here --> </div> <!-- close for blue-menu2 -->





5. Click SAVE button


6. Click and hold the new element and drag to bellow of Header Element


7. Click SAVE button


8. Finish

OK, have a nice day for you.