Cara Membuat Menu Navigasi Bawah Header

Menu navigasi pada blog/web berfungsi untuk memudahkan pengunjung menemukan hal-hal yang dicari atau yang direkomendasikan pemilik blog/web. Menu navigasi bawah header merupakan fitur/aksesoris yang paling banyak dipergunakan oleh blogger maupun webmaster, karena selain lebih mudah ditemukan, juga dapat memperindah penampilan dan terlihat sebagai blog/web professional. Contoh menu navigasi bawah header KLIK DISINI dan klik Enter atau lihat menu di bawah header blog ini. Adapun Cara Membuat Menu Navigasi Bawah Header untuk blogspot adalah sebagai berikut:

1. Login ke Blogger/Blogspot => Rancangan/Layout => Edit HTML, Download Template Lengkap dan beri tanda centang Expand Template Widget;


2. Cari kode ]]></b:skin> ;


3. Di atas kode ]]></b:skin> letakkan kode di bawah ini:
   /*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/ .qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}
   #qm0 {
   background-color:#000;
   border-color:#FFD42A;
   border-left:2px 0px;
   border-style:solid;
   }
   #qm0 a {
   padding:5px 5px 5px 5px;
   background-color:transparent;
   color:#FFFF2A;
   font-family:monospace;
   font-size:12px;
   text-decoration:none;
   border-style:solid;
   border-color:#08AA13;
   }
   #qm0 a:hover {
   text-decoration:blink;
   color:#ffffff;
   background-color:#A51721;
   border-style:solid;
   border-color:#ffffff;
   -moz-border-radius:10px;
   }
   body #qm0 .qmactive, body #qm0 .qmactive:hover {
   text-decoration:underline;
   }
   #qm0 div, #qm0 ul {
   padding:0px 0px 0px 0px;
   margin:0px;
   background-color:transparent;
   border-style:outset;
   border-color:#ffffff;
   border-width:2px;
   }
   #qm0 div a, #qm0 ul a {
   padding:8px 10px 8px 5px;
   background-color:#000000;
   color:#FFFF2A;
   border-color:#ffffff;
   border-width:2px;
   border-style:solid;
   }
   #qm0 div a:hover, #qm0 ul a:hover {
   text-decoration:blink;
   background-color:#A51721;
   color:#FFFFFF;
   border-color:#D0EDBA;
   border-width:2px;
   border-style:solid;
   }
   body #qm0 div .qmactive, body #qm0 div .qmactive:hover {
   background-color:#D0EDBA;
   color:#333333;
   text-decoration:;
   }
   #searchform { /*----------search form------------*/
   width: 175px;
   float: right;
   font-size: 12px;
   padding: 0;
   margin-right: 5px; }
   #searchform #s {
   background: #ffffff ;
   width: 128px;
   padding: 2px 7px 2px 5px;
   color: #A51721;
   border: 1px solid #888;
   margin: 0;
   margin-top:4.5px; }
   #searchform #searchsubmit {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaKtSqsimf6vhEQN5L9Okk46IyMq0-MJivqr7tEWi5jSenA1EqGvcOQxZQgCnWNzv0Ey_OdrWCAhSIqSYVOpLEavLBBBr7adAAOWvdg05FCId8dbLisENF5ASCe-d4gQYMkBxZ2jHxKgc/) no-repeat 0 0;
   height: 22px;
   width: 22px;
   border: none;
   cursor: pointer;
   text-indent: -999%;
   line-height: 1px;
   margin: 0; }


4. Selanjutnya cari kode seperti di bawah ini:
   </b:widget>
   </b:section>
   </div>
   </div>
   Jika menemukan beberapa kode seperti di atas, silahkan coba satu per satu, tapi ingatnya sebelumnya download dahulu template aslinya untuk mengantisifasi jika terjadi kegagalan agar bisa dikembalikan lagi seperti sebelumnya.


5. Letakan kode di bawah ini di bawah kode di atas, contohnya seperti di bawah ini:
   </b:widget>
   </b:section>
   </div>
   </div>
   
   <ul class='qmmc' id='qm0'>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/'> HOME</a></li>
   <li><a class='qmparent' href='javascript:void(0)'> FREE SERVICE</a>
   <ul>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/2012/05/cara-mendapatkan-domain-gratis-dari.html'> FREE DOMAIN</a></li>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/2010/11/cara-memperpendek-alamat-blogspot.html'> PERPENDEK DOMAIN BLOGSPOT</a></li>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/2010/11/cara-mengganti-alamat-blog-wordpress.html'> PERPENDEK DOMAIN WORDPRESS</a></li>
   </ul></li>
   <li><a class='qmparent' href='javascript:void(0)'> PAYPAL SERVICE</a>
   <ul>
   <li><a class='qmparent' href=' http://jasapenukaran.blogspot.com/2012/03/jasa-pelelangan-saldo-paypal.html' target='new'> PELELANGAN SALDO PAYPAL</a></li>
   <li><a class='qmparent' href=' http://jasapenukaran.blogspot.com/2011/07/pengisian-saldo-paypal.html' target='new'> PENGISIAN SALDO PAYPAL</a></li>
   <li><a class='qmparent' href=' http://jasapenukaran.blogspot.com/2011/10/jasa-pembuatan-dan-verifikasi-account.html' target='new'> PEMBUATAN DAN VERIFIKASI PAYPAL</a></li>
   </ul></li>
   <li><a class='qmparent' href='javascript:void(0)'> EARNING PTC</a>
   <ul>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/2011/01/list-of-trusted-ptc-sites.html'> TOP PTC 2012</a></li>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/2011/09/program-rcb-all-ptc.html'> PROGRAM RCB PTC</a></li>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/2011/08/peraturan-program-rcb.html'> TERMS OF SERVICE</a></li>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/2011/08/testimoni-penerima-pembayaran-referral.html'> KONFIRMASI</a></li>
   <li><a class='qmparent' href=' http://modal-click.blogspot.com/2012/04/list-referral-program-referral-cashback.html'> LIST REFERRAL</a></li>
   </ul></li>
   <li><a class='qmparent' href=' http://forums.klikajadeh.net/showthread.php/50678-Dibayar-tiap-hari-minggu' target='new'> FORUMS</a></li>
   
   <!-- search form -->
   <form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;search&quot;;}' onfocus='if (this.value == &quot;search&quot;) {this.value = &quot;&quot;;}' type='text' value='search'/> <input class='png_bg' id='searchsubmit' type='submit' value='Go'/> </form> <li class='qmclear'/></ul>
   
   Keterangan: Silahkan ganti LINK dan JUDUL LINK yang berwarna biru dengan link dan judul link yang hendak dipasang pada menu navigasi.


6. Save Template, SELESAI!!!

Demikian Cara Membuat Menu Navigasi Bawah Header, semoga bermanfaat.