Tutorial Membuat TOP MENU Diatas Header

1. Blogger dashboard >> Tamplate >> Edit HTML

2. Copas kode berikut ini diatas kode ]]></b:skin>

 /* CSS FOR MENU BAR STARTS */   

 .shadowblockmenu{  

 font-weight: bold;  

 font-size: 85%;  

 width: autopx;  

 background-color: transparent; -webkit-box-shadow: 0 10px 10px #666;

 }  

 .shadowblockmenu ul{  

 border: 1px dotted #BBB;  

 border-width: 0px 0;   

 padding: 0;  

 margin: 0;  

 overflow: hidden;  

 }  

 .shadowblockmenu ul li{  

 display: inline;  

 margin:0;  

 padding:0;  

 }  

 .shadowblockmenu ul li a{  

 display:block;  

 float:left;  

 text-transform: none;  

 color: Black;  

 padding: 8px 15px 8px 9px;  

 margin: 0;  

 text-decoration: none;  

 }  

 .shadowblockmenu li:nth-of-type(1) a{   

 padding-left:25px;
 
 }  

.shadowblockmenu ul li a:hover{  

 color: white;  

 }

Note : Sesuaikan lebarnya dengan lebar header blog kalian " Lihat Code width: autopx"

3. Simpan kode berikut ini tepat dibawah kode </head>

 <div class='shadowblockmenu'>  

 <ul>  
 <li><a href='#'>Daftar Isi</a></li>  
 <li><a href='#'>Kumpulan Tutorial</a></li>  
 <li><a href='#'>Kumpulan Inject</a></li>
 <li><a href='#'>Kumpulan Film 2015</a></li>  
 <li><a href='#'>Cheat Pointblank 2015</a></li>  
 <li><a href='#'>Lagu POP Indonesia</a></li>
 <li><a href='#'>Lagu POP English</a></li>
 <li><a href='#'>Lagu Dangdut</a></li>
 <li><a href='#'>Materi Kuliah Teknik Industri | 2013</a></li>
 <li><div class='topsearch' style='float: right'>  
 </div>  
 <div style='clear:both;'/></li>  
 </ul>  
 </div>

Note : Ganti nama menu linknya dengan "selera" kalian serta "Link URL" pada postingan

Contoh : <li><a href='http://diarry-pangerant.blogspot.com/2015/04/info-bulletin-terbaru-dari-blog-kami.html'>Daftar Isi</a></li>

4. Save Template !!

5. Selesai & Hasilnya Seperti ini :-)

Tweet