Ini lanjutan dari Tutorial Cara Membuat Template Blogger Sendiri Part 3 silahkan ikuti dan pahami yah kita langsung simak tutorialnya.
Kali ini kita akan memasang menu pada template yang sudah di buat pada part sebelumnya.
1. Buat kode CSS terlebih dahulu atau gunakan kode di bawah ini dan pastekan sebelum kode ]]></b:skin> atau </style>.
2. Buat kode HTML untuk memanggil kode CSS atau gunakan kode di bawah ini dan pastekan sebelum kode <aside id='main-wrapper'>.
Nah, coba simpan template dan lihat hasilnya. Hasil dari part ini bisa anda lihat pada demo dibawah ini.
Jika kurang jelas atau belum mengerti silahkan hubungi saya di Contact Form blog ini, Selamat Mencoba.
Kali ini kita akan memasang menu pada template yang sudah di buat pada part sebelumnya.
Cara Membuat Template Blogger Sendiri Part 4
1. Buat kode CSS terlebih dahulu atau gunakan kode di bawah ini dan pastekan sebelum kode ]]></b:skin> atau </style>.
/* Menu Wrapper */
#menu {margin:0 0 20px 0;padding:0;height:40px;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}
#menu a { color:#222; text-decoration:none;}
#menu a:hover { color:#888; }
#menu a span {font-size:11px; color:#fff;}
#menu .nav-description { display:block; }
#menu a:hover span { color:#888; }
#sub-menu, #sub-menu ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#eee; }
#sub-menu a { font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:40px; text-decoration:none;}
#sub-menu li { float:left; width: auto; height:40px;}
#sub-menu li ul { position: absolute; left: -999em; width: 200px; top:40px}
#sub-menu li ul li { height:40px;}
#sub-menu li ul li a {width:100px; line-height:40px; padding:0 10px; font-size:12px; font-weight:700; color:#222; }
#sub-menu li ul ul { margin: -30px 0 0 180px; }
#sub-menu li:hover ul ul, #sub-menu li:hover ul ul ul, #sub-menu li.sfhover ul ul, #sub-menu li.sfhover ul ul ul { left:-999em; }
#sub-menu li:hover ul, #sub-menu li li:hover ul, #sub-menu li li li:hover ul, #sub-menu li.sfhover ul, #sub-menu li li.sfhover ul, #sub-menu li li li.sfhover ul { left: auto; }
#sub-menu li:hover,#sub-menu li.hover { position:static; }
#menu #sub-menu {width:100%;margin:0 auto;}
2. Buat kode HTML untuk memanggil kode CSS atau gunakan kode di bawah ini dan pastekan sebelum kode <aside id='main-wrapper'>.
<div id='menu'>
<ul class='fl' id='sub-menu'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-menu'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-menu'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
</ul>
</div>
Isi sesuai menu yang kamu inginkan.
Nah, coba simpan template dan lihat hasilnya. Hasil dari part ini bisa anda lihat pada demo dibawah ini.
Jika kurang jelas atau belum mengerti silahkan hubungi saya di Contact Form blog ini, Selamat Mencoba.
