Cara Membuat Bentuk Laman Keren di Blog

Lihat bagian atas blog saya,anda akan menemukan bentuk lain dari sebuah laman di blog,jika anda berminat silahkan ikuti tutorial ini.

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>.                                                                                                                                                                                                                                        
   /* Horyzontal Droupdown menu
   ----------------------------------------------- */
   #top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI0EUIRnOItKU0CZBxtFmDcI5dVgi55PeVcRrzi_yryPYIM3yBuajikHe3TXmRng9o6y1idoqceYhrKw8LnCoXeqAplrHczZP7YNiwqnX-nrYhZrfGoHkrr_DF9tkvpBKAvIAJvydB94jr/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoQitw1hf-AIADTeRauZ-7zlXDB2GjmXeCHEad9Q6J_7ArSz2wyT7ROgmYGok9749ioGBJzOXQR2Bx92ncirzwNdfz9Wks-uJaZw24zcKoccmmniBiFdo__ss4PHLnv1zTFusZfvoVA8o/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. Angka warna merah pada kode diatas adalah ukuran panjang menu pada blog anda.
6. Selanjutnya cari kode <div id='header-wrapper'> jika tidak ketemu,coba gunakan kode <div class='header-outer'> ,jika ketemu copy code berikut tepat pada bagian bawah code
   
   <div id='header-wrapper'> atau <div class='header-outer'>.                                                                       
   <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. Untuk memasukan url pada submenu diatas,ganti kode '#' dan selipkan url anda pada tanda pagar tersebut.
8. Sekarang simpan template anda.
9. Hanya sembilan langkah untuk membuat Blog anda lebih Sempurna.