Skip to main content
IYASEO ID

follow us

Cara Memasang Menu Navigasi Blog Agar Responsif

Bagaimana cara untuk membuat atau memasang Menu Navigasi Blog agar Responsif? dari pertanyaan tersebut mungkin sebagian para blogger sudah pada tau apalagi yang sudah profesional seperti para pakar blogger khususnya deasain template blog blogger ya...pastilah sudah, namun bagaimana jika ada seorang pengguna baru blogger (pemula).

Yang baru mau belajar di blogger(blogspot), Mungkin diantara pengguna baru tersebut akan merasa bingung mengenai hal cara memasang dan membuat Menu Navigasi Blog agar Responsif khususnya di blog blogger(blogspot).

Dari sebagian para desainer template blog blogger profesional, untuk mengerjakan hal tersebut pasti sangatlah mudah karena mereka sudah mengetahui seluk beluk nya atau sepenuhnya tentang situsblog atau situsweb yang berkaitan dengan template dan kode-kode HTML nya.

Tetapi berbeda pula dengan yang belum tau bagaima membuatnya dan bagaimana caranya, apalagi yang sama sekali belum pernah mengetahui Cara Membuat Blog di Blogger(Blogspot), jadi dalam hal ini maka dibawah saya akan share tentang bagaimana cara membuat dan memasang Menu Navigasi Blog agar Responsif khususnya pengguna blogger, adapun caranya adalah sebagai berikut :

Baiklah langsung saja bagaimana cara menerapkan cara tersebut :

1. Masuk ke dashboard Blogger

2. Pilih Tema

3. Pilih Edit Html

4. Cari Kode ]]></b:skin> dan Copy kode di bawah ini lalu di letakan atas kode ]]></b:skin>


ul.topnav {     list-style-type: none;     margin: 0;     padding: 0;     overflow: hidden;     background-color: #333; } ul.topnav li {float: left;} ul.topnav li a {     display: inline-block;     color: #f2f2f2;     text-align: center;     padding: 14px 16px;     text-decoration: none;     transition: 0.3s;     font-size: 17px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:680px) {   ul.topnav li:not(:first-child) {display: none;}   ul.topnav li.icon {     float: right;     display: inline-block;   } } @media screen and (max-width:680px) {   ul.topnav.responsive {position: relative;}   ul.topnav.responsive li.icon {     position: absolute;     right: 0;     top: 0;   }   ul.topnav.responsive li {     float: none;     display: inline;   }   ul.topnav.responsive li a {     display: block;     text-align: left;   } } 

5. Selanjutnya Cari Kode <body> Lalu Copy kode HTML di bawah lalu letakan kode HTMLnya di bawah kode <body>


<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>
</ul>

6. Agar kode-kode HTML diatas bisa berfungsi sebagai Menu Navigasi blog responsif selanjutnya cari kode </body> lalu Copy kode JAVASCRIPT dibawah lalu letakan kode JAVASCRIPTnya tepat di atas kode </body>


<script> function myFunction() {     var x = document.getElementById("myTopnav");     if (x.className === "topnav") {         x.className += " responsive";     } else {         x.className = "topnav";     } } </script>

7. Terakhir selesaikan dan Simpan Template nya!

Info lebih jelas tentang kode-kode HTML untuk menu navigasi responsif blog blogger anda langsung ke ahlinya di www.contohblog.com karena Sumber kode HTML yang saya paparkan di atas adalah dari Artikelnya,anda juga bisa membeli Template blog blogger responsif dan SEO Friendly disana Ok...

Mudah-mudahan tutorial tips trik blogger tersebut tentang Bagaimana cara membuat dan memasang Menu Navigasi Blog agar Responsif di Blogger Blogspot bisa mudah dipahami , dan untuk mempermudah mendesain blog nya saya sarankan jangan utak atik Kode Script HTML di Template Blog.

Karena sangatlah berdampak sangat fatal tidak terindex mesin pencarian google dalam artian membutuhkan waktu yang cukup lama, Semoga postingan ini bermanfaat , terutama untuk sahabat blogger pengguna baru yang sedang belajar cara membuat blog dan mendesain template blognya.

Sekian Salam Blogger...

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar