Kamis, 16 Maret 2017

Membuat Layout Sederhana Dengan Bootstrap

Assalamualaikum Wr.Wb


Mari kita lanjutkan tentang Bootstrap setelah banyaknya postingan saya sebelumnya mengenai bootstrap pada postingan saya sebelumnya saya sisipkan postingan Tutorial Instal Wordpress di linux  sekarang mari kita lanjutkan mengenai bootsrap dan kali ini saya akan membuat layout sederhana.

  • Kita buat tambahan style untuk memperindah tampilan letakkan style di antara script <head> dan </head>
 <style>
      .navbar{
          margin-bottom: 0;
          border-radius: 0;
      }
      .row.content{height: 450px}
      .sidenav{
          padding-top: 20px;
          background-color: #f1f1f1;
          height: 100%;
      }
      footer{
          background-color: #555;
          color: white;
          padding: 15px;
      }
      @media screen and (max-width: 767px){
          .sidenav{
              height: auto;
              padding: 15px;
          }
          .row.content{height: auto;}
      }
  </style>

  •  Jangan lupa tuliskan scrip untuk memanggil Bootstrap sama dengan di atas di antara <head> dan </head> namun jangan di dalam style
meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  •  Lalu kita buat layoutnya masukkan script di bawah di antara <body> dan </body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div><!--navbar header-->
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in">Log in</a>
            </ul>
        </div><!--collapse navbar-->  
    </div><!--container-fluid-->
</nav>
<div class="container-fluid text-center">
    <div class="row content">
        <div class="col-sm-2 sidenav">
            <p><li>Link1</li></p>
            <p><li>Link2</li></p>
            <p><li>Link2</li></p>
        </div><!--col sm 2 sidenav-->
        <div class="col-sm-8 text-left">
            <h1>Blog Amatir</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="col-sm-2 sidenav">
            <div class="well">
                <p>Gambar</p>
            </div>
            <div class="well">
                <p>Gambar</p>
            </div>
            <div class="well">
                <p>Gambar</p>
            </div>
            <div class="well">
                <p>Gambar</p>
            </div>
        </div>
    </div><!--row content-->
</div><!--container fluid text center-->
<footer class="container-fluid text-center">
    Ini Footet
</footer>

Dan inilah hasil layout yang telah kita buat tadi

 
Dan ini tampilan layout saat dalam mode responsive
  
yap itu tadi bagaimana cara membuat layout sederhana dengan bootstrap semoga bermanfaat terima kasih sudah berkunjung,sampai jumpa di postingan berikutnya
Wassalamualaikum Wr.Wb

Rabu, 15 Maret 2017

Tutorial Instal Wordpress Di Linux

Assalamualaikum Wr.Wb

Pada postingan kali ini saya akan membahas tutorial tentang istalasi wordpress di linux,di sini saya menggunakan linux mint 17.3.Menurut saya wordpress temasuk salah satu cms terpopuler untuk membuat website,tapi sebelumnya saya mohon maaf karena saya tidak begitu jago menggunakan terminal atau CLI jadi saya akan menggunakan cara yang paling mudah menurut saya.
  • Pengertian
Wordpress adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer di gunakan sebagai mesin blog (blog engine).Wordpress di bangun dengan bahasa pemrograman php dan basis data (database) MySQL.PHP dan MySQL,keduanya merupakan perangkat lunak sumber terbuka (open source).
Selain sebagai blog,Wordpress juga mulai di gunakan sebagai CMS (Contain Management System) karena kemampuannya untuk di modifikasi dan di sesuaikan dengan kebutuhan penggunanya.

  • Latar Belakang
Karena sekarang banyak yang mulai menggunakan wordpress baik untuk kebutuhan blog maupun pembuatan website karena lebih mudah dan banyak plugin dan tema,maka dengan adanya tutorial ini semoga bisa bermanfaat terutama bagi pengguna linux baru seperti saya.

  • Alat Dan Bahan
  1. File wordpress
  2. Laptop atau pc yang akan di gunakan untuk menginstal Wordpress
  • Jangka Waktu Pelaksanaan
