Cara membuat menu CSS ( Red Glossy )

Selamat malam sobat blogger semua, pada malam ini saya akan share tutorial blogger yaitu Cara membuat menu CSS ( Red Glossy ),  ok biar gak kebanyakan basa basi, silahkan lihat contohnya dibwah ini :

• Home
• About Us
• Contact Us
• Sitemap

Bagaimana? menarik bukan?  Jika anda tertarik silahkan ikutin langkah berikut :

1. Pergi ke blogger > desain
2. Pilih HTML / Javascript widget
3. Kemudian Masukan kode dibwah ini

<style> .mbt-red-grey-menu{ border:5px solid #cd0000; padding:0; clear:both; } .mbt-red-grey-menu{ margin:0px; padding: 0; float: left; font: bold 13px Arial; width: 100%; overflow: hidden; margin-bottom: 1em; border: 1px solid #625e00; border-width: 1px 0; background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw22QDhnuvN9k4UbYb-tIkfwr34gkgA-0yBf-j7B4txmXP39kyaBA1_8sL-wmLehrWR_pTOTbCQQqRC3fwxri9CXhNGL_dvjj8NZ3AEtdYDMCDmydntJbO_9PQDCQ7MMqwv706orHgYCY/s400/blockdefault.gif) center center repeat-x; } .mbt-red-grey-menu li{ display: inline; } .mbt-red-grey-menu li a{ float: left; color: #fff; padding: 9px 11px; text-decoration: none; border-right: 1px solid white; } .mbt-red-grey-menu li a:visited{ color: #fff; } .mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{ color: #fff; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cdudGxOLoANFSqpxFZFXj_X50jriXdfUrbIxv9VqzgmE5gdVLxFbxUWcKfOvHQ8PzSfjmP4E0zon-OrzFhuH90XuPfakF0ZNy2qQVFpaTPA8lKk9KLWZ82UWuPmLNF-7MkAqc19hw2Q/s400/blockactive.gif) center center repeat-x; } </style>
<ul  class="mbt-red-grey-menu"> <li><a href="#">Home</a></li> <li><a href="#" >About Us </a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Sitemap</a></li></ul>

 4. Terakhir Jangan lupa save! Selesai

NB : kode # berwarna kuning silahkan ganti sesuai dengan link anda!