Cara membuat menu di Blog sedikit edit HTML. Selamat siang, apakah anda kesulitan dalam embuat menu di blog, bagaimana cara membuat menu di blog dengan mudah ?. Sebelumnya anda harus tau fungsi dari menu bar di haeader blog, fungsi menu pada blog yaitu untuk memudahkan pengunjung melihat apa saja artikel menarik yang ada di dalam blog anda dan juga memperindah tampilan blog.
Jika blog anda mengenai sekilas harga atau warung harga, disana anda harus memikirkan kira - kira menu apa yang cocok untuk di pasang di blog anda. Biasanya sebuah blog atau website pasti memiliki menu home atau tampilan awal daari blog itu sendiri, selanjutnya baru menu tentang artikel dan submenu.
Misalnya kita ambil contoh membuat menu di blog info harga, bererati kita buat menu home, harga komputer, harga handphone, harga kendaraan, harga elektronik, harga laptop, dll. Selanjutnya baru anda buat sub menu yaitu handphone asus, handphone lenovo, dan mash banyak lainnya. Submenu sama dengan menu dorpdown. Jadi cara membuat menu dropdown sama dengan membuat sub menu di blog.
Kali ini bacaan gratis akan membahas mengenai cara membuat menu navigasi blog atau yang sering dikenal dengan membuat menu bar di blog, untuk lebih jelasnya silahkan anda simak di bawah ini.
1. Login ke blog anda terlebih dahulu
2. Masuk ke Tat letak
3. Silahkan Tambahakan Gadget baru yang terletak di atas postingan blog
4. Pilih HTML/JavaScript
4. Kemudian anda copy kode script di bawah ini dan masukan pada Gadget HTML/JavaScript yang sudah di buat sebelumnya.
<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="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a> <ul class="menus">
<li><a href="#" title="Kode Warna HTML">Menu 1</a></li>
<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><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai--> </ul>
</nav>
<!-- Area Menu Selesai-->
Cara Edit Menu Blog Dengan Mudah
Coba anda lihat langkah no 4. sebelum menyimpan silahkan anda ganti Menu 1, Menu 2, Menu 3, Menu 4 dengan menu yang ingin anda tampilan.
<li><a href="#">Home</a></li><li><a href="#">Tutorial</a></li><li><a href="#">Umum</a></li>
Cara Edit Menu Dropdown di Blog
Masih di langkah no 4. silahkan anda ganti Sub Menu 1, Sub Menu 2, Sub Menu 3, Sub Menu 4 sesuai keinginan anda ,dan ganti tanda # dengan alamat url label blog anda
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a> <ul class="menus">
<li><a href="#" title="Kode Warna HTML">Tutorial</a></li>
<li><a href="http://www.bacaan-gratis.com/search/label/BLOG?max-results=5">Blog</a></li>
<li><a href="http://www.bacaan-gratis.com/search/label/KOMPUTER?max-results=5">Komputer</a></li>
<li><a href="http://www.bacaan-gratis.com/search/label/NETWORK?max-results=5">Network</a></li>
Jangan lupa untuk menymipannnya, demikian pembahasan mengenai cara membuat menu di blog, mengedit menu di blog, dan mengedit menu dropdown di blog. Sedangkan cara untuk membuat menu navigasi di atas header blog bisa anda lihat di bawah ini.
- Cara Membuat Menu Privacy Policy di Blog
- Cara Membuat Menu About di Blog
- Cara Membuat Menu Sitemaps di Blog
- Cara Membuat Menu Contact di Blog
Terima kasih telah mengunjungi Bacaan-Gratis.Com, Jika anda ingin mengikuti berbagai tutorial blog menarik lainnya, silahkan anda LIKE di fans page facebook LIKE BACAAN GRATIS YA. Semoga dapat bermanfaat.^_^
Tag :
BLOG
0 Komentar untuk "Baru Nih, Tutorial Membuat Menu Di Blog Dengan Mudah"
PERINGATAN..!!
1. Berkomentarlah Sesuai Judul Diatas Dengan Sopan dan Jangan Spaming.!!
2. Dilarang Berkomentar Yang Mengandung Unsur Pornografi dan Sara.!!
3. Mohon Maaf Bagi Yang Berkomentar Melampirkan Link Langsung Ane Masukan Spam.!!
Mohon Untuk Mematuhu TOS diatas. Terimakasih