Cara Membuat Menu di Blogspot

Baca Juga

Kangkomar.net - Cara membuat menu di blogspot dengan mudah dan cepat terbukti berhasil membuat menu mulai dari menu horizontal biasa dan menu dropdown di blogspot terbaru dan tercepat jika tidak berhasil langsung saja hubungi kangkomar berani bertanggung jawab jika kode html yang kangkomar berikan tidak berfungsi alias tidak work lagi.

Menu adalah bagian terpenting di dalam sebuah blog karena ibarat manusia menu adalah wajah utama yang paling pertama kali di lihat oleh para pengunjung atau orang yang pertama kali melihat sahabat, jika tidak percaya silahkan sahabat berkunjung ke blog orang lain yang belum pernah sahabat kunjungi, pasti setelah melihat artikel di dalam situs blog tersebut kemudian langsung melihat ke bagian menu untuk mencari-cari hal-hal yang menarik lainnya di situs yang sahabat kunjungi.

Untuk membuat menu di sebuah situs memang bergantung pada platform yang sahabat gunakan, asalkan sahabat mau mempelajari dan mau berusaha pastilah sahabat akan bisa dengan mudah membuat mengedit dan memodifikasi situs sahabat.

Untuk membuat meni di blog khususnya blogger sahabat, maka sudah pasti saahbat wajib harus bisa login ke blogger, dan mempunyai akun di dalamnya, langsung saja kunjungi www.blogger.com untuk login, sekarang kangkomar anggap sahabat sudah bisa login di blogger dan sudah siap mengikuti tutorial langkah demi langkah membuat menu di blogger.

Baca "cara membuat text area di blog"

Cara membuat menu di blogspot

• Pertama, silahkan sahabat klik menu tata letak.
• Kedua, perhatikan tampilan tata letak di blogger, di sana ada kolom posting blog, tambahkan gadget dan lain sebagainya silahkan sahabat pilih tambahkan html.
  
• Ketiga, masukan semua kode csss dan html di bawah ini pada kolom isian yang tersedia, tepatnya pada kolom konten.

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

• Keempat, setelah kode html di atas sudah di masukan ke dalam blogger langsung saja klik Simpan.
• Kelima, sampai tahap ini blog sahabat sudah memiliki menu horizontal, namun kangkomar yakin sahabat ingin menu-menu tersebut sesuai dengan keingiann sahabat, jika demikian, mari kangkomar lanjutkan cara edit menu horizontal tersebut.

Baca "cara share postingan ke dalam sosial media secara otomatis"

Cara mengedit menu di blogspot

1. Pada kode css dan html yang sahabat masukan tadi ada kode <!--Mulai area Menu-->

2. Di sini ada nama-nama halaman mulai dari Home, About, daftar isi, menu dan lain sebagainya dan tentunya kode #.

3. Untuk mengedit menu silahkan sahabat hapus tanda # dan ganti dengan alamat url dari blog sahabat.

misal :  <li><a href ="#">About</a></li> dengan menggantinya menjadi <li><a href>="Link halaman di situs sahabat"> silahkan ganti dengan nama menu yang di inginkan</a></li>

4. Sedangkan kode About di ganti sesua dengan nama yang sahabat inginkan jika belum paham silahkan bertanya di kolom komentar berikut ini.

5.  Finish.

Demikian adalah cara membuat menu di blogspot terbaru dan termudah, garansi kangkomar jika kode html tidak bekerja lagi di blogspot langsung saja hubungi kangkomar dan kangkomar akan bertanggung jawab menyelesaikan permasalahan yang terkait dengan artikel ini kangkomar pamit dan salam sukses dari kangkomar sampai jumpa.