Ahmad Rifai
Cara Membuat Menu Di Blogger

Cara Membuat Menu Di Blogger Untuk Pemula (Praktis) Sampai Tingkat Lanjut

Cara membuat menu di blogger ini adalah lanjutan dari tutorial yang telah saya terbitkan sebelumnya.

Di sini saya akan menuliskan beberapa cara yang bisa dilakukan untuk bikin tab menu, mulai yang paling mudah – tingkat lanjut.

Bagi anda pengguna wp silakan baca cara membuat menu di blog wordpress.

Sebelum kita lanjutkan ada satu hal yang perlu anda ketahui, dan ini sangat berkaitan erat dengan pembuatan menu.

Anda harus mengerti apa itu Link / URL / Tautan. Atau setidaknya tahu bagaimana cara mendapatkan link yang akan dimasukkan ke menu.

Oleh karena itu ada baiknya jika anda baca juga tutorial blogger, baca bagian Cara Mendapatkan Link Posting, Laman, & Label.

Namun kalau anda sudah mengerti itu, maka silakan lanjutkan baca.

Umumnya ada 3 cara membuat menu di blogger yang bisa dilakukan, yaitu :

  1. Menggunakan gadget Laman.
  2. Menggunakan gadget HTML/JavaScript.
  3. Dengan cara edit template.

Cara yang ketiga agak rumit, dan tidak disarankan untuk pemula.

Walaupun demikian, saya akan tetap menuliskannya dengan tujuan perkenalan dan pembelajaran.

1 Menggunakan gadget Laman

Cara Membuat Menu Di Blogger Tanpa Edit HTML

Ini adalah cara membuat menu di blogger yang paling mudah serta tanpa risiko.

Karena kita tidak perlu menyentuh atau mengedit kode html yang ada di template.

Walaupun bisa dikatakan inilah cara yang paling praktis serta mudah. Namun ini hanya akan bekerja 100% pada template yang tersedia di dasbor blogger saja.

Jadi apakah pengguna template hasil download tidak dapat menggunakan cara ini?…

Tidak juga, asalkan template tersebut mendukung fitur ini, maka anda bisa membuat menu di blog menggunakan cara ini.

Jadi intinya tidak semua template blogger mendukung fitur ini.

Oke Mari kita mulai….

Langkah-langkah memasang tab menu sederhana

A Masuk ke dasbor blogger

B Klik menu Tata Letak.

C Klik Tambahkan Gadget di bawah area Tajuk (Header) → pilih gadget Laman.

tambahkan gadget menu / laman

 

Atau klik Edit jika sudah ada terpasang Gadget Laman.

gadget laman

Jika anda sudah membuat beberapa Laman, maka akan terlihat di gadget ini. Dan silakan centang laman yang ingin dimasukkan ke dalam menu.

edit tab menu

Bagaimana cara menambahkan menu lainnya yang tidak terdapat di sana?…

Nah, inilah mengapa di atas tadi saya katakan perlu mengetahui bagaimana cara mendapatkan link posting atau label.

Apabila anda ingin menambahkan menu lainnya silakan klik + Tambahkan tautan eksternal.

Maka akan keluar Pop-up seperti ini.

tambahkan menu

  1. Judul laman : Akan menjadi nama menu.
  2. Alamat web (URL) : Adalah link tujuan.

URL dapat anda isi dengan link posting maupun label, bahkan akan dapat memasang link yang menuju ke website lain.

Jika anda ingin membuat menu yang jika di klik akan menampilkan beberapa posting dengan topik tertentu, silakan pasang link label.

Jangan lupa klik Simpan Tautan setelahnya.

D Kalau semua menu yang anda inginkan sudah dipasang, silakan susun menu tersebut sesuai keinginan.

Caranya mudah, silakan tarik menu ke posisi yang pas menurut anda.

E Terakhir silakan klik tombol Simpan.

Selesai…

Cara Modifikasi Font dan Warna Tab Menu

Setelah berhasil membuat menu menggunakan cara ini anda juga dapat merubah font serta warna tab menu.

Untuk melakukannya silakan ikuti langkah-langkah berikut :

I Buka halaman Tema.

II Cadangkan / Pulihkan kalau ingin membuat backup template sebelum di edit.

III Klik tombol Sesuaikan.

edit warna tab menu

Di halaman desain tema klik menu Tingkat Lanjut, scroll ke bawah dan cari menu Teks Tab & Latar Tab.

desain menu blog

IV Modifikasi teks (font) dan latar tab (warna) sesuai selera.

V Kalau sudah selesai silakan klik Terapkan ke Blog.

Membuat Template & Menu Menjadi Responsive

Anda juga dapat dengan mudah membuat menu tersebut menjadi responsive.

Untuk membuatnya menjadi responsive silakan klik icon gird (lihat gambar di atas tadi). Maka akan keluar Pop-Up seperti ini.

