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/AVvXsEhxdt4g2nSJgjdeP9sjCGM_R1hYG8-9zcM0PZebx2ygujblHrOnJ12xh3HbO-34FWyxrgLXD27I68eVrlrzLMpddyEPZQyJwM_QSq1vBsa2Ve3Evo1bKLsrPNsDcOaKJQQxXtZMm2ncseA/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/AVvXsEh3Z6npXSFpTwmYJol6gI5PO1zt_fRuwPoGahDZC99R_uM35B5EwteIK5ysL8ZNSNlrRwKqWHrGohCbPNz6vKoY9Uul6oCHWzy0ZowGR0OZdGk-EbK9fbMp03XW9y1wsNhoOWwLhNUCuCk/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!