Horizontal Double Line Menu

Horizontal Double Line Menu is good looking menu, so if you think same with me feel free to get this code.

For the demo, please click at the button below :

For install this menu to your blog, 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) template*/ /*URL: http://css-lybrary.blogspot.com */ /*Credits: CSS Library for new blogger (beta) template*/ /*URL: http://css-lybrary.blogspot.com */ #double-line{ padding: 0; width: 100%; background: transparent; voice-family: "\"}\""; voice-family: inherit; border-top: 5px solid #d25a0b; } #double-line a{ float:left; display: block; color: white; margin: 0 1px 0 0; padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: #000000; border-bottom: 1px solid white; border-top: 1px solid white; font-weight:bold; } #double-line a:hover{ background-color: #808080; } #double-line #current a{ background-color: #d25a0b; border-color: #d25a0b; } #color-line{ clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #d25a0b; }



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="double-line"> <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 id="color-line">&nbsp; </div> </div> <!-- closed for double line menu -->




5. Click SAVE button


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


7. Click SAVE button


8. Finish

Just a little work, you can enjoy your menu.