Cara Membuat Menu Navigasi Seperti Brosense Ala Mas Sugeng




Cara Membuat Menu Navigasi Seperti Brosense Ala Mas Sugeng

Cara Membuat Menu Navigasi Seperti Brosense Ala Mas Sugeng 

Kembali lagi saya pada siang ini untuk berbagi ilmu sedikit tentang cara membuat menu navigasi seperti BroSense ala mas sugeng, Pada saat ini tidak sedikit para blogger yang memakai template BroSense. menu navigasi ini sudah responsive sekali, bisa anda bukti kan setelah memasang nya, Nah utuk cara membuatnya anda bisa mengikuti langkah demi langkahnya di bawah ini.
Tetapi terlebih dahulu anda harus bisa memahami cara pemasangan code cssnya dan saya rasa kalau anda seorang blogger pasti sudah tidak asing lagi cara memasang code di bawah ini, mungkin yang masih newbie akan mendapatkan kesulitan sedikit. Langsung saja ke cara pemasangannya. 

1. Anda harus login dulu ke blogger akun milik anda
2. Kemudian anda klik Template dan terdapat Edit HTML
3. Langsung di klik saja.
4. Cari lah kode ]]</b:skin> ( cara agar mudah di cari anda tekan CTRL+F)
5. Selanjutnya anda copy kode di bawah ini, dan pastekan di atas code ]]</b:skin>
/* MENU NAVIGATION */
#nav {
 font:$(navigation.menu.font);
 background:$(menu.background.color);
 border-top: 1px solid $(menu.border.top.color);
 border-bottom:1px solid $(menu.border.bottom.color);
 margin:0 auto;
 padding:0 0;
 text-transform:uppercase;
 display:inline-block;
 max-width:764px;
 width:100%;
}

#nav ul#menu {
 float:left;
 margin:0px 0px 0px 18px;
 padding:0px 0px;
 height:34px;
}

#nav li {
 margin:0px 0px;
 padding:0px 0px;
 float:left;
 display:inline;
 list-style:none;
 position:relative;
}

#nav li > a {
 display:block;
 padding:0 10px;
 margin:3px 0;
 line-height:28px;
 text-decoration:none;
 color:$(menu.navigation.text.color);
}
#nav li li > a {
 display:block;
 padding:0 10px;
 margin:0 0;
 line-height:24px;
 text-decoration:none;
 color:$(menu.navigation.text.color);
}

#nav li:hover > a, #nav a:hover {
 background-color:$(menu.navigation.hover.color);
}

#nav li ul {
 background:#555;
 margin:0 0;
 width:170px;
 height:auto;
 position:absolute;
 top:31px;
 left:0px;
 z-index:10;
 display:none;
}

#nav li li {
 display:block;
 float:none;
}

#nav li:hover > ul {
 display:block;
}

#nav li ul ul {
 left:100%;
 top:0px;
}
#search-form {
 float:right;
 margin:0 18px 0 0;
 font-weight:bold;
}
#search-form input#search-box[type="text"] {
 background:$(input.background.color);
 float:left;
 height:26px;
 line-height:26px;
 margin:4px 0;
 padding:0 10px;
 width:100px;
 color:$(input.color);
 border:none;
}
#search-form input#search-button[type="submit"] {
 float:right;
 background:$(button.background.color);
 color:$(button.color);
 height:26px;
 line-height:26px;
 margin:4px 0;
 padding:0 7px;
 border:none;
}

#search-form input#search-button[type="submit"]:hover{
 background:#222;
 cursor:pointer
}
#search-form input#search-box[type="text"]:focus {
 background:#eee;
 outline:none;
}

6. Masih dalam editan posisi ]]</b:skin> Anda copykan code di bawah ini

7. Dan Paste kan code di bawh ini tepat diatas ]]</b:skin> di bawah kode Orange yang saya beri warna code orange di atas,.yang artinya  kedua kode tersebut baik code yang di atas dan yang di bawah di gabungkan. hanya letak posisinya saja yang berberda.
Ini kode navigasi untuk mobile 



.tinynav {
 background:#fff;
 display:none;
 margin:4px 0 4px 18px;
 padding:6px;
 border:none;
}
.tinynav option {
 padding:0 4px;
}


@media only screen and (max-width:768px){
 .header, .banner468-header {
  float:none;
  max-width:100%;
 }
 .header {
  margin:0 0 12px;
 }
}

@media only screen and (max-width:640px){
 .tinynav {
  display: inline-block;
 }
 #menu {
  display:none;
 }
}

@media only screen and (max-width:480px){
 #header-wrapper {
  padding:17px 10px 12px;
 }
 .header, .banner468-header {
  text-align:center;
 }
 #content-wrapper, .banner728-top, .banner728-bottom {
  padding:0 10px;
 }
 #post-wrapper, #sidebar-wrapper {
  width:100%;
  max-width:100%;
  float:none;
  margin:12px 0 12px 0;
 }
 .post-container {
  margin:0 0 0 0;
 }
 #nav ul#menu {
  margin:0px 0px 0px 10px;
 }
 #search-form {
  margin:0 10px 0 0;
 }
 #footer-wrapper {
  padding:12px 10px;
  text-align:center;
 }
 .footer-left, .footer-right {
  float:none;
 }
 .tinynav {
  margin:3px 0 3px 10px;
 }
 .comment .comment-thread.inline-thread .comment {
  margin: 0 0 0 0 !important;
 }
 .related-post {
  padding:8px;
 }
 .comments .comments-content {
  padding:0 8px !important;
 }
 .comments .comments-content .comment-thread ol {
  margin:8px 0 !important;
 }
}

@media screen and (max-width:320px){
 .img-thumbnail {
  width:70px;
  height:70px;
  margin:0 6px 3px 0;
 }
 .img-thumbnail img {
  width:70px;
  height:70px;
 }
 #search-form input#search-box[type="text"] {
  width:80px;
 }
}
8. Kemudian anda paste kode di bawah ini  di atas </header> atau dibawah <body>
<!-- desktop navigation menu start -->   <nav id='nav'>       <ul id='menu'> <li><a href='/'>Home</a></li> <li><a href='http://www.mizipedia.com/'>Menu 1</a> <ul> <li><a href='http://www.mizipedia.com/'>Sub Menu 1</a></li> <li><a href='http://www.mizipedia.com/'>Sub Menu 2</a></li> <li><a href='http://www.mizipedia.com/'>Sub Menu 3</a></li> </ul> </li> <li><a href='http://www.mizipedia.com/'>Menu 2</a> <ul> <li><a href='http://www.mizipedia.com/'>Sub Menu 1</a> </li> <li><a href='http://www.mizipedia.com/'>Sub Menu 2</a></li> <li><a href='http://www.mizipedia.com/'>Sub Menu 3</a></li> </ul> </li> <li><a href='http://www.mizipedia.com/'>Menu 3</a></li> </ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...' vinput=''/> <input id='search-button' type='submit' value='Go'/></form>   </nav>   <div class='clear'/>   <!-- secondary navigation menu end -->
Keterangan: Ganti alamat http://www.mizipedia.com/  dengan alamat anda.
9. Dan tambahkan javascript di bawah ini di atas </head> untuk menyatukan semua kode diatas 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> <script>
//<![CDATA[ /*! http://tinynav.viljamis.com v1.2 by @viljamis */ (function(a,k,g){a.fn.tinyNav=function(l){var c=a.extend({active:"selected",header:"",indent:"- ",label:""},l);return this.each(function(){g++;var h=a(this),b="tinynav"+g,f=".l_"+b,e=a("<select/>").attr("id",b).addClass("tinynav "+b);if(h.is("ul,ol")){""!==c.header&&e.append(a("<option/>").text(c.header));var d="";h.addClass("l_"+b).find("a").each(function(){d+='<option value="'+a(this).attr("href")+'">';var b;for(b=0;b<a(this).parents("ul, ol").length-1;b++)d+=c.indent;d+=a(this).text()+"</option>"}); e.append(d);c.header||e.find(":eq("+a(f+" li").index(a(f+" li."+c.active))+")").attr("selected",!0);e.change(function(){k.location.href=a(this).val()});a(f).after(e);c.label&&e.before(a("<label/>").attr("for",b).addClass("tinynav_label "+b+"_label").append(c.label))}})}})(jQuery,this,0); //]]> </script> <script> // TinyNav.js $(function () {   $(&#39;#menu&#39;).tinyNav(); }); </script>
Nah akhirnya selesai juga cara membuat menu navigasi responsive diatas header seperti brosense yang responsive dan loading kencang. semoga bisa bermanfaat bagi anda  dan jika tidak berhasil bisa berkomentar di bawah ini, dan bagi yang telah berhasil saya ucapkan selamat untuk anda.

terimakasih sudah berkunjung di artikel saya.. jika ada terdapat kesalahan saya mohon di maklumi saja..Terimakasih. 

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect