CARA MEMBUAT MENU DI BLOG UNTUK PEMULA ~ ZAMAN NOW
ara membentuk spijskaart pada blogger ini merupakan sambungan dari tutorial yang sudah aku terbitkan sebelumnya.
Pada sini aku bakal menuliskan sebagian trik yang dapat dilakukan buat bikin tabulator spijskaart, mulai yang paling gampang – tingkat lanjut.
Sebelum kita lanjutkan terdapat satu contoh yang perlu anda ketahui, serta ini sangat berhubungan erat dengan pembuatan spijskaart
Sobat wajib mengerti apa itu Verbinding / URL / Tautan. Atau setidaknya memahami dengan cara apa trik mendapatkan listig yang bakal dimasukkan ke spijskaart.
Oleh karenanya terdapat baiknya apabila anda baca pula tutorial blogger, baca bagian Trik Mendapatkan Verbinding Posting, Halaman, & Label.
Tetapi andaikan anda telah mengerti itu, maka silakan lanjutkan baca.
Umumnya terdapat 3 cara mengolah spijskaart pada blogger yang dapat dilakukan, yaitu :
- Memakai zweem Halaman.
- Memakai zweem HTML/JavaScript.
- Dengan trik edit template.
Trik yang ketiga agak rumit, serta tidak disarankan buat pemula.
Andaipun demikian, aku bakal tetap menuliskannya dengan tujuan perkenalan serta pembelajaran.
1. Memakai zweem Halaman
Trik Membentuk Sajian Pada Blogger Tanpa Edit HTML
Ini merupakan cara mengolah spijskaart pada blogger yang paling gampang dan tanpa risiko.
Akibat kita gak perlu menyentuh atau mengedit kode html yang terdapat pada template.
Walaupun dapat dikatakan inilah trik yang paling simpel dan gampang. Tetapi ini Cuma bakal bekerja 100% pada template yang tersedia pada dasbor blogger saja.
So apakah pengguna template output download tidak mampu memakai trik ini?…
Tidak pula, asalkan template tadi mendukung fitur ini, maka anda dapat membentuk spijskaart pada blog memakai trik ini.
So pada dasarnya tidak seluruh template blogger mendukung fitur ini.
Oke Yuk kita mulai….
- Langkah-langkah memasang tabulator spijskaart sederhana
A Masuk ke dasbor blogger
B Klik spijskaart Rapikan Lokasi.
C Klik Masukkan Zweem pada bawah area Tajuk (Header) → pilih zweem Halaman.
Atau klik Edit apabila telah terdapat terpasang Zweem Halaman.
apabila anda telah membentuk sebagian Halaman, maka bakal kelihatan pada zweem ini. Serta silakan centang halaman yang ingin dimasukkan ke dalam spijskaart.
Dengan cara apa trik menambahkan spijskaart lainnya yang tidak terdapat pada sana?…
Nah, inilah mengapa pada atas tadi aku katakan perlu mengetahui dengan cara apa trik mendapatkan listig posting atau label.
Jika anda ingin menambahkan spijskaart lainnya silakan klik + Masukkan tautan eksternal.
Maka bakal keluar Speelpop-up misalnya ini.
- halaman : Bakal sebagai nama spijskaart.
- Alamat web (URL) : Merupakan listig tujuan.
URL mampu anda isi dengan listig posting juga label, apalagi bakal mampu memasang listig yang menuju ke webstek lain.
apabila anda ingin membentuk spijskaart yang apabila pada klik bakal menampilkan sebagian posting dengan topik tertentu, silakan pasang listig label.
Ingat klik Simpan Tautan setelahnya.
D Andaikan seluruh spijskaart yang anda inginkan telah dipasang, silakan susun spijskaart tadi sesuai keinginan.
Caranya gampang, silakan tarik spijskaart ke posisi yang schrede berdasarkan anda.
E Terakhir silakan klik tombol Simpan.
Selesai…
- Trik Modifikasi Font serta Warna Tabulator Sajian
Sesudah berhasil membentuk spijskaart memakai trik ini anda pula mampu merubah font dan warna tabulator spijskaart.
Buat melakukannya silakan ikuti langkah-langkah berikut :
A Buka halaman Tema.
B Cadangkan / Pulihkan andaikan ingin membentuk backup template sebelum pada edit.
C Klik tombol Sesuaikan.
Pada halaman desain tema klik spijskaart Tingkat Lanjut, scroll ke bawah serta cari spijskaart Teks Tabulator & Latar Tabulator.
D Modifikasi teks (font) serta latar tabulator (warna) sesuai kesukaan.
E Andaikan telah selesai silakan klik Terapkan ke Blog.
Sesudah berhasil membentuk spijskaart memakai trik ini anda pula mampu merubah font dan warna tabulator spijskaart.
Buat melakukannya silakan ikuti langkah-langkah berikut :
A Buka halaman Tema.
B Cadangkan / Pulihkan andaikan ingin membentuk backup template sebelum pada edit.
C Klik tombol Sesuaikan.
Pada halaman desain tema klik spijskaart Tingkat Lanjut, scroll ke bawah serta cari spijskaart Teks Tabulator & Latar Tabulator.
D Modifikasi teks (font) serta latar tabulator (warna) sesuai kesukaan.
E Andaikan telah selesai silakan klik Terapkan ke Blog.
- Membentuk Template & Sajian Sebagai Responsive
Sobat pula mampu dengan gampang membentuk spijskaart tadi sebagai responsive.
Buat membuatnya sebagai responsive silakan klik icon gird (lihat gambar pada atas tadi). Maka bakal keluar Speelpop-Up misalnya ini.
- Pilih bagian Ya. Tampilkan tema seluler pada perangkat seluler.
- Pilih tema seluler : silakan pilih yang anda suka.
- Andaikan telah selesai silakan klik Simpan.
Trik ini tidak Cuma bakal membentuk spijskaart sebagai responsive, akan tetapi template pula bakal sebagai responsive.
Mungkin ini dapat pada anggap seperti kelebihan atau apalagi kekurangannya, tergantung persepsi masing-masing :-).
2. Memakai zweem HTML/JavaScript
Trik Membentuk Responsive Sajian Sederhana Pada Blogger
Bagi anda yang tidak ingin membentuk spijskaart pada blogger tanpa memakai zweem halaman, maka dapat memakai zweem HTML/JavaScript.
Zweem yang satu ini sangat bermanfaat bagi kita, akibat dapat dipergunakan buat memasang apa saja.
Buat memasang responsive tabulator spijskaart sederhana (tanpa dropdown / sub spijskaart), silakan ikuti langkah-langkah berikut :
- Buka Rapikan Lokasi
- Masukkan Zweem pada area yang schrede buat spijskaart, umumnya pada atas / bawah header.
- Pilih zweem HTML/JavaScript
- Tambahkan kode css + html spijskaart sederhana pada bagian konten.
- Simpan.
Sebaiknya edit dahulu bagian yang perlu sebelum memasukkan nya pada dalam zweem HTML/JavaScript tadi.
kode css + html spijskaart sederhana
<style type="text/css">
.nav-menu{background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav a:hover {background-color: rgba(84,110,122,1);}nav label span{float:right;}
.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.spijskaart {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}
</styledangt;
<div group="nav-menu">
<navdangt;
<label group="toggle" for="druppel">Sajian <spandangt;☰</spandangt;</labeldangt;
<input id="druppel" type="checkbox">
<ul group="spijskaart">
<lidangt;<a href="http://belajarbelajar99.blogspot.com/">Homedanlt;/adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Nama Sajian 1</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Nama Sajian 2</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Nama Sajian 3</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Nama Sajian 4</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Nama Sajian 5</adangt;</lidangt;
</uldangt;
</navdangt;
</divdangt;
Keterangan :
- Ganti tanda
#dengan listig tujuan. - Ganti Nama Sajian 1 – 5 dengan nama yang anda inginkan.
CSS + HTML Responsive Dropdown Buat Blogger
Jika anda ingin membentuk responsive dropdown spijskaart pada blogger caranya sama misalnya yang telah aku tuliskan pada atas tadi.
So aku tidak bakal menuliskan lagi, akibat pada dasarnya sama saja, yaitu memakai zweem HTML/JavaScript.
Bedanya hanya pada kode yang pada pasang saja.
- kode css responsive dropdown spijskaart
<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}
nav ul ul {display: none;position: absolute;top: 60px;}nav ul li:hover > ul {display: inherit;}
nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav label span{float:right;}.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.spijskaart {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}
}
</styledangt;
<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}
nav ul ul {display: none;position: absolute;top: 60px;}nav ul li:hover > ul {display: inherit;}
nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav label span{float:right;}.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.spijskaart {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}
}
</styledangt;
- kode html responsive dropdown spijskaart
<div group="nav-menu">
<navdangt;
<label group="toggle" for="druppel">Sajian <spandangt;☰</spandangt;</labeldangt;
<input id="druppel" type="checkbox">
<ul group="spijskaart">
<lidangt;<a href="http://belajarbelajar99.blogspot.com/">Homedanlt;/adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 1</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 2</adangt;</lidangt;
<lidangt;
<label for="drop-1" group="toggle">Sajian 3 <spandangt;+</spandangt;</labeldangt;
<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 3</adangt;
<input type="checkbox" id="drop-1"/>
<uldangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 1</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 2</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 3</adangt;</lidangt;
</uldangt;
</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 4</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 5</adangt;</lidangt;
</uldangt;
</navdangt;
</divdangt;
Keterangan :
- Ganti tanda
# dengan listig tujuan.
- Ganti Sajian 1 – 5 serta Sub Sajian 1 – 3 dengan nama yang anda inginkan.
3. Dengan trik edit template
pabila anda sungguh pemula, maka tidak disarankan buat memakai trik ini.
Akan tetapi apabila ingin mempelajarinya bisa kok :-).
Akan tetapi sebaiknya jangan langsung terapkan pada blog pokok, so sebaiknya untuk blog baru dahulu buat belajar edit / menambahkan kode.
Pada dasarnya trik ketiga ini nyaris sama dengan trik kedua pada atas tadi. Serta kode yang wajib pada pasang pula sama.
Bedanya hanya trik memasang kodenya saja, andaikan trik kedua melalui Rapikan Lokasi memakai zweem. Sedangkan ini memasang kode langsung pada template yang dipergunakan.
<div group="nav-menu">
<navdangt;
<label group="toggle" for="druppel">Sajian <spandangt;☰</spandangt;</labeldangt;
<input id="druppel" type="checkbox">
<ul group="spijskaart">
<lidangt;<a href="http://belajarbelajar99.blogspot.com/">Homedanlt;/adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 1</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 2</adangt;</lidangt;
<lidangt;
<label for="drop-1" group="toggle">Sajian 3 <spandangt;+</spandangt;</labeldangt;
<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 3</adangt;
<input type="checkbox" id="drop-1"/>
<uldangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 1</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 2</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 3</adangt;</lidangt;
</uldangt;
</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 4</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 5</adangt;</lidangt;
</uldangt;
</navdangt;
</divdangt;
Keterangan :
- Ganti tanda
#dengan listig tujuan. - Ganti Sajian 1 – 5 serta Sub Sajian 1 – 3 dengan nama yang anda inginkan.
3. Dengan trik edit template
pabila anda sungguh pemula, maka tidak disarankan buat memakai trik ini.
Akan tetapi apabila ingin mempelajarinya bisa kok :-).
Akan tetapi sebaiknya jangan langsung terapkan pada blog pokok, so sebaiknya untuk blog baru dahulu buat belajar edit / menambahkan kode.
Pada dasarnya trik ketiga ini nyaris sama dengan trik kedua pada atas tadi. Serta kode yang wajib pada pasang pula sama.
Bedanya hanya trik memasang kodenya saja, andaikan trik kedua melalui Rapikan Lokasi memakai zweem. Sedangkan ini memasang kode langsung pada template yang dipergunakan.
- Trik Menemukan Kode HTML Area Tertentu
Buat menambahkan kode html spijskaart ke template kita wajib memilih area pemasangan tabulator spijskaart.
Kita pula wajib mengetahui kode html yang dekat dengan sasaran area tadi, supaya spijskaart yang dipasang tepat sasaran.
Contohnya ingin memasang spijskaart pada bawah header, maka kita wajib mengetahui kode html header tadi.
Serta andaikan telah memahami kodenya, baru kode html spijskaart kita pasang pada bawah kode header tadi.
Terdapat trik gampang buat menemukan kode html area tertentu supaya kita mampu memasang kode html spijskaart pada area yang schrede.
Buat menambahkan kode html spijskaart ke template kita wajib memilih area pemasangan tabulator spijskaart.
Kita pula wajib mengetahui kode html yang dekat dengan sasaran area tadi, supaya spijskaart yang dipasang tepat sasaran.
Contohnya ingin memasang spijskaart pada bawah header, maka kita wajib mengetahui kode html header tadi.
Serta andaikan telah memahami kodenya, baru kode html spijskaart kita pasang pada bawah kode header tadi.
Terdapat trik gampang buat menemukan kode html area tertentu supaya kita mampu memasang kode html spijskaart pada area yang schrede.
Berikut caranya :
- 1. Memakai Google Chrome, tekan Ctrl + Shift + I.
- Atau klik pengaturan chorme → Instrumen lainnya → Instrumen developer.
- 2. Memakai Mozilla Firefox, tekan Ctrl + Shift + C.
- Atau klik pengaturan mozilla → Developer → Penilik.
Arahkan kursor ke area blog anda atau kode-kode html yang terdapat pada sana buat menemukan kode html area yang diinginkan.
Contohnya kita ingin memasang tabulator spijskaart tepat pada bawah header.
Maka silakan arahkan kursor ke area header blog buat melihat kode htmlnya, lihat gambar berikut.
Pada contoh pada atas, sesudah aku arahkan kursor ke area header blog kelihatan kode <div id="header-inner">.
Serta buat melihat penutup kode tadi aku wajib mengklik icon ∇ sebagai akibatnya kelihatan <div id="header-inner"></divdangt;.
Itu artinya apabila ingin memasang spijskaart pada bawah header aku wajib memasang kode html spijskaart pada bawah kode </divdangt; penutup kode <div id="header-inner">.
Tetapi akibat terdapat banyak kode </divdangt;, maka mungkin masih memusingkan.
Akhirnya aku coba cari kode html lain pembungkus area header yang lebih gampang ditemukan.
Selanjutnya aku melihat kode <headerdangt; yang saat aku arahkan kursor ke kode tadi ternyata area header dibungkus olehnya.
Serta buat melihat penutup kode <headerdangt; aku wajib mengklik lagi icon ∇ sebagai akibatnya kelihatan sebagai <headerdangt;</headerdangt;.
Ini artinya aku wajib memasang kode html spijskaart sesudah kode </headerdangt;.
Nah itulah sedikit gambaran dengan cara apa trik menemukan kode area tertentu.
Sesudah menemukan kode area tadi, maka langkah selanjutnya merupakan memasang spijskaart pada blog.
- 2. Memakai Mozilla Firefox, tekan Ctrl + Shift + C.
- Atau klik pengaturan mozilla → Developer → Penilik.
Arahkan kursor ke area blog anda atau kode-kode html yang terdapat pada sana buat menemukan kode html area yang diinginkan.
Contohnya kita ingin memasang tabulator spijskaart tepat pada bawah header.
Maka silakan arahkan kursor ke area header blog buat melihat kode htmlnya, lihat gambar berikut.
Pada contoh pada atas, sesudah aku arahkan kursor ke area header blog kelihatan kode <div id="header-inner">.
Serta buat melihat penutup kode tadi aku wajib mengklik icon ∇ sebagai akibatnya kelihatan <div id="header-inner"></divdangt;.
Itu artinya apabila ingin memasang spijskaart pada bawah header aku wajib memasang kode html spijskaart pada bawah kode </divdangt; penutup kode <div id="header-inner">.
Tetapi akibat terdapat banyak kode </divdangt;, maka mungkin masih memusingkan.
Akhirnya aku coba cari kode html lain pembungkus area header yang lebih gampang ditemukan.
Selanjutnya aku melihat kode <headerdangt; yang saat aku arahkan kursor ke kode tadi ternyata area header dibungkus olehnya.
Serta buat melihat penutup kode <headerdangt; aku wajib mengklik lagi icon ∇ sebagai akibatnya kelihatan sebagai <headerdangt;</headerdangt;.
Ini artinya aku wajib memasang kode html spijskaart sesudah kode </headerdangt;.
Nah itulah sedikit gambaran dengan cara apa trik menemukan kode area tertentu.
Sesudah menemukan kode area tadi, maka langkah selanjutnya merupakan memasang spijskaart pada blog.
- Trik Memasang Kode HTML & CSS Sajian Pada Blogger
Pada sini aku bakal mencontohkan dengan cara apa trik memasang responsive dropdown spijskaart pada blogger memakai trik ini.
Berikut langkah-langkah yang wajib dilakukan :
1 Login ke blogger.
2 Buka halaman Tema.
3 Backup dahulu template yang anda pakai dengan trik mengklik tombol Cadangkan / Pulihkan→ Download template. (Ini tidak wajib, hanya buat jaga-jaga saja).
4 Klik tombol Edit HTML.
5 Cari kode </headdangt;, selanjutnya pasang kode css berikut tepat pada atasnya.
Pada sini aku bakal mencontohkan dengan cara apa trik memasang responsive dropdown spijskaart pada blogger memakai trik ini.
Berikut langkah-langkah yang wajib dilakukan :
1 Login ke blogger.
2 Buka halaman Tema.
3 Backup dahulu template yang anda pakai dengan trik mengklik tombol Cadangkan / Pulihkan→ Download template. (Ini tidak wajib, hanya buat jaga-jaga saja).
4 Klik tombol Edit HTML.
5 Cari kode </headdangt;, selanjutnya pasang kode css berikut tepat pada atasnya.
CSS Multy Level Responsive Dropdown Sajian
<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}nav {width:100%;padding:0;}
nav:after {content: "";display: table;clear: both;}nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 20px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}nav ul ul {display: none;position: absolute;top: 60px;}
nav ul li:hover > ul {display: inherit;}nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav ul ul ul li {position: relative;top: -60px;left: 200px;}nav label span{float:right;}.toggle, [id^=drop] {display: none;}
nav input[type=checkbox]{display: none;}
.sub-sub:after{content: "›";float:right;font-size:120%;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.spijskaart {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul ul ul a, nav ul ul ul a:hover {padding: 0 60px;}nav ul ul ul a {background-color: #000000;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}nav ul ul ul li {position: static;}
}
</styledangt;
6 Cari kode yang telah anda temukan memakai trik yang telah aku ilustrasikan pada atas tadi. (contohnya </headerdangt;).
<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}nav {width:100%;padding:0;}
nav:after {content: "";display: table;clear: both;}nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 20px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}nav ul ul {display: none;position: absolute;top: 60px;}
nav ul li:hover > ul {display: inherit;}nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav ul ul ul li {position: relative;top: -60px;left: 200px;}nav label span{float:right;}.toggle, [id^=drop] {display: none;}
nav input[type=checkbox]{display: none;}
.sub-sub:after{content: "›";float:right;font-size:120%;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.spijskaart {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul ul ul a, nav ul ul ul a:hover {padding: 0 60px;}nav ul ul ul a {background-color: #000000;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}nav ul ul ul li {position: static;}
}
</styledangt;
6 Cari kode yang telah anda temukan memakai trik yang telah aku ilustrasikan pada atas tadi. (contohnya </headerdangt;).
HTML Multy Level Responsive Dropdown Sajian
<div group="nav-menu">
<navdangt;
<label group="toggle" for="druppel">Sajian <spandangt;☰</spandangt;</labeldangt;
<input id="druppel" type="checkbox">
<ul group="spijskaart">
<lidangt;<a href="http://belajarbelajar99.blogspot.com/">Homedanlt;/adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 1</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 2</adangt;</lidangt;
<lidangt;
<label for="drop-1" group="toggle">Sajian 3 <spandangt;+</spandangt;</labeldangt;
<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 3</adangt;
<input type="checkbox" id="drop-1"/>
<uldangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 1</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 2</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub Sajian 3</adangt;</lidangt;
<lidangt;
<label for="drop-2" group="toggle">Sub-sub Sajian <spandangt;+</spandangt;</labeldangt;
<a href="http://belajarbelajar99.blogspot.com/2018/01/#" group="sub-sub">Sub-sub Sajian</adangt;
<input type="checkbox" id="drop-2"/>
<uldangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub-sub Sajian 1</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub-sub Sajian 2</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sub-sub Sajian 3</adangt;</lidangt;
</uldangt;
</uldangt;
</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 4</adangt;</lidangt;
<lidangt;<a href="http://belajarbelajar99.blogspot.com/2018/01/#">Sajian 5</adangt;</lidangt;
</uldangt;
</navdangt;
</divdangt;
Selanjutnya pasang kode html responsive spijskaart berikut tepat pada bawahnya.
7 Klik tombol Simpan template.
Selesai…
Posting Komentar untuk "CARA MEMBUAT MENU DI BLOG UNTUK PEMULA ~ ZAMAN NOW"