15 Menit

  • Tahap Penyelesaian
  •  Ekstrak file wordpress yang telah di downlod
  • Buka terminal ketik perintah  sudo caja lalu masukkan password anda



  • Lalu pindah file wordpress tadi ke File system -> var->www->html(letakkan di sini) ini wordpressnya sudah saya ubah namanya menjadi 'website' jadi silakan di sesuaikan dengan kengininan masing - masing.



  • Lalu buka PhpMyAdmin untuk membuat Database.Klik menu Database lalu isikan nama database yang ingin kita buat dan klik create,di sini saya membuat database yang namanya sama dengan folder saya tadi yaitu 'website' nama database tidak harus sama dengan folder tadi yang penting nanti tinggal konfigurasi saat penginstalan.


  • Kemudia kita beri hak akses dan hak kepemilikan tuliskan chmod -R 755 website (untuk hak akses) dan chown -R www-data:www-data website (untuk hak milik). Untuk tulisan biru klsesuaikan dengan nama folder wordpress yang tadi,lebih jelasnya lihat gambar di bawah ini.

  • Buka browser lalu ketik di url:localhost/website.Untuk tulisan merah sesuaikan dengan nama folder wordpress yang akan kita panggil.Setelah muncul tampilan seperti di bawah klik Let's go! untuk konfigurasi dan memulai penginstalan.

  • Isi sesua nama dan identitas Database yang telah kita buat,untuk username isikan saja root dan untuk password beserta yang lainnya silakan di sesuaikan dengan Database masing - masing.


  • Setelah di klik submit maka akan muncul tampilan seperti di bawah klik saja Run the instal.

  • Isikan nama website juga username dan password untuk login serta jangan lupa isi email juga lalu klik instal.

  • Login sesuai dengan username dan password sesuai yang anda isikan tadi.

  •  Dan setela login langsung menuju Dashboard sehingga bisa teman semua untuk memulai membuat website termasuk memasukkan konten,mengganti tema dan lain sebagainya.

  • Dan ini tampilan awal website dengan tema bawaan

  • Hasil Dan Kesimpulan
Menginstal wordpress tidak membutuhkan waktu yang begitu lama dan membuat website dengan worpres termasuk salah satu jalan yang paling mudah,terlihat setelah penginstalan selesai tampilan awal website sudah tergambar walaupun masih belum terdapat isi maupun konten.
Demikian tutorial menginstal wordpress di linux mint semoga bermanfat.
  • Referensi
Wassalamualaikum Wr.Wb

Selasa, 14 Maret 2017

Bootstrap Affix

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan menjelaskan tentang bootstrap Affix,apa itu bootstrap affix yaitu misalnya ada sebuah navbar yang letaknya tidak persis di atas agak di bawah konten header misalnya,lalu jika di scroll ke atas sampai navbar tersebut sudah sampai di ujung atas maka navbar itu akan fixed.Baiklah mari kita mulai saja.

  • Tuliskan script di bawah,script ini sudah saya ubah sedikit stylenya dengan css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
      .affix{
          top: 0;
          width: 100%;
      }
      .affix + .container-fluid{
          padding-top: 70px;
      }
  </style>
</head>
<body>
<div class="container-fluid" style="background-color: #009900; color: #fff; height:200px;">
<h1>Contoh Bootstrap Affix</h1>
<h3>Scroll untuk melihat contoh affix</h3>   
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
    <li class="active"><a href="#">Blog Amatir</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
</ul>   
</nav>
<div class="container-fluid" style="height: 1000px">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>

Berikut hasilnya sebelum di scroll ke bawah




Ya itu tadi sedikit mengenai Affix semoga bermanfaat, walaupun masih banyak kekurangan  sampai jumpa di postingan berikutnya terimakasih sudah berkunjung.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb 

Senin, 13 Maret 2017

Bootstrap Scrollspy

Assalamualaikum Wr.Wb



Lagi - lagi bootstrap dan kali ini saya akan membahas Scrollspy,yaitu misalkan kita mempunyai navbar dan bila kita klik salah satu menu dari navbar tersebut kita bisa langsung menuju isi menu tanpa berpindah halaman,ini prinsipnya hampir sama dengan Name Anchor.Baiklah dari pada pusing - pusing karna saya juga bingung mau menjelaskan yang bagaimana lagi mari kita mulai hehe.

  • masukkan scrip untuk memanggil bootstrap
tuliskan scrip di antara  <head> dan </head>
<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  • Buat stylenya agar lebih menarik
tuliskan scrip style di antara <head> dan </head>

<style>
      body{
          position: relative;

      }

      #menu1{padding-top: 55px;height: 500px;color: #fff;background-color: #1e88e5;}
      #menu2{padding-top: 55px;height: 500px;color: #fff;background-color: #ff00ff;}
      #menu3{padding-top: 55px;height: 500px;color: #fff;background-color: #00cc66;}
      #menu41{padding-top: 55px;height: 500px;color: #fff;background-color: #0099ff;}
      #menu42{padding-top: 55px;height: 500px;color: #fff;background-color: #009999}
  </style>

  • Lalu kita buat scrollspy ini saya terapkan pada navbar

 <body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                      
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#menu1">Menu1</a></li>
          <li><a href="#menu2">Menu2</a></li>
          <li><a href="#menu3">Menu3</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu4 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#menu41">Menu4-1</a></li>
              <li><a href="#menu42">Menu4-2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="menu1" class="container-fluid">
    <h1>Menu 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div><!--menu1-->
<div id="menu2" class="container-fluid">
    <h1>Menu 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div><!--menu2-->
<div id="menu3" class="container-fluid">
<h1>Menu 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--menu3-->
<div id="menu41" class="container-fluid">
    <h1>Submenu 4.1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--submenu 4.1-->
<div id="menu42" class="container-fluid">
    <h1>Submenu 4.2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>

Dan hasilnya seperti berikut



