Cara Menambah Menu Di Atas Header Blogger

Cara Menambah Menu Di Atas Header Blogger Dengan Mudah

menambah menu di atas header blogger

Assalamu'alaikum wr wb. Selamat pagi teman-teman (Karena saya membuat artikel ini di pagi hari). Pada kesempatan kali ini, saya akan menjelaskan bagaimana cara membuat atau menambah menu di atas header blogger. Apakah hanya bisa digunakan di blogger saja? Jawabannya iya. Karena saya bereksperimen di blogger saja. Kenapa di blogger harus membuat menu sendiri bukannya di blogger disediakan widget untuk membuat menu? Jawabannya yaitu karena menu yang disediakan di template defaultnya, berada di bawah header. Sehingga, kadang kita bingung untuk memisahkan menu navigasi seperti contact, about dan lain sebagainnya, dengan menu sesuai kategori. Tanpa basa basi lagi, langsung saja pada inti dari artikel ini ya.

Tahapan Menambah Menu Diatas Header

Langkah-langkah menambah menu di atas header dengan sangat mudah, yaitu sebagi berikut:
    1. Buka terlebih dahulu blog teman-teman ya di blogger.com. kemudian login sesuai dengan akunnya.
    2. Pilih menu Tema -> edit html.
    3. Kemudian tekan CTRL+F dan cari kode ]]></b:skin>.
    4. Setelah ketemu, Masukkan kode berikut di atas kode ]]></b:skin> tadi.

      .navigasiatas {
      list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #992211; border-radius: 10px;
      }
      ul.navigasiatas li {
      float: left;
      }
      ul.navigasiatas li a {
      display: inline-block; color: #f2f2f2; text-align: center; padding: 6px 10px; text-decoration: none; transition: 0.3s; font-size: 12px;
      }
      ul.navigasiatas li a:hover {
      background-color: #555;
      }


      Kode warna merah bisa diganti dengan warna yang sesuai dengan warna background header blog anda.
      Sedangkan kode yang berwarna ungu adalah untuk membuat lengkungan pada border.
    5. Kemudian Cari kode <div class='region-inner header-inner'>.
    6. Setelah ketemu kodenya, lalu copy kode berikut di bawah kode <div class='region-inner header-inner'> tadi.

      <!-- (awal) top Navigasi -->
      <ul class='topnav' id='myTopnav'>
      <li><a href='https://www.yoalearn.site/'>Home</a></li>
      <li><a href='https://www.yoalearn.site/about.html'>About</a></li>
      <li><a href='https://www.yoalearn.site/privacy-policy.html'>Privacy Policy</a></li>
      <li><a href='https://www.yoalearn.site/disclaimer.html'>Disclaimer</a></li>
      <li><a href='https://www.yoalearn.site/contact.html'>Contact</a></li>
      <li><a href='https://www.yoalearn.site/site-map.html'>Sitemap</a></li>
      </ul>
      <!-- (akhir) top Navigasi -->


      Kode warna merah ganti dengan alamat blog anda.
    7. Kemudian klik simpan tema. Maka akan muncul menu navigasi yang berada di atas header seperti berikut.
Cara ini saya gunakan pada blog blogger dan berhasil. Sebenarnya kode ini bisa teman-teman ubah sesuai dengan keinginan. Misalnya ingin menu navigasi ini berada di bagian widget navigasi blogger, maka teman-teman hanya pindahkan kode yang ada di langkah 6, dan letakkan di bawah kode <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>. Maka menu yang dibuat akan berada di atas widget navigasi. Gambarnya seperti berikut:

menambah Menu di atas widget navigasi blogger

Begitulah langkah-langkah atau cara untuk membuat menu di atas header blogger. Bagi teman-teman yang memiliki pertanyaan, silahkan tulis di komen ya. Owh iya, bagi teman-teman yang suka membaca artikel tentang kesehatan, bisa membacanya disini. Terimakasih telah membaca.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Menambah Menu Di Atas Header Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel