Menu atau lebih dikenal sebagai menu navigasi sangat berguna untuk menyediakan lingkungan yang ramah pengguna kepada pengunjung Anda. Menu memungkinkan pengunjung Anda untuk mencari konten yang tepat yang mereka cari dengan pergi melalui kategori tertentu. Namun, sekarang menu hari telah berubah menjadi menu Responsif yang memberikan fleksibilitas bagi pengguna seluler untuk bernavigasi melalui situs Anda dengan mudah. Jika Anda ingin menambahkan menu ponsel yang responsif ke blog blogger Anda, maka Anda beruntung berada di tempat yang tepat. Hari ini di artikel ini, kami akan menunjukkan kepada Anda cara dengan mudah menambahkan menu responsif seluler di blogger.Artikel yang Direkomendasikan:
- Cara Mengaktifkan Templat Seluler yang Responsif di Blogger
- Cara Membuat Situs Web Anda Responsif terhadap Perangkat Seluler
Apa itu Menu Responsif?
Menu responsif adalah menu navigasi seperti itu, yang fleksibel dan mudah digunakan pada saat yang bersamaan. Mereka memberikan pengalaman yang berkualitas bagi pengguna desktop untuk pengguna seluler. Ketika di desktop mereka muncul dengan cara tradisional, tetapi pada ponsel mereka muncul seperti lebar aplikasi seluler, tinggi dan tertata dengan baik. Pada tangkapan layar berikut, Anda dapat dengan jelas melihat menu yang sama tampak berbeda di desktop dan di smartphone. Pratinjau langsung menu ini dapat dilihat di situs ini http://movieismdemo.blogspot.com//
Bagaimana cara menambahkan menu Responsif di Blogger dengan mudah?
Ketika membuat menu responsif di blogger, kami memiliki berbagai teknik tentang cara menangani menu navigasi untuk perangkat layar kecil seperti ponsel, ponsel cerdas, dll. Sumber daya yang kami miliki untuk mencapai tujuan ini tidak ada habisnya. Pada artikel ini, kami akan menunjukkan konsep utama yang lebih mudah diimplementasikan dan memiliki lebih banyak keuntungan daripada kerugian. Hal pertama yang perlu Anda lakukan adalah pergi ke Blogger.com> Templat> Edit HTML dan tempel kode berikut di mana saja setelah tag <body> . (Perlu diingat tempel kode ini tepat di tempat Anda ingin menu Anda muncul).
<! --- Menu -> <nav id = 'nav-main'>
<ul>
<li> <a href=''> Beranda </a> </li>
<li> <a href = '' > Tentang </a> </li>
<li> <a href=''> Galeri </a> </li>
<li> <a href=''> Tutorials </a> </li>
<li > <a href=''> Kontak </a> </li>
</ul>
</nav>
<div id = 'nav-trigger'>
<span> Menu <i class = 'fa fa-list' / > </span>
</div>
<nav id = 'nav-mobile' />
Sekarang Anda untuk menata menu, Anda perlu menambahkan CSS ke template Anda. Untuk melakukannya lagi di templat, cari }}]]> tag </ b: skin> dan tepat di bawahnya tempel kode berikut
# nav-trigger {
display: none;
perataan teks: tengah;
}
# nav-trigger span {
display: block;
warna latar: # 279CEB;
kursor: pointer;
text-transform: huruf besar;
padding: 0 25px;
warna: #EEE;
garis-tinggi: 67px;
}
nav # nav-mobile {
margin: 0px;
}
nav {
margin-bottom: 30px;
}
# nav-main {
background-color: # 279CEB;
margin: 0px;
mengapung: kiri;
}
# nav-main ul {
list-style-type: none;
margin: 0;
bantalan: 0;
perataan teks: tengah;
}
# nav-main li {
display: inline-block;
mengapung: kiri;
ont-family: & # 39;
Buka Sans & # 39;
, Sans Serif;
}
# nav-main li: last-child {
border-right: none;
}
# nav-main a {
padding: 0 25px;
warna: #EEE;
garis-tinggi: 67px;
display: blok;
}
# nav-main a: hover {
background-color: # 3AB0FF;
teks-dekorasi: tidak ada;
warna: #fff;
}
# nav-mobile {
position: relatifve;
display: tidak ada;
}
# nav-mobile ul {
display: tidak ada;
daftar-gaya-jenis: tidak ada;
posisi: absolut;
kiri: 0;
kanan: 0;
margin-left: auto;
margin-right: otomatis;
perataan teks: tengah;
background-color: # ddf0f9;
z-index: 10;
padding: 0px;
border-bottom: solid 1px # cc0028;
}
nav # nav-mobile li: last-child {
border-bottom: none;
}
nav # nav-mobile ul {
padding: 0;
margin: 0;
}
nav # nav-mobile a {
display: block;
warna: # 29a7e1;
padding: 10px 0px;
teks-dekorasi: tidak ada;
border-bottom: 1px solid # 00aeef;
perataan teks: tengah;
}
nav # nav-mobile a: hover {
background-color: # 111;
warna: #fff;
}
nav # nav-mobile li {
display: block;
}
nav # nav-mobile {
display: none;
}
/ * = Permintaan Media
-------------------------------------------- ------------------ * /
@media all dan (max-width: 900px) {
# nav-trigger {
display: block;
}
# nav-main {
display: none! important;
}
nav # nav-mobile {
display: block;
}
}
Setelah menambahkan HTML dan CSS core coding, tanpa menambahkan kode JavaScript berikut menu tidak akan berfungsi dengan benar. Karenanya, tambahkan kode berikut tepat di atas tag </head> .
<script type = 'text / javascript'>
// <! [CDATA [
$ (document) .ready (function () {
$ ("# nav-mobile"). html ($ ("# nav-main"). html ());
$ ("# nav-trigger span"). klik (function () {
if ($ ("nav # nav-mobile ul"). hasClass ("diperluas")) {
$ ("nav # nav -mobile ul.expanded "). removeClass (" diperluas "). slideUp (250);
$ (ini) .removeClass (" open ");
} else {
$ (" nav # nav-mobile ul "). addClass (" diperluas "). slideDown (250);
$ (ini) .addClass (" open ");
}
});
});
//]]>
</script>
Setelah Anda selesai menambahkan tiga kode di atas dalam templat Anda, simpan dengan menekan "Simpan Templat". Selamat, Anda telah berhasil menambahkan menu responsif seluler di blogger. Sekarang pergi dan uji situs Anda dari desktop dan seluler untuk merasakan perbedaannya.
Pertanyaan yang Sering Diajukan:
Mengapa ketika saya mengklik Menu itu tidak terbuka? Jawaban: Pastikan Anda telah mengikuti instruksi yang disebutkan di atas dengan benar. Jika Anda yakin telah mengikuti langkah-langkah dengan benar, Anda mungkin kehilangan file jquery.min.js , sementara itu harus memicu menu di ponsel. Buka Blogger >> Templat >> Edit HTML >> cari <head> dan tepat di bawahnya tempel kode berikut:
<script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type = 'text / javascript'> </script>
Kami berharap tutorial ini akan membantu semua orang dalam mempelajari cara mudah menambahkan menu responsif di blogger tanpa menghadapi banyak kekhawatiran. Jika Anda menyukai artikel ini, silakan bagikan dengan teman-teman Anda
Tidak ada komentar: