Wednesday, July 3, 2019

Cara Memasang Menu Navigasi Blog Agar Responsif

Wednesday, July 3, 2019

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 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...

Show comments
Hide comments

6 comments on Cara Memasang Menu Navigasi Blog Agar Responsif

  1. wah ok mas, bermanfaat bangett.. mkasih mas

    ReplyDelete
    Replies
    1. sama-sama bang dah singgah di blog sderhana ini

      Delete
  2. mas, saranan saya kalau buat tutorial seperti ini, lengkapi sekali dengan gambar atau screenshot. cari ini lebih mudah dipahami berbanding texts sahaja...

    ReplyDelete