Horizontal Solid menu

At this time i will give you a different menu style. If the other menu i made without image background, now i made it with image background menu :

For the demo, please click at the button below :



Want use it to your blog? Ok, for install 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>


/* horizontal solid menu di mulai ------------------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ /*URL: http://css-lybrary.blogspot.com */ .menu-solid{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: black url(http://24rohman.googlepages.com/tabhitam.gif) center center repeat-x; } .menu-solid { display: inline; } .menu-solid a{ float: left; color: white; padding: 9px 11px; text-decoration: none; } .menu-solid a:visited{ color: white; } .menu-solid a:hover, .menu-solid .current{ color: yellow; background: transparent url(http://24rohman.googlepages.com/tabmerah.gif) center center repeat-x; text-decoration:none; }



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


<!-- silahkan anda ganti alamat linknya dengan kepunyaan anda --> <div class='menu-solid'> <a href='http://template-unik.blogspot.com' title='back to front page'>Home</a> <a href='http://www.kolom-tutorial.blogspot.com' title='all about blogging at blogspot in bahasa indonesia'>Blog Tutorial</a> <a href='http://rubrik-elektronik.blogspot.com' title='all about electronics'>Rubrik Elektronik</a> <a href='http://css-lybrary.blogspot.com' title='free css navigation for your blog, get it now'>Free CSS Style</a> <a href='http://www.obralplus.com/?id=rohman' title='menjual berbagai software dan ebook berkualitas tinggi dengan harga super murah'>Obral Plus</a> <a href='http://www.resepbisnis.com/?id=rohman' title='panduan praktis membuat website'>Belajar buat website</a> </div> <!-- akhir menu solid -->



5. Click SAVE button


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


7. Click SAVE button


8. Finish

Enjoy !