Cara Membuat Laman Navigasi di Blog

1. Login ke Blogger.
2. Pilih Templete untuk mengakses halaman Edit HTML,
     dan centang tulisan expand template widget.
3.  Carilah Kode ]]></b:skin> menggunakan CTRL+F.
4.  Letakkan kode berikut tepat diatas kode ]]></b:skin>.  




<a href=http://www.tutorialblogspot.com/></a>

  /* Horyzontal Droupdown menu<br /> ----------------------------------------------- */<br /> #top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3BnTZFn_Ey668hAyKdkPJyYbAXv-d6enaRKJHVVcRYLT76onKh9werHgk1indfOpRpA637XmGtLoBwA30bVvVnCDecm6uGgJCvu2q-_kB01BRtNXvsjPCpH7Q9TOGEqW4Z1TgiRU_g8/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}<br /> #topbar{width:980px;height:40px;margin:0 auto}<br /> #top{width:100%}<br /> #top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}<br /> #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}<br /> #top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwh7Z6aCG7R2t2N1V_RiOfjElcBDPiiqtlFiVtl9KQMq5ORSrd7iHKKWxEKnzKgPA50Dd_XlAs_iRJ8zmxjdmz_w3Otmuq_7QJYQRscyN5PIT-IH2TJTV1CgbQ08xrmiJVrD3T9r3ksg/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}<br /> #top li{float:left;position:static;width:auto}<br /> #top li ul,#top ul li{width:170px}<br /> #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}<br /> #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)}<br /> #top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}<br /> #top li:hover ul,#top li.hvr ul{display:block}<br /> #top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}<br /> #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}<br /> #top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}<br /> #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}<br /> #top li:hover a span,#top li:hover a.arrow span{color:#f1c822}<br /> <br /> .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}<br /> .clearfix{display:inline-block}<br /> #inner{padding-top:40px;}<br /> #fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}<br /> #fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}<br /> * html, * html body{overflow-y:hidden;height:100%;}<br /> * html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }<br /> * html #fixedinner{margin-right:17px;}<br /> * html #fixed {position:absolute;}  <br /> <br />  
5. Angka warna merah pada kode diatas adalah ukuran panjang menu pada blog anda.

6. Tata letak >> tambah gadget (dimana saja) >> Html/JavaScript

7.  Letakkan kode berikut

<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><br /> <ul> <li><a href='#'>Sub menu 1</a></li> <li class='hr'/><br /> <li><a href='#'>Sub menu 2</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 3</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 4</a></li> <br /> </ul> </li> <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a><br /> <ul> <li><a href='#'>Sub menu 1</a></li> <li class='hr'/><br /> <li><a href='#'>Sub menu 2</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 3</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 4</a></li> <br /> </ul> </li> <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a><br /> <ul> <li><a href='#'>Sub menu 1</a></li> <li class='hr'/><br /> <li><a href='#'>Sub menu 2</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 3</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 4</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 5</a></li> <br /> </ul> </li> </ul> <br class='clearit'/><br /> </div> <div style='clear:both;'/> </div> </div> </div> <br>                     

8. Untuk memasukan url pada submenu diatas,ganti kode '#' dan selipkan url anda pada tanda pagar
     tersebut.
9.  Sekarang simpan template anda.

Posted in: Tips Blog