Tutorial Cara Membuat Menu Di Blog Dengan Mudah - BBT: Cara membuat menu di blog dengan mudah, tutorial untuk pemula bagaimana cara membuat menu dengan mudah sekaligus belajar edit menu

Tutorial Cara Membuat Menu Di Blog Dengan Mudah

Cara membuat menu di blog beraneka ragam, tergantung platform blog yang kita gunakan, mudah atau tidak cara membuat menu itu relatif, namun asalkan kita mau mempelajarinya pasti kita bisa membuat menu di blog dan mengedit menu sendiri.

Pada tutorial cara membuat menu kali ini saya khusus menuliskan tutorial cara membuat menu di blog blogger/blogspot, jadi mungkin artikel ini biasa saja bagi mereka yang sudah ahli dalam dunia blogger.com, namun saya berharap tutorial ini bermanfaat bagi pemula.
Cara Membuat Menu Di Blog
Di sini saya berusaha membuat tutorial cara membuat menu horizontal semudah mungkin. Dan karena di sini saya menuliskan tutorial cara membuat menu horizontal di blogger, maka sudah pasti menu ini nantinya akan terlihat horizontal (memanjang kesamping), dan pada umumnya menu horizontal terletak di atas, baik paling atas atau setelah header (dibawah judul blog), dsb.
Oh ia, jika sobat ingin membuat menu di blogger tanpa edit html silakan baca Cara Membuat Menu Di Blogger Tanpa Edit HTML.
Mari kita mulai

Cara Membuat Menu Di Blog

Untuk membuat menu di blog blogger kita, maka sudah pasti kita wajib login ke blogger, silakan login di ke blogger, kunjungi www.blogger.com untuk login.
Loading..... :-)
Sekarang saya anggap sobat sudah login di blogger dan sudah siap mengikuti tutorial langkah demi langkah membuat menu di blogger.

Pertama klik menu Tata Letak
Tutorial Membuat Menu Di Blog
Pandangi bagaimana tampilan Tata Letak Blogger, di sana ada kolom Posting Blog, Tambahkan Gadget, dsb...
Cara Membuat Menu Di Blog Dengan Mudah
Tugas sobat adalah memilih kolom Tambahkan Gadget tapi yang lebar, contohnya pilih kolom Tambahkan Gadget yang ada di atas kolom Posting Blog => Klik tulisan Tambahkan Gadget, makan akan keluar window baru.
Pada window baru tersebut pilih HTML/JavaScript (klik aja sob)
Tutorial Membuat Menu Di Blog Dengan Mudah
Kemudian masukkan semua kode css dan html dibawah ini pada kolom isian yang tersedia, tepatnya pada kolom Konten. Lihat gambar dibawah css dan html ini:
<style type="text/css">
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#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:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::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:#333;}
</style>

<!-- Mulai Area Menu -->
<nav id="menu">
<input type="checkbox" />
<label>≡Navigation</label>
<ul>
<li><a class="home" href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menus">
<li><a href="#" title="Menus">Menus 1</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->  </ul>
</nav>
<!-- Area Menu Selesai-->
Tutorial Cara Membuat Menu Di Blog Dengan Mudah
Jika semua kode sudah dimasukkan klik Simpan.

Sampai tahap ini blog sobat sudah memiliki menu horizontal, namun saya yakin sobat ingin menu-menu tersebut sesuai keinginan. Jika demikian, mari kita lanjutkan edit menu horizontal tersebut.

Cara edit menu-menu yang ada di blog

