Cara Menciptakan Template Blogger Sendiri Part 4
Ini lanjutan dari Tutorial Cara Membuat Template Blogger Sendiri Part 3 silahkan ikuti dan pahami yah kita pribadi simak tutorialnya.
Kali ini kita akan memasang sajian pada template yang sudah di buat pada part sebelumnya.
1. Buat arahan CSS terlebih dahulu atau gunakan arahan di bawah ini dan pastekan sebelum arahan ]]></b:skin> atau </style>.
2. Buat arahan HTML untuk memanggil arahan CSS atau gunakan arahan di bawah ini dan pastekan sebelum arahan <aside id='main-wrapper'>.
Nah, coba simpan template dan lihat hasilnya. Hasil dari part ini dapat anda lihat pada demo dibawah ini.
Jika kurang terang atau belum mengerti silahkan hubungi aku di Contact Form blog ini, Selamat Mencoba. Sumber https://www.denylistianto.com/
Kali ini kita akan memasang sajian pada template yang sudah di buat pada part sebelumnya.
Cara Membuat Template Blogger Sendiri Part 4
1. Buat arahan CSS terlebih dahulu atau gunakan arahan di bawah ini dan pastekan sebelum arahan ]]></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 arahan HTML untuk memanggil arahan CSS atau gunakan arahan di bawah ini dan pastekan sebelum arahan <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 sajian yang kau inginkan.
Nah, coba simpan template dan lihat hasilnya. Hasil dari part ini dapat anda lihat pada demo dibawah ini.
Jika kurang terang atau belum mengerti silahkan hubungi aku di Contact Form blog ini, Selamat Mencoba. Sumber https://www.denylistianto.com/