Cara Membuat Menu Navigasi Di Blog | Tutorial Lengkap

Cara Membuat Menu Navigasi Di Blog

Menu navigasi  adalah sebuah menu yang berisi link-link utama seperti homepage, halaman statis seperti:(Homepage, About, Contact, Disclaimer, dan Privacy Policy), kategori blog (label), tools dan halaman penting lainnya yang biasanya terletak di atas atau di bawah blog tersebut. Menu navigasi sangat berpengaruh sekali untuk para pengunjung karena mereka bisa lebih mudah dan leluasa dalam mengakses pada halaman halaman utama yang ada di blog kita.

Zona Internetku July 27, 2018

1. Menggunakan Widget

1. Masuk ke dalam blog kalian

2. Pilih menu "Tata letak" dan klik "Tambahkan gadget" dan pilih "Halaman"

3. Selanjutnya kalian beri centang pada halaman yang ingin kalian tampilkan pada menu navigasi tersebut

*Untuk memindahkan urutan menu pada navigasi, kalian bisa melakukan "Drag and Drop"

4. kemudian kalian klik "Simpan" untuk menyimpan perubahannya

2. Menggunakan Navigasi Dengan HTML

1. Masuk Ke dalam blog kalian

2. Pilih menu "Tata letak" dan klik "Tambahkan gadget" dan pilih "HTML/Javascript"

3. Selanjutnya kalian salin kode di bawah ini

			<style> /* Menu Navigation Responsive Zona Internetku */ .menunav_zi > span.menunav_mobile_zi{display:none} .menunav_zi{display:block;overflow:hidden;padding:0;margin:0;background:#2574A9} .menunav_zi span{display:block;margin:0 auto;text-align:center} .menunav_zi span li{display:block;list-style-type:none;float:left;margin:0;padding:0} .menunav_zi span li:hover a{background:#1F3A93} .menunav_zi span li a{font-size:18px;text-decoration:none;padding:5px 7px;color:#ffffff;display:block;margin:0} @media all and (max-width:768px){.menunav_zi span{display:none}.menunav_zi .active{display:block}.menunav_zi > span.menunav_mobile_zi{display:block}.menunav_zi > span.menunav_mobile_zi li a{background:#08568b;text-align:left}.menunav_zi span li{width:100%}} </style> <div class="menunav_zi"> <span class="menunav_mobile_zi"> <li><a href="javascript:void(0);" onclick="myFunction()">☰ MENU</a></li> </span> <span class="my_menunav_zi"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy Police</a></li> <li><a href="#">Sitemap</a></li> <li><a href="#">Tos</a></li> </span> </div> <script> function myFunction() { document.getElementsByClassName("my_menunav_zi")[0].classList.toggle("active"); } </script>
*Jangan lupa untuk ganti tanda # dengan url halaman kalian sendiri

4. kemudian kalian klik "Simpan" untuk menyimpan perubahannya

Sekian tutorial dari saya tentang Cara Membuat Menu Navigasi Di Blog dan terima kasih banyak telah berkunjung ke sini

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat Kartu Nama Di Corel Draw | Tutorial Lengkap

Gambar
Cara Membuat Kartu Nama Di Corel Draw Cara Membuat Kartu Nama Di Corel Draw. Kartu nama atau id card adalah sebuah kartu yang berisikan identitas kita yang digunakan untuk sebagai tanda pengenal seseorang supaya lebih mudah untuk dikenali atau dihubungi. dan bagaimana Cara membuat kartu nama atau id card sendiri , kalian bisa membuatnya dengan menggunakan software Corel draw , adobe photoshop, atau bisa juga menggunakan adobe illustrator. tapi saya disini hanya akan menunjukkan cara menciptakan kartu nama sendiri memakai memakai pelaksanaan Corel Draw X5 yang merupakan perangkat lunak berbasis vektor yang dengan menu dan tool yang sangat mudah untuk dipahami bagi para pemula atau yang sedang belajar dalam dunia desain, dan kalian bisa meniru pola yang telah saya tunjukkan melalui ilustrasi gambar dibawah ini sebagai media pembelajaran, langsung saja ikuti tutorialnya dibawah ini Zona Internetku August 21, 2017 Cara Membuat Kartu Nama Di Corel Draw. 1. buka aplikasi Corel dr...
Baca selengkapnya

5 Software Pencari Driver Otomatis Terbaik Untuk Laptop Dan Komputer (PC) | Tutorial Lengkap

Gambar
Lima Software Pencari Driver Otomatis Terbaik Untuk Laptop Dan Komputer (PC) Software Pencari Driver Otomatis Terbaik Untuk Laptop Dan Komputer (PC). Driver merupakan sebuah program khusus yang berguna untuk mendukung atau menjembatani antara perangkat lunak (software) dan perangkat keras (hardware) pada komputer. Jadi, dengan adanya program ini maka hardware pada komputer kita dapat bekerja sepenuhnya dan kita juga bisa menginstal software dengan spesifikasi khusus agar kompitabel. Zona Internetku October 08, 2019 Namun buat mencari driver Webcam, VGA, Bluetooth, Wifi Tapi jika ingin lebih mudah, kita bisa menggunakan software tertentu yang bisa membantu kita untuk mendeteksi dan menginstal driver tersebut langsung ke perangkat kita. Software Terbaik Untuk Mencari Driver PC Yang Lengkap 1. Driver Booster Driver Booster telah menjadi sebuah aplikasi pencari driver yang terbaik, karena aplikasi ini memiliki database yang cukup besar sehingga semua driver komputer kalian bisa ...
Baca selengkapnya

2 Cara Mudah Membuat Dummy Text Lorem Ipsum | Tutorial Lengkap

Gambar
2 Cara Mudah Membuat Dummy Text Lorem Ipsum Cara Membuat Dummy Text Lorem Ipsum. Bagi kalian yang terjun ke dunia desain seperti web desain dan desain grafis yang berhubungan dengan User Interface (UI) tentunya kalian pasti sudah tidak asing lagi dengan kalimat Lorem Ipsum. Zona Internetku October 17, 2019 Lantas apa itu arti berdasarkan kalimat tersebut? Lorem Ipsum merupakan formasi kalimat yg tidak mempunyai makna alias dianggap memakai Dummy Text, hal ini bertujuan supaya si desainer nir terlalu pusing pada memilih makna tulisan yg terkandung dalam desain Biasanya kalimat Lorem Ipsum digunakan di berbagai macam desain, seperti pada widget blog, template blog, brosur, banner, logo, kartu nama dan masih banyak lagi. Cara Membuat Kalimat Lorem Ipsum Untuk Bahan Desain 1. Membuat Dummy Text Menggunakan Microsoft Word 1. Silahkan kalian buka aplikasi Microsoft Office Word. 2. Setelah itu ketik =lorem() pada lembar kerja pada Microsoft  Word tersebut 3. Kemudian coba kalian...
Baca selengkapnya