Cara Membuat Menu Bar di Blog

Cara Membuat Menu Bar di Blog - Blogger, platform buat ngeblog memungkinkan pengguna untuk menyesuaikan blog menggunakan kode HTML dan CSS. Yang pertama mengacu pada kode yang diperlukan untuk membangun bentuk blog, seperti menambahkan tombol dan menampilkan informasi (artikel), sedangkan yang kedua mengacu pada kode yang dibutuhkan untuk elemen lain seperti gaya dan diberi warna, batas dan latar belakang. Kedua hal dibutuhkan untuk membuat menu bar di blog.

Cara Membuat Menu Bar di Blog

Login ke dashboard Blogger Anda, klik "Template" di dashboard blog Anda yang ingin disesuaikan, kemudian pilih "Edit HTML".

Cari kode "]]> </b:skin>" dan masukkan kode berikut tepat di atasnya:

/* Navigation Menu ------------------------------------------------------*/
#NavbarMenu {
width: 100%;
height: 35px;
background:#cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX2e-aX3Zv-RKRk0KXvdAyaJ4Z9aygUJPQj0RkeBuyvwa4coIHfh7rxav-4yW94IfAoTJPYhmGo9NNCpbjJ2rQjHHJl-lgbyYPa-1FOpQUGsMeAHut5ILYpNZpiH_WPBbtdUQTBJCc6cg/s1600/white+to+black.png) repeat-x top; 
color: #cdaa7d margin: 0 auto 0; 
padding: 0; 
font: normal 12px Arial, Tahoma, Verdana; 
border-top: 1px solid #855e42; 
border-bottom: 1px solid #855e42; 
} 
#NavbarMenuleft { width: 1200px; float: left; margin: 0; padding: 0; } 
#nav { margin: 0; padding: 0; } 
#nav ul { float: left; list-style: none; margin: 0; padding: 0; } 
#nav li { list-style: none; margin: 0; padding: 0; } 
#nav li a, #nav li a:link, #nav li a:visited { color: #ff0000; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: bold 12px Arial, Tahoma, Verdana; } 
#nav li a:hover, #nav li a:active { background:#ffffff; color: #8b5a00; margin: 0; padding: 9px 15px 8px; text-decoration: none; } 
#nav li li a, #nav li li a:link, #nav li li a:visited { background: #cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX2e-aX3Zv-RKRk0KXvdAyaJ4Z9aygUJPQj0RkeBuyvwa4coIHfh7rxav-4yW94IfAoTJPYhmGo9NNCpbjJ2rQjHHJl-lgbyYPa-1FOpQUGsMeAHut5ILYpNZpiH_WPBbtdUQTBJCc6cg/s1600/white+to+black.png) repeat-x top; width: 140px; color: #fff; text-transform: capitalize; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #855e42; border-left: 1px solid #855e42; border-right: 1px solid #855e42; font: normal 12px Arial, Tahoma, Verdana; } 
#nav li li a:hover, #nav li li a:active { background: #ffffff; color: #8b5a00; padding: 7px 10px; } #nav li { float: left; padding: 0; } 
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } 
#nav li:hover, #nav li.sfhover { position: static; }

Cara mencarinya supaya mudah, pertama klik kotak yang berisi kode-kode (kode template/tema blog). Kemudian tekan Ctrl+F, lalu masukan </b:skin> dan tekan enter.

Masukkan kode berikut tepat setelah "/b:section":

 
Home
 
SECTION 
 
SECTION
 
SECTION
 
SECTION
 
SECTION
 
SECTION
 
 
 
 
 
 

Ganti tulisan "URL" dengan URL yang berkaitan dengan halaman yang ingin dituhu. Demikian juga, ganti "SECTION" dengan label menu yang sesuai.

Jika ingin menambahkan sub-menu tambahan, caranya dengan menyisipkan kode seperti berikut antara

SECTION
 
 

dan

</ul> 
</div> 
</div> 

Itulah sedikit ulasan mengenai cara membuat menu bar di blog, jika posisinya tidak sesuai, Anda bisa mengubah letak kode NavbarMenu nya.

Tweet