Cara Buat Menu & Submenu Di Blog

Cara Buat Menu & Submenu Di Blogger

Hi guys , disini saya akan membuat tutorial bagaimana cara membuat menu beserta sub menu nya dengan mudah !

Salah satu fungsi menu yang kita semua tahu yaitu sebagai pemandu fitur dari blog ataupun web itu sendiri , kali ini tutorialnya tinggal simpan source code yang admin sediakan di menu template tepatnya saat Edit HTML , bagi anak SMK jurusan tkj atau bagi programmer pasti tidak asing dengan source dibawah ada tag <div> <ul> <li> dan lainnya, bagi yang mau belajar HTML nanti admin usahain bikin postingan mengenai html di menu Pemrograman, tapi cari di google juga banyak kok.

Maaf banyak basa – basi biar akrab bro hehehe,  Langsung saja tutorialnya hehehe ^_^

1. Masuk akun blogger anda dan lihat langsung ke blog yang ingin di pasang menu, 

- Bila template masih asli dari blogger (belum dirubah) pilih desain pada menu diatas blog 
- Bila template sudah dirubah silahkan masuk ke Halaman Dashboard blogger , lalu pilih menu samping kiri dengan nama Template

2. Pilih menu template (sebelah kiri ) terus pilih Edit HTML

setelah itu anda akan diteruskan ke halaman seperti dibawah ini

4. Cari Script <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>  

sesuai dengan pengalaman admin kebanyakan mudah mencari <div class='main-outer'> , untuk mencari dengan cepat , cara nya tinggal pilih halaman script lalu tekan Ctrl + F dan masukan yang dicari yaitu  <div class='main-outer'> 

5. Setelah berhasil mencari nya taruh script berikut ini tepat diatas script yang dicari tadi

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Belajar Nge-Blog</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Perkenalan</a></li>

<li><a href='#'>Tutorial</a></li>

</ul>

</li>

<li><a href='#'>Photoshop</a></li>

<li><a href='#'>CorelDraw</a></li>

<li><a href='#'>Service</a></li>

</ul>

</div>

6. Setelah itu Kl!k Button Simpan template 

Selesai deh tutorial cara buat menu & submenu di blog.

 Terima kasih karena telah meluangkan waktunya , Maaf apabila dalam artikel ini terdapat kesalahan kata baik yang disengaja ataupun tidak karena admin masih dalam tahap belajar, apabila ada pertanyaan seputar artikel ini silahkan komen di bawah postingan ini selama admin bisa jawab pasti dijawab kok, Jangan lupa baca artikel tutorial yang lainnya juga ya !!!.

Tweet