Pada kode css dan html yang sobat masukkan tadi ada kode <!-- Mulai Area Menu -->
Di situ ada nama2 halaman, mulai dari Home, About, Daftar Isi, Menu, dsb. Dan kode pagar #
Kode pagar # silakan sobat ganti dengan link halaman yang di inginkan
About, Daftar Isi, Menu, dst... silakan ganti dengan nama menu yang di inginkan
Untuk mengedit menu silakan lihat contoh ini, mengganti menu About menjadi Tentang.
Kode asal :
<li><a href="#">About</a></li>
Yang perlu di edit adalah kode pagar # dan nama menunya, contoh : About.
Kode setelah di edit :
<li><a href="http://www.blogbacatulis.com/p/tentang.html">Tentang</a></li>
Menu About saya ganti menjadi Tentang, dan kolom link/url (yang saya beri tanda pagar #) saya masukkan link http://www.blogbacatulis.com/p/tentang.html

Untuk cara edit menu-menu yang lainnya sama dengan contoh di atas, yang perlu sobat ganti hanya tanda # dan nama Menunya saja.

Link yang di masukkan ke menu harus link yang benar, karena jika salah maka jika di klik akan masuk ke halaman 404 / Error / Halaman Tidak Ditemukan.
Bagi yang belum tahu bagaimana cara mendapatkan link sebuah halaman / posting, silakan baca artikel : Cara Mendapatkan Link/URL Halaman, Post, Label Di Blogger Untuk Menu dsb
Bagaimana cara mengelompokkan artikel pada 1 menu ? silakan temukan jawabannya di Manfaat / Fungsi Label Di Blogger + Cara Membuat Label Di Blogger
Untuk pengembangan dan bahan belajar edit menu :
setiap menu harus di awali dengan kode <li> dan di akhiri dengan kode </li>
Contoh yang benar:
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
Contoh yang salah :
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a>
<li><a href="#">Menu 3</a></li>
Pada contoh yang salah, ada satu menu yang tidak di akhiri dengan kode </li> yaitu pada Menu 2.

Untuk mengganti tampilan menu, baik warna, lebar, dsb. sobat perlu mengerti bahasa CSS, kode css pada menu tersebut dimulai dari kode <style type="text/css"> dan di akhiri dengan kode </style>

Tambahan (15 Januari 2015)

Drop down menu di blog

Karena tutorial ini saya anggap masih perlu tambahan, akhirnya saya putuskan untuk meneruskan tutorial cara membuat menu ini, sebab kemaren udah capek :-D
Langsung ...
Pada kode menu di atas ada bagian
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menus">
<li><a href="#" title="Kode Warna HTML">Menus 1</a></li>
<li><a href="#">Page Protected</a></li>
<li><a href="#" target="_blank">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->
Di situ terlihat 1 menu seperti tidak sempurna/salah, tepatnya pada kode ini
<li><a class="prett" href="#">Menus</a>
Menu disitu tidak ditutup dengan kode </li>
Kenapa bisa seperti demikian? Karena itu adalah bagian menu yang memiliki sub menu (drop down menu/menu turun). Jadi kode </li> nya diletakkan di akhir kode sub menu, tepatnya kode ini.
<li><a href="#">Menus 5</a></li>
</ul>
</li>
Jadi, jika sobat ingin menambahkan menu dropdown, konsepnya sama, yaitu harus di awali dengan kode <li> dan ditutup dengan kode </li>
Contoh penambahan 2 menu pada dropdown menu
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menus">
<li><a href="#" title="Kode Warna HTML">Menus 1</a></li>
<li><a href="#">Page Protected</a></li>
<li><a href="#" target="_blank">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
<li><a href="#">Tambahan Menus 1</a></li>
<li><a href="#">Tambahan Menus 2</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->
Mungkin itulah tutorial cara membuat menu di blog yang bisa saya tuliskan kali ini, semoga mudah dipahami dan bermanfaat.
Baca Juga Tutorial Membuat Responsive Dropdown Menu Menggunakan HTML + CSS Murni.

Bagi sobat yang mengalami masalah sub menu yang tertutup template yang digunakan coba pasang kode menu tepat setelah kode <body>, namun kemungkinan sobat harus modifikasi css menu tersebut untuk menyesuaikan dengan template yang digunakan.
loading...
Lihat / Tinggalkan Komentar
Arsip
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Tutorial Cara Membuat Menu Di Blog Dengan Mudah yang ada di blog ini bermanfaat buat sobat