Membuat menu navigasi di blog responsive di Widget.
Saya telah berbicara banyak tentang membuat navigasi menu,hari ini saya akan berbicara tentang cara melakukannya dengan mudah.sebenarnya anda juga bisa membuat menu di blog responsive dengan hp android,tapi kali ini membahas membuat menu di blog responsive di blogger atau website,Anda hanya dapat melakukan ini dengan menggunakan fungsi untuk menambahkan widget atau gadget lain ke blog Anda.Meski kokoh,tampilannya cukup elegan dan sensitif,Render web dapat diterima; rendering seluler juga dimungkinkan dengan sedikit penyesuaian untuk membuatnya muncul untuk versi seluler Tampaknya menu kali ini tidak menggunakan menu drop - down,namun tetap menarik dan cocok untuk ditempatkan pada blog yang sederhana namun tetap aktif.Apa situasinya?Baca blog ini sekali saja,item pertama pada menu juga menggunakan metode ini.
Anda dapat menggunakan tutorial membuat menu di blog responsive di bawah ini untuk segera memulai prosesnya.
1. Buka akun blog Anda .
2. Pilih desain (tata letak).
3. Pilih HTML atau Javascript di bawah "Tambah Gadget", lalu klik "Tabahkan Widget".
4. Setelah dimulai, paste kode di bawah ini ke dalam blok kode HTML .
kodenya berikut :
<style type="text/css"> body{font-family:"Roboto",sans-serif!important;font-size:100%; margin:0px;padding:0px;} /*navmenu-horizontal*/ #nav{background:#111111;} #nav ul{margin:0;padding:0;} #nav li{display:inline;display:inline-block;display:-moz-inline-stack;list-style:none;margin:0;padding:0;zoom:1;} #nav li a{color:#ffffff;display:block;padding:1em;text-decoration:none;} #nav li a:hover{background:#191919;color:#ffffff;} #nav li:first-child{background:#008000;} .top-menu{background:#002200;color:#fff;display:none;padding:10px 5px;text-align:left;text-decoration:none;} .top-menu span{float:right;margin-right:1em;} .top-menu b{font-size:27px;} #nav input[type=checkbox]:checked ~ #menus{display:block;} #nav input[type=checkbox]{display:none;} /*css-styles-responsive*/ @media screen and (max-width:768px){ #nav ul{display:none;position:static;} #nav li{border-bottom:0px solid #333;} #nav ul li, #nav li a{width:100%;} #nav li a{display:block;height:5px;line-height:10px;} #nav li a{text-align:left;font-size:18px;} .top-menu{display:block!important;line-height:18px;} .top-menu:hover{cursor:pointer;} label{margin:0!important;} } </style>
<!--- Kode HTML Menu Horizontal Responsive Sederhana ---> <nav id='nav'> <label class='top-menu' for='top-menu'><b>☰</b> <span>MENU</span></label> <input autocomplete='off' id='top-menu' role='button' type='checkbox'/> <ul id='menus'> <li><a href='https://www.kausarrazky.blogspot.com/'><i class="fa fa-home" aria-hidden="true"></i> <b>Home</b></a></li> <li><a href='https://kausarrazky.blogspot.com'><i class="fa fa-Daftar Isi-w" aria-hidden="true"></i> <b>Daftar Isi</b></a></li> <li><a href='https://kausarrazky.blogspot.com'><i class="fa fa-Tentang Saya" aria-hidden="true"></i> <b>Tentang</b></a></li> <li><a href='https://kausarrazky.blogspot.com'><i class="fa fa-Hubungi Kami" aria-hidden="true"></i> <b>Hubungi</b></a></li> <li><a href='https://kausarrazky.blogspot.com'><i class="fa fa-Kebijakan Privasi" aria-hidden="true"></i> <b>Privacy Policy</b></a></li> <li><a href='https://kausarrazky.blogspot.com'><i class="fa fa-Disclaimer" aria-hidden="true"></i> <b>Disclaimer</b></a></li> </ul>
</nav>
Ganti url tautan dan menu nama-nama di sana dengan url tautan dan menu nama- nama untuk Anda .
Anda juga dapat menambahkan ikon ke menu Anda dengan mengubah kode fa fa di atas.
Anda juga dapat menyesuaikan ukuran dan warna latar belakang agar sesuai dengan gaya Anda.
Jika sudah,pilih "simpan" selanjutnya.
5. Navigasi menu sekarang tersedia di versi seluler setelah berfungsi penuh di versi web.
6. Kembali ke menu dashboard,pilih tema,lalu klik edit html.
7. Segera setelah dimulai, cari kode widget yang baru saja ditambahkan dan tambahkan kode mobile = ' yes ' ke dalamnya.
8 . Sebagai contoh , pertimbangkan hal berikut:
9 . Simpan dan lihat hasilnya.
Berikut adalah metode sederhana untuk membuat navigasi menu responsif menggunakan widget : ( Gadget). Salam dan semoga sukses dan bermanfaat untuk semua.
Komentar
Posting Komentar