Cara Membuat Menu html dan css di Blog

Pada malam hari ini saya akan memberikan tips untuk membuat menu Html dan Css di blogger, walaupun kondisi saya sekarang lagi kurang gak enak badan (doain yee biar cepat sehat :D).
menu merupakan navigasi yang sangat penting untuk blog/website, agar mempermudahkan pengunjung untuk melihat halaman dengan memilih setiap navigasi yang ada di blog, pasti kalian tidak asing lagikan dengan namanya navigasi/menu. mungkin di antara kalian yang ingin blognya ada navigasinya... sobat ikuti saja, langkah-langkahnya yang akan saya berikan....

Langkah-langkah:

1. buka blog anda dan pilih template, setelah itu klik edit html.
2. dan copy kode css dibawah ini dan dan letakan tepat diatas ]]></b:skin>

/************************************************** 
File: style.css
Desctription: Demo menu horizontal
Created : Mei, 1st 2014

**************************************************/

*{padding:0;margin:0}

.valerian-17-top{
height:20px;
background:rgba(255,255,0,.3);
margin-bottom:20px;
padding-top:5px;
font-size:11px;
font-family:verdana, arial, Times New Roman;
text-transform:uppercase;
border-bottom:1px solid rgba(0,0,0,.1);
}
.valerian-17-top a{
text-decoration:none;
color:#000;
}
.valerian-17-top a:hover{color:#FFF}
.valerian-17-top-left{
display:block;
float:left;
padding-left:10px;
}
.valerian-17-top-right{
display:block;
float:right;
padding-right:10px;
}
.valerian-17-clear{
clear:both;
padding:0;
margin:0;
}

   3. setelah itu cari kode </b:section>, dan copy kode Html di bawah ini, tepat dibawah kode </b:section>

<div class='valerian-17'>
<ul class='valerian-17'>
<li><a class='' href='valerian-17.blogspot.com'>Home</a></li>
          <li><a class='lang' href='http://valerian-17.blogspot.com/p/about-me.html'>About me</a></li>
          <li><a class='lang' href='http://blogger.com'>Blogger</a></li>
          <li><a class='lang' href='http://facebook.com'>Facebook</a></li>
          <li><a class='lang' href='http://twitter.com/juanvaleriand'>Twitter</a></li>
                </ul>
</div>

   4. apa sampai langkah ini sudah selesai ??? tentu, belum selesai...
   5. setelah itu copy lagi kode CSS dibawah ini, tepat dibawah kode </b:template-skin>

       <style type="text/css">
h1{margin:5px}
.valerian-17{margin:50px;}
.valerian-17{list-style-type:none;padding:0;margin:0;background:#FF800D;padding:10px;border-radius:5px;box-shadow:inset 0 0 5px 2px #FFF}
.valerian-17 a{text-decoration:none; color:#FFF;font-weight:bold}
.valerian-17 li{display:inline;margin:5px 0}
.valerian-17 li:before{content:&#39; | &#39;;color:rgba(0,0,0,.1)}
.valerian-17 li:first-child:before{content:&#39; &#39;}
.valerian-17 li a{margin-right:5px; margin-left:5px;padding:5px;border-radius:5px;
-webkit-transition:background-color 500ms ease-in-out;
-moz-transition:background-color 500ms ease-in-out;
}
.horizon-menu li a:hover{background-color:#000033}

@media (max-width:767px){
.demo-container{margin:5px;}
.horizon-menu li{display:block}
.horizon-menu li:before{content:&#39;&#39;;color:rgba(0,0,0,.1)}
}
</style>

demo : http://menu-horizontal.blogspot.com/

oke saya akhiri sampai di sini dan semoga dapat dipahami oleh sobat blogger.

SEMOGA BERMANFAAT :)