Cara membuat menu di blogspot

Tampilan dasar dari blog adalah sbb:

Berikut langkah-langkah dalam membuat menu di blog

1. login ke Blog kamu2. Masuk ke pengaturan TempleteEdit HTMLceklist pada Expand Template Widget3. Cari Kode ]]></b:skin> Gunakan tombol CTRL + F untuk mempermudah pencarian

kode4. Jika kode sudah ketemu,, Copy kode css berikut dan letakan diatas kode ]]></b:skin> 

/* Horyzontal Droupdown menu----------------------------------------------- */#top-wrapper{background:url(http://1.bp.blogspot.com/-Dz55XjfHfIU/T2AtDWgb0aI/AAAAAAAAA9I/vZgjL1iEbgk/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}#topbar{width:980px;height:40px;margin:0 auto}#top{width:100%}#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}#top a.arrow{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}#top li{float:left;position:static;width:auto}#top li ul,#top ul li{width:170px}

#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}#top li:hover ul,#top li.hvr ul{display:block}#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{display:inline-block}#inner{padding-top:40px;}#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}* html, * html body{overflow-y:hidden;height:100%;}* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }* html #fixedinner{margin-right:17px;}* html #fixed {position:absolute;}

5. Cari lagi kode sbb : <div class='header-outer'> 6. Tambahkan kode html berikut di bawahnya

<div id='fixed'><div id='fixedinner'><div id='top-wrapper'><div id='topbar'><ul id='top'><li><a href='/'><span>Welcome</span>Homepage</a></li><li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a><ul><li><a href='#'>Sub menu 1</a></li><li class='hr'/><li><a href='#'>Sub menu 2</a></li><li class='hr'/><li><a href='#'>Sub menu 3</a></li>

<li class='hr'/><li><a href='#'>Sub menu 4</a></li></ul></li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a><ul><li><a href='#'>Sub menu 1</a></li><li class='hr'/><li><a href='#'>Sub menu 2</a></li><li class='hr'/><li><a href='#'>Sub menu 3</a></li><li class='hr'/><li><a href='#'>Sub menu 4</a></li></ul></li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a><ul><li><a href='#'>Sub menu 1</a></li><li class='hr'/><li><a href='#'>Sub menu 2</a></li><li class='hr'/><li><a href='#'>Sub menu 3</a></li><li class='hr'/><li><a href='#'>Sub menu 4</a></li><li class='hr'/><li><a href='#'>Sub menu 5</a></li></ul></li>

</ul><br class='clearit'/></div><div style='clear:both;'/></div></div></div>

7. Tinjau dulu sebelum simpan8. Kalau sudah benar klik simpan template9. Hasilnua sbb:

10. Jika ingin berfungsi link menunya maka buat posting baru atau lihat posting lama kemudian edit posting klik tautan permanen maka di situ ada alamat link posting kemudian copas alamatnya ke link html menu Contoh:

Link yang di posting adalah http://widodosaputra85.blogspot.com/2013/02/partisi-hardisk.html

Kode yang di sub menu adalah <li><a href='#'>Sub menu 1</a></li>

Maka kita rubah menjadi<li><a href=' http://widodosaputra85.blogspot.com/2013/02/partisi-hardisk.html ‘>Partisi hardisk </a></li>