Assalamualaikum sobat blogger bertemu lagi dengan Bloggerjatim.com Pada kesempatan kali ini admin akan memberikan tutorial Cara Membuat Menu Di Blog Dengan Mudah. Tutorial ini mungkin sudah agak basi jika buat yang sudah lama ngeblog, Akan tetapi tutorial ini mungkin sangat berguna bagi blogger pemula seperti saya.
Sebenarnya menu di blog biasanya sudah ada di dalam paket template, Akan tetapi mungkin sobat ingin menambah menu lagi di blog sobat agar terlihat rapi dan memiliki banyak fitur.
Tutorial yang akan saya berikan ini bisa di bilang tutorial yang paling mudah dari pada tutorial" yang lainya karena kita akan memasang menu melalu widget tata letak buka melalui Edit HTML template yang bisa membuat sobat pusing 7 keliling hehe.
Oke Langsung saja kita mulain langkah langkah Cara Membuat Menu Di Blog Dengan Sangat Mudah
Penjelasan :
Ganti code yang di tandai background berwarna biru, Pada code # ganti dengan URL yang sobat inginkan dan pada kode bertuliskan seperti Menu,page,menu1,menu2 dll Ganti dengan kata yang nantiunya akan muncul di blog sobat.
Penutup :
Mungkin hanya itu yang bisa saya sampaikan semoga tutorial Cara Membuat Menu Di Blog Dengan Mudah ini bisa memberikan pengertian dan kepahaman kepada sobat blogger semua.
Sebenarnya menu di blog biasanya sudah ada di dalam paket template, Akan tetapi mungkin sobat ingin menambah menu lagi di blog sobat agar terlihat rapi dan memiliki banyak fitur.
Tutorial yang akan saya berikan ini bisa di bilang tutorial yang paling mudah dari pada tutorial" yang lainya karena kita akan memasang menu melalu widget tata letak buka melalui Edit HTML template yang bisa membuat sobat pusing 7 keliling hehe.
Oke Langsung saja kita mulain langkah langkah Cara Membuat Menu Di Blog Dengan Sangat Mudah
- Pertama buka halaman dashboard Blogger blog sobat.
- Lalu Klik "Playout/Tata letak" Yang ada di menu Dashboard
- Kemudian Klik "Tambah Gadget"
- Lanjut dengan memilih "HTML/Javascript"
- Lalu Copy Code HTML Menu Dibawah ini, Lalu pastekan di kolom HTML
<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-->
Ganti code yang di tandai background berwarna biru, Pada code # ganti dengan URL yang sobat inginkan dan pada kode bertuliskan seperti Menu,page,menu1,menu2 dll Ganti dengan kata yang nantiunya akan muncul di blog sobat.
Penutup :
Mungkin hanya itu yang bisa saya sampaikan semoga tutorial Cara Membuat Menu Di Blog Dengan Mudah ini bisa memberikan pengertian dan kepahaman kepada sobat blogger semua.