membuat menu responsive

  1. Pilih bagian Ya. Tampilkan tema seluler di perangkat seluler.
  2. Pilih tema seluler : silakan pilih yang anda suka.
  3. Kalau sudah selesai silakan klik Simpan.

Cara ini tidak hanya akan membuat menu menjadi responsive, tapi template juga akan menjadi responsive.

Mungkin ini bisa di anggap sebagai kelebihan atau bahkan kekurangannya, tergantung persepsi masing-masing :-).

2 Menggunakan gadget HTML/JavaScript

Cara Membuat Responsive  Menu Sederhana Di Blogger

Bagi anda yang tidak ingin membuat menu di blogger tanpa menggunakan gadget laman, maka bisa menggunakan gadget HTML/JavaScript.

Gadget yang satu ini sangat bermanfaat bagi kita, karena bisa digunakan untuk memasang apa saja.

Untuk memasang responsive tab menu sederhana (tanpa dropdown / sub menu), silakan ikuti langkah-langkah berikut :

  1. Buka Tata Letak
  2. Tambahkan Gadget pada area yang pas untuk menu, biasanya di atas / bawah header.
  3. Pilih gadget HTML/JavaScript
  4. Masukkan kode css + html menu sederhana di bagian konten.
  5. Simpan.

memasang gadget html javascript

Sebaiknya edit dahulu bagian yang perlu sebelum memasukkan nya di dalam gadget HTML/JavaScript tadi.

kode css + html menu sederhana

<style type="text/css">
.nav-menu{background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav a:hover {background-color: rgba(84,110,122,1);}nav label span{float:right;}
.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}
</style>
<div class="nav-menu">
<nav>
<label class="toggle" for="drop">Menu <span>&#9776;</span></label>
<input id="drop" type="checkbox">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="#">Nama Menu 1</a></li>
<li><a href="#">Nama Menu 2</a></li>
<li><a href="#">Nama Menu 3</a></li>
<li><a href="#">Nama Menu 4</a></li>
<li><a href="#">Nama Menu 5</a></li>
</ul>
</nav>
</div>

Keterangan :

  • Ganti tanda # dengan link tujuan.
  • Ganti Nama Menu 1 – 5 dengan nama yang anda inginkan.

CSS + HTML Responsive Dropdown Untuk Blogger

Apabila anda ingin membuat responsive dropdown menu di blogger caranya sama seperti yang sudah saya tuliskan di atas tadi.

Jadi saya tidak akan menuliskan lagi, karena intinya sama saja, yaitu menggunakan gadget HTML/JavaScript.

Bedanya cuma pada kode yang di pasang saja.

kode css responsive dropdown menu

<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}
nav ul ul {display: none;position: absolute;top: 60px;}nav ul li:hover > ul {display: inherit;}
nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav label span{float:right;}.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}
}
</style>

kode html responsive dropdown menu

<div class="nav-menu">
<nav>
<label class="toggle" for="drop">Menu <span>&#9776;</span></label>
<input id="drop" type="checkbox">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li>
<label for="drop-1" class="toggle">Menu 3 <span>+</span></label>
<a href="#">Menu 3</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</nav>
</div>

Keterangan :

  • Ganti tanda # dengan link tujuan.
  • Ganti Menu 1 – 5 dan Sub Menu 1 – 3 dengan nama yang anda inginkan.

3 Dengan cara edit template

Apabila anda benar-benar pemula, maka tidak disarankan untuk menggunakan cara ini.

Tapi jika ingin mempelajarinya boleh kok :-).

Tapi sebaiknya jangan langsung terapkan di blog utama, jadi sebaiknya buat blog baru dahulu untuk belajar edit / menambahkan kode.

Pada dasarnya cara ketiga ini hampir sama dengan cara kedua di atas tadi. Dan kode yang harus di pasang juga sama.

Bedanya cuma cara memasang kodenya saja, kalau cara kedua melalui Tata Letak menggunakan gadget. Sedangkan ini memasang kode langsung pada template yang digunakan.

Cara Menemukan Kode HTML Area Tertentu

Untuk menambahkan kode html menu ke template kita harus menentukan area pemasangan tab menu.

Kita juga harus mengetahui kode html yang dekat dengan target area tersebut, agar menu yang dipasang tepat sasaran.

Misalnya ingin memasang menu di bawah header, maka kita harus mengetahui kode html header tersebut.

Dan kalau sudah tahu kodenya, baru kode html menu kita pasang di bawah kode header tersebut.

Ada cara mudah untuk menemukan kode html area tertentu agar kita dapat memasang kode html menu pada area yang pas.

Berikut caranya :

1. Menggunakan Google Chrome, tekan Ctrl + Shift + I.
Atau klik pengaturan chorme → Alat lainnya → Alat pengembang.

google chrome ekstensi

2. Menggunakan Mozilla Firefox, tekan Ctrl + Shift + C.
Atau klik pengaturan mozilla → Pengembang → Penilik.

