Cara Membuat Menu Navigasi di Blogspot

cara membuat navigasi menu di blogspot
Pada artikel ini saya akan memberikan tutorial cara membuat menu navigasi blog. Sebelum masuk ke inti pembahasan perlu diketahui saya akan membaginya menjadi dua, yaitu membuat dan mengedit. Membuat berarti kamu harus mengedit html di blogspot mulai dari awal sedangkan yang saya maksud mengedit adalah navigasi sudah tersedia di template yang kamu pakai.

Biasanya menu navigasi terletak di header, footer atau keduanya. Fungsinya tidak lain adalah untuk memudahkan pengunjung menjelajahi setiap sudut blog. Menu ini terdiri dari link menuju ke halaman postingan, label dan informasi dasar mengenai blog (about me, contact us, disclaimer, dll). 

Baca juga :

Jika masih bingung dengan pengertian dan fungsi menu navigasi blog, perhatikan infografis berikut ini :


Sedangkan menu navigasi sendiri terbagi menjadi dua type yaitu utama dan pelengkap, berikut penjabarannya :

Menu Navigasi Utama
  • About me - menjabarkan deskripsi blog atau biografi penulis
  • Contact us - berisi informasi kontak admin yang bisa dihubungi
  • Sitemaps - menampilkan daftar isi blog
Menu Navigasi Pelengkap
  • Disclaimer - hak cipta penulis
  • Privacy Policy - menerangkan keamanan data pribadi pengunjung
  • Label - pengelompokan artikel sesuai kategori
  • ToS (Terms of Services) - menjabarkan batasan-batasan pengunjung
  • Menu lain seperti profil, struktur organisasi, galeri dan sebagainya.
Oke, sampai disini saya anggap kamu sudah paham pengertian dan fungsi dari menu navigasi secara umum. Sekarang mari membuatnya.

Cara Membuat Navigasi Blog

1. Navigasi Diatas Header

  • Login ke akun Blogger
  • Buka Tema > Edit HTML
  • Copy kode berikut ini dan taruh dibawah <body> atau diatas </body>, lalu ganti "###" dengan url halaman yang kamu buat
    <ul class="topnav" id="myTopnav">
    <li><a href="###">Home</a></li>
    <li><a href="###">About</a></li>
    <li><a href="###">Sitemap</a></li>
    <li><a href="###">Kontak</a></li>
    <li><a href="###">Disclaimer</a></li>

    <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
    </li>
    </ul>
  • Selanjutnya pastekan kode dibawah ini tepat diatas ]]></b:skin> atau </style>
    /* Topbar Navmenu */
    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;
    }
    }
  • Pastekan juga kode css dibawah ini tepat diatas </head> atau </body>
    <script>
    function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
    x.className += " responsive";
    } else {
    x.className = "topnav";
    }
    }
    </script>
  • Terakhir simpan template

2. Navigasi Dibawah Header

  • Buka akun Blogger
  • Masuk ke Tema > Edit HTML
  • Pastekan kode berikut ini diatas ]]></b:skin> atau </style>
    #menu{background:#464646;color:#eee;height:35px;}
        #menu ul,#menu li{margin:0;padding:0;list-style:none}
        #menu ul{height:35px}
        #menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
        #menu li a{color:#ccc}
        #menu a{display:block;line-height:35px;padding:0 14px;text decoration:none;color:#333;}
        #menu li:hover > a,#menu li a:hover{color:#fff}
        #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
        #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
        #menu label span{font-size:13px;position:absolute;left:35px}
        #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
        #menu ul.menus a{color:#333}
        #menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
        #menu li:hover ul.menus{display:block}
        #menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
        #menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
        #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
        #menu ul.menus a:hover{background:#BABABA;}
        #menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
  • Tambahkan kode berikut dibawah </header>, Ganti warna merah dengan link, ungu dengan label/kategori dan biru diganti sub-menu
    <nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Navigation</span></label>
    <ul>
    <li><a href='###' title="Home">Home</a></li>
    <li><a href='###' title="Menu 1">Menu 1</a></li>
    <li><a class='prett' href='###' title="Drop Menu">Drop Menu</a>
    <ul class='menus'>
    <li><a href='###' title="Drop Menu1">Drop Menu 1</a></li>
    <li><a href='###' title="Drop Menu2">Drop Menu 2</a></li>
    <li><a href='###' title="Drop Menu3">Drop Menu 3</a></li>
    </ul>
    </li>
    <li><a href='###' title="Menu 2">Menu 2</a></li>
    <li><a class='prett' href='###' title="Drop Menu1">Drop Menu 1</a>
    <ul class='menus'>
    <li><a href='###' title="Drop Menu 1">Drop Menu 1</a></li>
    <li><a href='###' title="Drop Menu 2">Drop Menu 2</a></li>
    <li><a href='###' title="Drop Menu 3">Drop Menu 3</a></li>
    </ul>
  • Terakhir, klik simpan.
Jika berhasil maka tampilan Navigasi Menu akan seperti ini :
navigasi atas header
Tampilan navigasi atas header

navigasi bawah header
Tampilan navigasi bawah header

Cara Mengedit Navigasi Menu

Nah, untuk permasalahan kedua ini cukup simpel. Biasanya dalam dokumen template sudah tertera cara pengeditan navigasi menu. Selanjutnya tinggal edit saja sesuai keinginan.

Namun jika tidak tercantum di dokumen, berikut caranya. saya ambil contoh kasus template Viomagz.
  • Buka blog milikmu di tab baru (jadi dua tab, blog dan dashbord blogger)
  • Masuk ke dashboard blogger
  • Pilih Tema > Edit HTML
  • Cari (ctrl+F) dan ketikan Menu (karena nama navigasi yang tertera ditemplate adalah menu)
  • Edit URL "#" dan nama Navigasi "Menu" yang diinginkan.
  • Terakhir simpan tema

Akhir Kata

Bagaimana, mudah bukan? cukup sekian, semoga artikel ini bermanfaat dan menjadi referensi kamu untuk membuat menu navigasi di blogspot. Jika ada kendala bisa bertanya dikolom komentar

Post a Comment

0 Comments