Cara Membuat Menu dan Sub Menu Blogger

Bismillahirahmanirrahim. Pada tutorial kali ini kita masih akan membahas tentang Menu Blogger setelah sebelumnya kita telah membuat tutorial cara membuat menu blogger + kotak pencarian blogger, masih tentang menu kita akan membahas tentang cara membuat menu dan sub menu serta kotak pencarian blogger. Dilihat dari judulnya tentunya fasiltas dari menu blogger kali ini juga bertambah yaitu bertambah sub menu blogger. Liat demo Cara Membuat Menu dan Sub Menu Blogger pada link di bawah sebelum kita memulai tutorialnya.

Download Demo

• Pertama kalian harus login dulu di blogger
• Setelah login pilih Racangan --> Edit HTML dan beri cheklis pada Expand Template Widget
• Copy paste kode di bawah ini sebelum kode ]]></b:skin>
.menublogger .menubloggerkps{display:block;font-size:1px;position:relative;z-index:1;border-style:solid;border-width:0} .menublogger .menubloggerkpsy{float:left;width:0} .menublogger .judulmenu{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1} .bersih{font-size:1px;height:0;width:0;clear:left;line-height:0;display:block;float:none!important} .menublogger{position:relative;zoom:1;z-index:10} .menublogger a,.menublogger li{float:left;display:block;white-space:nowrap;position:relative;z-index:1} .menublogger2 div a{float:left} .menublogger div{visibility:hidden;position:absolute} .menublogger li{z-index:auto} .menublogger ul{left:-10000px;position:absolute;z-index:10} .menublogger,.menublogger ul{list-style:none;margin:0;padding:0} .menublogger li:hover>ul{left:auto} #isimenu ul{top:100%} #isimenu ul li:hover>ul{top:0;left:100%} #isimenu{background-color:#0D606B;border-color:transparent;border-style:solid;border-width:4px 0} #isimenu a{background-color:transparent;color:#fff;font-family:monospace;font-size:12px;text-decoration:none;border-color:#fff;border-style:outset;padding:5px 40px 5px 8px} #isimenu a:hover{text-decoration:blink;color:#yellow;background-color:#003D45;border-color:#fff;border-style:outset} body #isimenu .qmactive,body #isimenu .qmactive:hover{text-decoration:underline} #isimenu div,#isimenu ul{background-color:transparent;border-color:#fff;border-style:outset;border-width:2px;margin:0;padding:0} #isimenu div a,#isimenu ul a{background-color:#0D606B;color:#fff;border-color:#fff;border-style:outset;border-width:2px;padding:8px 40px 8px 5px} #isimenu div a:hover,#isimenu ul a:hover{text-decoration:blink;background-color:#003D45;color:#FF0;border-color:#fff;border-style:outset;border-width:2px} body #isimenu div .qmactive,body #isimenu div .qmactive:hover{background-color:#D0EDBA;color:#333} #searchform{width:175px;float:right;font-size:12px;margin-right:5px;padding:0} #searchform #s{background:#fff;width:128px;color:#A51721;border:1px solid #888;margin:4.5px 0 0;padding:2px 7px 2px 5px} #searchform #searchsubmit{background:url(search-button.png) no-repeat 0 0;height:22px;width:22px;border:none;cursor:pointer;text-indent:-999%;line-height:1px;margin:0} .menublogger div a,.menublogger ul a,.menublogger ul li,.menublogger li a{float:none}
• Lalu Copy paste lagi kode di bawah ini setelah kode </header>
<ul class='menublogger' id='isimenu'> <li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li> <li><a href='#'>Daftar Isi</a></li> <li><a href='#'>Post RSS</a></li> <li><a href='#'>Comment RSS</a></li> <li><a href='javascript:(0)'>Menu 1</a> <ul> <li><a href='#'>Isi Menu 1</a></li> <li><a href='#'>Isi Menu 2</a></li> </ul></li> <li><a href='javascript:(0)'>Menu 2</a> <ul> <li><a href='#'>Isi Menu 2</a></li> <li><a href='#'>Isi Menu 2</a></li> </ul></li> <li><a href='http://bloggerkapuas.blogspot.com'>Buat Menu</a></li> <form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "cari artikel";}' onfocus='if (this.value == "cari artikel") {this.value = "";}' type='text' value='cari artikel'/><input class='png_bg' id='searchsubmit' type='submit' value='Go'/></form> <li class='bersih'></li></ul>
• Simpan template dan liat hasilnya

Gimana mudah bukan.  Kalian juga bisa liat Cara Membuat Menu Blogger pada tutorial sebelumnya.  Kalau ada yang kurang jelas bisa tanyakan pada kotak komentar dan kalau ada kekurangan mohon tulis juga saran dan kritiknya di kotak komentar.  Terima kaish telah berkunjung dan tunggu posting-posting lainnya.