Setelah menu lain di klik maka akan berpindah konten tanpa berpinda halaman



Menu Dropdown


  
Setelah Dropdown di klik



Jika di lihat dari dari mode responsive



 Itu tadi sedikit mengenai bootstrap scrollspy semoga bermanfaat walaupun mungkin penjelasan saya masih belum mudah untuk di pahami untuk itu mohon maaf atas kekurangannya,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Sabtu, 11 Maret 2017

Bootstrap Carousel

Assalamualaikum Wr.Wb



Apa itu Carousel? Carousel ini merupakan semacam tampilan slide show pada tampilan web yang telah di sediakan Bootstrap selain tampilannya lumayan menarik kita juga tidak perlu repot - repot membuat stylenya.Siapkan beberapa gambar yang akan kita masukkan dalam carousel dan jangan lupa downoad dulu bootstrapnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blog Amatir</title>
  <meta charset="utf-8">
  <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>
<div class="container">
  <h1>Contoh Carousel</h1>
</div>
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indikator  -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- gambar slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="4.jpeg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="1.jpeg" alt="Chania" width="460" height="345">
      </div>
   
      <div class="item">
        <img src="2.jpeg" alt="gambar2" width="460" height="345">
      </div>

      <div class="item">
        <img src="3.jpeg" alt="gambar3" width="460" height="345">
      </div>
    </div>

    <!-- kontrol kanan kiri -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>












Dan inilah hasilnya, gambar akan berubah seperti slide pada umumnya dan jangan lupa gambar harus jadi satu folder dengan file yang scripnya sudah saya cantumkan di atas simpan dengan fomat .html



Oke itu tadi mengenai carousel dengan bootstrap  semoga bermanfaat terima kasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Jumat, 10 Maret 2017

Bootstrap Modals

Assalamualaikum Wr.Wb


Berjumpa lagi dengan bootstrap kali ini saya akan membahas bootstrap modals,apa itu bootstrap modals? yaitu ketika kita meng Klik sebuah button maka akan muncul tampilan lain.Maksudnya tampilan bagaimana? Dari pada bingung mari kita mualai saja,tetapi sebelum mencobanya teman - teman semua harus mendownload bootstrap setelah itu ekstrak bootstrap yang telah di download tadi dan letakkan file yang akan kita buat dalam satu folder bootstrap yang kita ekstrak tadi.

Tuliskan tag / script di bawah ini untuk membuat modal

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Modal</h2>
    <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#Modal">Open Modal</button>
    <!--Modal-->
    <div class="modal fade" id="Modal" role="
    dialog">
        <div class="modal-dialog">
        <!--Content modal-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Blog Amatir</h4>
            </div>
            <div class="modal-body">
                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
            </div>
        </div>   
        </div>
       
    </div>
</div>
</body>
</html>

Hasil sebelum modal di klik


Dan setelah tombol modal di klik maka modal akan muncul



Itu tadi mengenai bootstrap modal semoga bermanfaat walaupun mungkin penjelasan yang saya paparkan kurang begitu jelas,terima kasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb 

Kamis, 09 Maret 2017

Bootsrap Navbar Part 2

Assalamualaikum Wr.Wb


Mari kita lanjutkan postingan sebelumnya tentang Bootstrap Navbar,baiklah ayo kita mulai yang belum baca part 1 silahkan baca di sini.
  •   Navbar Button
Ini merupakan navbar yang di lengkapi dengan button

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
        <button class="btn btn-danger navbar-btn">Button</button>
    </div>
</nav>
</body>
</html>

Dan inilah hasilnya


  •  Navbar Forms
Navbar ini di lengkapi dengan form misalnya kita ingin membuat fitur pencarian maka tampilannya bisa menggunakan navbar forms ini
 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
        <form class="navbar-form navbar-right">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="cari">
        </div>
        <button type="submit" class="btn btn-danger">Submit</button>   
        </form>
    </div>
</nav>
</body>
</html>

Dan inilah hasilnya

  • Navbar Fixed Top(Atas)
 Yang di maksud fixed yaitu saat kita melakukan scrolling maka navbar masih tetap ada dan tidak ikut scrolling,lebih jelasnya mari kita buktikan
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
        <form class="navbar-form navbar-right">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="cari">
        </div>
        <button type="submit" class="btn btn-danger">Submit</button>   
        </form>
    </div>
</nav>
<div class="container-fluid" style="margin-top: 55px;">
    <div class="col-sm-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   
    </div>
    <div class="col-sm-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
</body>
</html>
Dan hasilnya seperti ini
  • Navbar Fixed Bottom(Bawah)
Navbar ini prinsipnya sama dengan yang di atasa yang berbeda hanya letaknya yang fixed di bawah tinggal ubah  navbar-fixed-top menjadi  navbar-fixed-bottom
Maka hasilnya akan seperti gambar di bawah ini
Akhirnya tuntas juga mengenai navbar dengan bootstrap ini,dan mungkin cukup sekian postingan kali ini semoga bermanfaat sampai jumpa di postingan  berikutnya.

Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb