Showing posts with label navbar. Show all posts
Showing posts with label navbar. Show all posts

Monday, October 17, 2016

Cara Membuat Menu Navbar Responsive Dengan Bootstrap

Cara Membuat Menu Navbar Responsive Dengan Bootstrap


Menu Navbar Responsive yaitu menu navbar yang bisa menyesuaikan diri dengan ukuran halaman web browser. Saat kondisi maksimize menu itu akan tampil semua, namun saat dalam kondisi dikecilkan maka menu itu akan menyesuaikan diri menjadi menu list. Sebagai contoh buka saja alamat http://twitter.github.com/bootstrap/

Contoh Gambar hasil dari Navbar nya :


Cara Membuat Menu Navbar Responsive Dengan Bootstrap
Script Membuat Menu Navbar Responsive Dengan Bootstrap
<!--Navbar Start @autor : Parwito-->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#">Coba1 Themes</a>
            <div class="nav-collapse subnav-collapse">
                    <ul class="nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li class="nav-header">Nav header</li>
                          <li><a href="#">Separated link</a></li>
                          <li><a href="#">One more separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                       <form class="navbar-search pull-left" action="">
                       <input class="search-query span2" placeholder="Search" type="text">
                       </form>
          </div><!-- /.nav-collapse -->
        </div>
      </div>
    </div>
<!--Navbar end-->

Go to link Download

Read more »

Wednesday, October 12, 2016

Cara Membuat Navbar Keren Ala Lord Kaisar Blogs

Cara Membuat Navbar Keren Ala Lord Kaisar Blogs


Kali Ini Saya Akan Membuat postingan Tentang Cara Membuat Navbar Keren Ala Lord Kaisar Blogs
Oke Langsung Saja Caranya
1.Log In Ke Blogger
2.Pilih Template
3.Edit Html
4.Pilih Lanjutkan
5.Cari Kode ]]></b:skin> (Gunakan Ctrl + F Untuk Mozila Firefox)
6.Masukkan Kode Berikut Ke Ata Kode ]]></b:skin>

 #Kaisarnavbar{font-family:Salsa;font-weight:Bold;font-size:11pt;color:#eee;
background:url(/favicon.ico) no-repeat scroll 10px center rgba(0,0,0,0.75);border:2px groove RED;z-index:100000000;top:1px;left:1px;right:1px;position:fixed;border-radius:7px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 10px red;-webkit-box-shadow:0 0 10px red;box-shadow:0 0 30px red;padding:3px}
#Kaisarnavbar:hover{font-family:Salsa;font-weight:Bold;font-size:11pt;color:#eee;background:url(http://lordkaisar.blogspot.com/favicon.ico) no-repeat scroll 10px center rgba(0,0,0,0.75);border:2px groove RED;z-index:100000000;top:1px;left:1px;right:1px;position:fixed;border-radius:7px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 10px red;-webkit-box-shadow:0 0 40px red;box-shadow:0 0 40px red;padding:3px}
#Kaisarnavbar .kaisarnavleft{float:left;font-weight:400;padding:2px 38px}
#Kaisarnavbar .kaisarnavright{float:right;padding:2px}
#KaisarTbar{width:330px;height:30px;margin-bottom:-8px;font-family:Salsa;color:orange;background:rgba(0,0,0,0.5);z-index:999;bottom:1px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 10px red;-webkit-box-shadow:0 0 10px red;box-shadow:0 0 30px red;padding:2px}
#KaisarTbar .left{float:left;text-align:center;font-size:13px;font-style:normal;font-weight:700;color:red;padding:2px 10px}
#KaisarTbar .right{float:right;color:red;text-align:center;font-size:0;font-style:normal;font-family:Salsa,Arial,Verdana;font-weight:700;background:0;padding:2px 10px}
#KaisarTbar:hover{width:1000px;height:80px;margin-bottom:-15px;margin-left:12px}

7.Eits,Jangan DiSimpan Dulu,Ada Lagi Nih,Masukkan Kode Berikut DiAtas Kode </body>

<div id=Kaisarnavbar style=position:fixed;>
<span class=kaisarnavleft>
Isi Dengan Teksmu
</span>
<span class=kaisarnavright style=font-family:Salsa;>
Isi Dengan Text/Widgetmu
</span></div>

Nb :  Gnti Kode Berwarna Merah Menjadi Kata2/Widget Yg Anda Suka
Oke Sekian Dulu Dari Saya,Smoga Bermanfaat

Go to link Download

Read more »