Cara Membuat Template Blogger Sendiri Part 4 - Deny Listianto

March 28, 2018

Cara Membuat Template Blogger Sendiri Part 4

Ini lanjutan dari Tutorial Cara Membuat Template Blogger Sendiri Part 3 silahkan ikuti dan pahami yah kita langsung simak tutorialnya.

Buat Template Part 4

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.
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo