Memasang CSS Menu Horizontal

Memasang CSS Menu Horizontal
Fungsi CSS Menu Horizontal Sama halnya  dengan yang membedakan hanya tampilannya saja
berikut cara penerapannya :
Login ke akun blog klik tatletak klik tambah gadged
copy code dibawah ini letakan kedalam gadged tersebut klik simpan selesai

<style type="text/css">#cssmenu ul{margin:0;padding:0;list-style-type:none;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglamUmBic5iaAbwhR0LBpPQ2JQLcSyRjiX1vkzvSwrSeL94YQDUgzzgbmQNOJVXnVHaNQr7YEeK1_kJGtPtBq8Ey63s0m1rzUpDPVGlQy-EbtctEE6d7Nr7S5fLGIMCE6UKIrshm9fYIo/s1600-r/Capture.PNG') repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #004c99;border-top:1px solid #74b0c6;width:auto}#cssmenu li{display:block;float:left;margin:0;padding:0}#cssmenu li a{display:block;float:left;color:#6d7078;text-decoration:none;font-weight:bold;padding:12px 20px 0 20px;height:24px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglamUmBic5iaAbwhR0LBpPQ2JQLcSyRjiX1vkzvSwrSeL94YQDUgzzgbmQNOJVXnVHaNQr7YEeK1_kJGtPtBq8Ey63s0m1rzUpDPVGlQy-EbtctEE6d7Nr7S5fLGIMCE6UKIrshm9fYIo/s1600-r/Capture.PNG') no-repeat top right}#cssmenu li a:hover{background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirgMoCEK8iANs2bwwehBGZyNqC2rxUdUVQ-SLBgRz2tPt2Awhz3iCxd0OtcE38ua3P_ZOAidjrMmitIej-QR0CpjZhwLyOcO36iO8Kp3uWxENe7e3FXvnthial_aFtmdXV6C6AYisitZE/s1600-r/3-mys2010.PNG') no-repeat top right;color:#6d7078}</style><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this code Pure CSS Menu Mys2010 or it will not work -->

<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="#/" ><span> MENU 1</span></a>
</li>
<li class="active"><a href="#/" target="_blank"><span>MENU 2</span></a></li>
<li class="active"><a href="#/"><span>  MENU 3 </span></a></li>
<li class="active"><a href="#/"><span>  MENU 4 </span></a></li>
<li class="active"><a href="#/"><span>  MENU  5 </span></a></li>
<li class="active"><a href="#/"><span>  MENU 6 </span></a></li>
<li>
<li class="active"><a href="#/"><span>  MENU 7 </span></a></li>
<li class="active">
<a href="#/"><span> MENU 8 </span></a></li></li></ul></div>

Penjelasan : Ganti tanda yang berwarna orange dengan link sobat

All Sources
Edited by. Myscript2010

DEMOSHOW