mozilla firefox ekstensi

Arahkan kursor ke area blog anda atau kode-kode html yang ada di sana untuk menemukan kode html area yang diinginkan.

Misalnya kita ingin memasang tab menu tepat di bawah header.

Maka silakan arahkan kursor ke area header blog untuk melihat kode htmlnya, lihat gambar berikut.

memilih area tab menu

Pada contoh di atas, setelah saya arahkan kursor ke area header blog terlihat kode <div id="header-inner">.

Dan untuk melihat penutup kode tersebut saya harus mengklik icon ∇ sehingga terlihat <div id="header-inner"></div>.

Itu artinya jika ingin memasang menu di bawah header saya harus memasang kode html menu di bawah kode </div> penutup kode <div id="header-inner">.

Namun karena terdapat banyak kode </div>, maka mungkin masih membingungkan.

Akhirnya saya coba cari kode html lain pembungkus area header yang lebih mudah ditemukan.

Kemudian saya melihat kode <header> yang ketika saya arahkan kursor ke kode tersebut ternyata area header dibungkus olehnya.

Dan untuk melihat penutup kode <header> saya harus mengklik lagi icon ∇ sehingga terlihat menjadi <header></header>.

Ini artinya saya harus memasang kode html menu setelah kode </header>.

Nah itulah sedikit ilustrasi bagaimana cara menemukan kode area tertentu.

Setelah menemukan kode area tersebut, maka langkah selanjutnya adalah memasang menu di blog.

Cara Memasang Kode HTML & CSS Menu Di Blogger

Di sini saya akan mencontohkan bagaimana cara memasang responsive dropdown menu di blogger menggunakan cara ini.

Berikut langkah-langkah yang harus dilakukan :

1 Login ke blogger.

2 Buka halaman Tema.

3 Backup dahulu template yang anda gunakan dengan cara mengklik tombol Cadangkan / Pulihkan→ Download template. (Ini tidak wajib, cuma untuk jaga-jaga saja).

4 Klik tombol Edit HTML.

memasang menu html

5 Cari kode </head>, kemudian pasang kode css berikut tepat di atasnya.

pasang css menu

CSS Multy Level Responsive Dropdown Menu

<style type="text/css">
.nav-menu {background: rgba(38,50,56,1);width:100%;}nav {width:100%;padding:0;}
nav:after {content: "";display: table;clear: both;}nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}nav ul li ul li{background: #333;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 20px;line-height: 60px;text-decoration: none;}
nav ul li ul li:hover {background-color: rgba(84,110,122,1);}nav a:hover {background-color: rgba(84,110,122,1);}
nav ul li ul li a:hover {background-color: rgba(84,110,122,1);}nav ul ul {display: none;position: absolute;top: 60px;}
nav ul li:hover > ul {display: inherit;}nav ul ul li {width: 200px;float: none;display: list-item;position: relative;}
nav ul ul ul li {position: relative;top: -60px;left: 200px;}nav label span{float:right;}.toggle, [id^=drop] {display: none;}
nav input[type=checkbox]{display: none;}
.sub-sub:after{content: "›";float:right;font-size:120%;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}nav ul ul .toggle,nav ul ul a, nav ul ul a:hover {padding: 0 40px;}
nav ul ul ul a, nav ul ul ul a:hover {padding: 0 60px;}nav ul ul ul a {background-color: #000000;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}nav ul ul {float: none;position: static;color: #ffffff;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}nav ul ul li {display: block;width: 100%;}nav ul ul ul li {position: static;}
}
</style>

6 Cari kode yang sudah anda temukan menggunakan cara yang sudah saya ilustrasikan di atas tadi. (misalnya </header>).

pasang kode html menu

HTML Multy Level Responsive Dropdown Menu

<div class="nav-menu">
<nav>
<label class="toggle" for="drop">Menu <span>&#9776;</span></label>
<input id="drop" type="checkbox">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li>
<label for="drop-1" class="toggle">Menu 3 <span>+</span></label>
<a href="#">Menu 3</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li>
<label for="drop-2" class="toggle">Sub-sub Menu <span>+</span></label>
<a href="#" class="sub-sub">Sub-sub Menu</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="#">Sub-sub Menu 1</a></li>
<li><a href="#">Sub-sub Menu 2</a></li>
<li><a href="#">Sub-sub Menu 3</a></li>
</ul>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</nav>
</div>

Kemudian pasang kode html responsive menu berikut tepat di bawahnya.

7 Klik tombol Simpan template.

Selesai…

Nah itulah 3 cara membuat menu di blogger yang umum dilakukan.

Cara kedua dan ketiga sebenarnya hampir sama, selain itu kode html dan css yang saya tuliskan juga tidak jauh beda.

Bedanya cuma pada penambahan dropdown / sub menu serta sub-sub menu saja.


Langganan Artikel Terbaru

Dapatkan update terbaru blog ini lewat email anda

@