Mungkin banyak artikel kaya gini, memberikan tutorial membuat menu dan sub menu pada blog.
Aku juga berawal dari googling. Tapi hasil menu dan submenunya berwarna biru. Padahal pengguna blogger pasti ingin menyesuaikan warna menu dengan template blog.
Maka setelah aku utak atik, warnanya bisa aku ganti.
Dan di artikel ini, aku sertakan bagaimana mengubah warna background menu tersebut.
1. Buka www.blogger.com.
2. Klik Template > Edit HTML
3. Kamu letakkan cursor di sembarang tempat di kolom yang terdapat banyak kode, dan tekan Ctrl + F. Sehingga muncul kolom Search.
4. Pada kolom search tadi, kamu ketikkan kode
<div
class='main-outer'> , lalu tekan Enter.
Sudah ketemu kodenya? kalo sudah, kamu Perhatikan dulu TULISAN WARNA WARNI yang ada pada keterangan di gambar ini.
Tulisan warna warni pada gambar di atas, ADA HUBUNGANNYA dengan tulisan warna warni pada kode di bawah (amati kodenya).. BTW, mengamatinya sekaligus di copas ya kodenya. Kemudian paste DI ATAS kode <div class='main-outer'> yang tadi sudah di search.
Berikut kodenya:
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:WarnaBackgroundMenu;margin:0
15px;padding:0;height:35px;}
#cat-nav a { color:WarnaTeksMenu; text-decoration:none;
text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:WarnaTeksMenuKetikaMenudisentuh; }
#cat-nav li:hover {
background:warnaLatarTabketikaMenudisentuh; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif;
font-size:11px; font-style:normal; font-weight:400; color:#fff;
text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span {
color:#ffffff; }
#secnav, #secnav ul { position:relative; z-index:100;
margin:0; padding:0; list-style:none; line-height:1;
background:#WarnaBackgroundSubMenu; }
#secnav a { font-family:Georgia, "Times New
Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px;
display:block; z-index:100; padding:0 15px; line-height:35px;
text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul {
position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li {
height:30px; border-top:1px solid #000000; }
#secnav li ul li a {
font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px;
padding:0 10px; font-size:11px; font-style:normal; font-weight:400;
color:WarnaTeksSubMenu; }
#secnav li ul ul {
margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav
li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li
li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li
li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a
href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a
href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3 yang memiliki sub menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 3a</a></li>
<li><a
href='#'>Sub Menu 3b</a></li>
<li><a
href='#'>Sub Menu 3c</a></li>
<li><a
href='#'>Sub Menu 3d</a></li>
<li><a
href='#'>Sub Menu 3e</a></li>
</ul>
</li>
<li><a
href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5 yang memiliki sub menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 5a</a></li>
<li><a href='#'>Sub Menu 5b</a></li>
<li><a href='#'>Sub Menu 5c</a></li>
<li><a href='#'>Sub Menu 5d</a></li>
<li><a href='#'>Sub Menu 5e</a></li>
</ul>
</li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#'>Menu 7</a></li>
</ul>
</div>
5. Nah, karena sudah mengamati gambar dan kodenya, artinya, tulisan berwarna yang ada pada kode di atas, diganti dengan kode warna yang kamu inginkan.
Kamu bisa liat warna beserta kodenya di SINI < klik
6. Dan tanda # warna biru, kamu ganti dengan URL label.
MISAL: kamu post artikel tentang Tips, sudah diberi label Tips, dan kamu save.... Lalu kamu klik link label tadi, dan URL nya kamu copas ke tanda # biru.
Tujuannya, agar artikel-artikelmu yang masuk kategori Tips, bisa otomatis masuk ke menu Tips.
(Itu contoh untuk artikel Tips agar masuk ke Menu Tips)
Berlaku juga untuk jenis yang lain. Kamu sesuaikan sendiri.
7. Klik
Simpan Template. dan klik
Lihat Blog untuk lihat hasilnya
Ada yg bingung? tanyakan saja.
Trims sudah baca!
Postingan
