Tuesday, October 2, 2018

Tutorial Bootstrap #8 : Membuat Dropdown


Hai semuanya….

Pada tutorial kali, kita akan belajar membuat menu dropdown dengan Bootstrap, menu dropdown merupakan sebuah menu yang dapat ditoggle serta dapat memilih opsi yang telah ditentukan.

Membuat Menu Dropdown.

Untuk membuat sebuah menu dropdown, buatlah sebuah tag <div> lalu tambahkan class “dropdown”, contohnya seperti berikut.
  <div class="dropdown">
...
</div>
Selanjutnya, didalam tag <div> tersebut, buatlah tag <button> dan tambahkan atribut class = “btn btn-primary” dan “dropdown-toggle”, type=”button”, data-toggle= ”dropdown”, serta buatlah didalam tag <button> sebuah text “Menu Dropdown”, tag <span>  tambahkan class “caret” di, contohnya sebagai berikut.
  <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
</div>
Berikutnya, masih didalam tag <div>, buatlah tag <ul> dan tambahkan class “dropdown-menu” dan didalam tag <ul>, buatlah tag <li> yang masing masingnya memiliki tag <a href=”#”> didalamnya, contohnya seperti berikut.
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>  </div>  
</div>
Hasilnya.


Ketika, mengklik Menu Dropdown, maka opsinya akan muncul, dapat dilihat seperti berikut.


Menambahkan Opsi Header Menu Dropdown

Selanjutnya, kita dapat membuat sebuah header dari opsi dropdownnya, untuk membuat header pada opsinya, buatlah tag <li> dan tambahkan class “dropdown-header”, taruh didalam dropdown menu, contohnya seperti berikut.
  <div class=”dropdown”>
    <button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Menu Dropdown <span class=”caret”></span></button>
    <ul class=”dropdown-menu”>
      <li class=”dropdown-header”>Informasi</li>
      <li><a href=”#”>Home</a></li>
      <li><a href=”#”>About</a></li>
      <li><a href=”#”>Contact</a></li>
      <li><a href=”#”>Desclimer</a></li>
      <li class=”dropdown-header”>Material</li>
      <li><a href=”#”>Tutorial</a></li>
      <li><a href=”#”>Download</a></li>
      <li><a href=”#”>Template</a></li>
      <li><a href=”#”>Video</a></li>
    </ul>
  </div>
Hasilnya.


Memisahkan Opsi Menu Dropdown

Selain dapat menambahkan header pada opsi menu dropdown, kita juga dapat memisahkan opsinya dengan menggunakan class “divider”, menambahkan class “divider” pada tag <li>, contohnya seperti berikut.
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Informasi</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Material</li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>
  </div>
Hasilnya.


Dropup

Selain Dropdown, kita juga dapat membuat sebuah dropup, caranya, ganti class “dropdown” menjadi “dropup”, pada tag <div> yang menjadi pembungkusnya, contohnya seperti berikut.
  <div class="dropup">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Informasi</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Material</li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>
  </div>
Hasilnya.


Sekian, tutorial membuat dropdown dengan Bootstrap, semoga teman teman paham dan mengerti dengan tutorial ini dan bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah ya, terima kasih.

Tutorial Bootstrap #7: Membuat Jumbotron


Hai semuanya...

Pada tutorial kali ini kita akan belajar membuat jumbotron dengan Bootstrap, jumbotron merupakan sebuah box besar untuk menampilkan sebuah informasi atau konten yang spesial.

Membuat Jumbotron

Untuk membuat jumbotron pada Bootstrap, tambahkan class “jumbotron” pada tag <div> setelah itu tambahkan sebuah informasi, contohnya sebagai berikut.
  <div class="jumbotron">
    <h1>Kode Kuliahan</h1>
    <p>Kode Kuliahan merupakan sebuah blog berkategori edukasi
    yang membahas tutorial HTML, CSS, Java Script, PHP, MySQL lainnya juga.</p>
  </div>
Hasilnya.


Menambahkan Button

Selain text, didalam jumbotron, kita dapat menambahkan sebuah button, contohnya sebagai berikut.
Baca juga - Cara membuat button dengan Bootstrap

  <div class="jumbotron">
    <h1>Kode Kuliahan</h1>
    <p>Kode Kuliahan merupakan sebuah blog berkategori edukasi
    yang membahas tutorial HTML, CSS, Java Script, PHP, MySQL lainnya juga.</p>
    <a href="#" class="btn btn-primary btn-lg">Selengkapnya</a>
  </div>
Hasilnya.


Demikian, tutorial membuat jumbotron dengan Bootstrap, semoga tutorial ini bermanfaat, mohon maaf jika ada kesalahan, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Bootstrap #6: Membuat Pagination


Hai semuanya...
Apa kabar semuanya, semoga tetap dalam keadaan sehat.

Pada tutorial kali ini kita akan belajar membuat pagination dengan Bootstrap, jika kita mempunyai sebuah halaman website yang banyak maka kita harus membagi setiap halamannya dengan pagination ini, langsung kita mulai belajar cara buat paginationnya.

# Membuat Pagination

Untuk membuat sebuah pagination dengan Bootstrap, tambahkan class “pagination” pada tag <ul> kemudian didalam tag <ul> buatlah  tag <li> yang masing masing didalam tag <li> memiliki tag <a href=”#”>, contohnya sebagai berikut.
<ul class="pagination">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
</ul>
Hasilnya.


# Mengubah Size / Ukuran Pagination 

Jika ingin mengubah ukuran pagination menjadi besar atau kecil, ada 2 class yang digunakan mengubahnya yaitu 
  • pagination-lg 
  • pagination-sm

Class pagination-lg berfungsi untuk mengubah ukuran/size pagination menjadi large/besar, contoh penggunaannya sebagai berikut.

  <ul class="pagination pagination-lg">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
 </ul>
Hasilnya.

Sedangkan class pagination-sm berfungsi untuk mengubah size/ukuran pagination menjadi kecil, contohnya sebagai berikut.
  <ul class="pagination pagination-sm">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>
Hasilnya.


# Class Active Dan Disabled

Pada dasarnya penggunaan class “active” pada untuk link yang sedang aktif digunakan sedangkan class disabled menonaktifkan link agar tidak dapat diklik, pada pagination kita dapat menggunakan kedua class tersebut, contoh misalkan link aktif pada nomor 1, maka tambahkan class “active” pada tag <li> nomor satu, contohnya sebagai berikut.
  <ul class="pagination pagination-lg">
    <li class="active"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>
Hasilnya.


Namun, jika mengganti class “active” menjadi “disabled”, maka linknya akan menjadi tidak dapat diklik atau nonaktif link.

# Tombol Previous dan Next

Untuk menambahkan tombol previous dan next, syntax sebagai berikut.
  <ul class="pagination pagination-lg">
    <li><a href="">Previous</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li class="active"><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">Next</a></li>
  </ul>
Hasilnya.


Demikian tutorial membuat pagination dengan Bootstrap, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Bootstrap #5: Membuat Breadcrumb


Hai semuannya...

Pada tutorial kali ini, kita akan belajar membuat breadcrumb dengan Bootstrap, breadcrumb biasanya digunakan untuk menunjukkan lokasi atau herarki halaman yang diakses oleh user.

Membuat Breadcrumb

Untuk membuat sebuah breadcrumb, gunakan class “breadcrumb” pada tag <ul>, contohnya sebagai berikut.
  <ul class="breadcrumb">
...
</ul>
Selanjutnya, didalam tag <ul> tambahkan tag <li> yang masing masing didalam tag <li> memiliki tag <a href=”#”>, contohnya sebagai berikut.
  <ul class="breadcrumb">
    <li><a href="#"></a>Home</li>
    <li><a href="#"></a>Tutorial</li>
    <li><a href="#"></a>Front End</li>
    <li class="active"><a href="#"></a>CSS</li>
  </ul>
Hasilnya.


Jadi membuat sebuah breadcrumb sangatlah simple.
Demikian tutorial membuat breadcrumb dengan Bootstrap, semoga tutorial ini bermanfaat bagi kalian, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Sunday, September 30, 2018

Tutorial Sublime Text #3: Menambahkan Folder Project


Selanjutnya, kita akan akan belajar bagaimana cara memasukkan folder project dan membuat file di text editor Sublime Text, cara sangat mudah, baiklah mari kita mulai.
Pastikan aplikasinya sudah berjalan, kemudian pada bagian menu bar, kalian pilih Project > Add Folder to Project, kemudian kalian pilih folder yang kalian ingin tambahkan, pada kasus kali ini saya menambahkan folder My Project, kalian dapat melihatnya pada gambar berikut.



Jika folder yang kalian telah tambahkan tidak muncul seperti, kalian bisa menampilkannya dengan cara kalian pilih View > Side Bar > Show Side Bar, maka akan muncul folder yang kalian telah tambahkan sebelumnya di bagian sidebar, seperti yang kalian telah lihat pada gambar diatas.
Selanjutnya, kalian bisa menambahkan file didalam folder yang telah kalian tambahkan tadi, dengan cara kalian klik kanan pada mouse kalian masing masing, kemudian pilih New File, kemudian akan muncul tab baru seperti gambar dibawah ini.


Kemudian tekan tombol CTRL + S untuk menyimpan file nya, setelah itu silahkan kalian kasih nama file dan extensinya sesuai keinginan kalian, pada kasus kali ini saya memberi nama file saya bernama index.html dengan extensi .html setelah itu pilih tombol Save, seperti gambar berikut.


Setelah kalian menyimpan file nya, maka kita telah bisa menulis tag tag HTML didalam file dengan extensi .html yang kita telah buat tadi, seperti gambar berikut.


Oke kita telah berhasil menambahkan folder di Sublime Text dan menambahkan file didalam folder yang telah kita tambahkan, bagaimana menurut kalian cukup mudah atau tidak tutorial kali ini.

Jika ada kesalahan pada tutorial ini, silahkan tuliskan saja komentar kalian dibawah, jangan malu malu berkomentar nih, terima kasih atas perhatiannya mohon maaf jika ada kesalahan, semoga tutorial ini bermanfaat, sekian, sampai berjumpa di tutorial selanjutnya.

Kalian Luar Biasa !

Tutorial Sublime Text #2: Instalasi Package Control


Tutorial selanjutnya kita akan belajar cara menginstall Package Control di Sublime Text, kalau kalian belum tau apa itu Package Control, simplenya gini, Package Control berfungsi untuk mengontrol package package yang ada di Sublime Text, kalian bisa install, remove, disable, enable package package dan masih banyak lagi yang bisa dilakukan, jika kalian tidak menginstall Package Control di Sublime Text kalian, maka kalian nggak akan sama sekali bisa menginstall package package yang kalian butuhkan, untuk itu pada tutorial ini saya akan menjelaskan cara mudah menginstall Package Control di Sublime Text, mari kita mulai tutorial ini.

Untuk mendapatkan Package Control silahkan kalian kunjungi websitenya di https://ww.packagecontrol.io, kemudian akan menampilkan halaman seperti gambar berikut.


Kemudian kalian klik pada bagian Install Now, akan menampilkan halaman seperti gambar dibawah ini.


Pada bagian ini kita akan di sodorkan dua cara menginstall Package Control, yang pertama dengan cara Simple yaitu menginstall Package Control secara online melalui console yang ada di Sublime Text, caranya kalian tinggal copy kode seperti gambar dibawah ini.


Jika kalian menggunakan Sublime Text versi 3 silahkan copy kode yang sudah disediakan untuk versi 3, jika kalian menggunakan Sublime Text versi 2 silahkan copy code yang disediakan untuk versi 2. Setelah kalian copy kodenya, paste kodenya di console Sublime Text, cara menampilkan console di Sublime Text, kalian klik View > Show Console, atau dengan menekan CTRL + `, setelah itu paste kodenya lalu tekan Enter, seperti gambar berikut.


Tunggu proses instalasinya selesai, pastikan kalian mempunyai koneski internet yang stabil guna memperlancar proses instalasi.

Cara yang kedua adalah cara Manual, pada cara ini kalian download Package Control pada bagian Package Control.sublime-package, setelah kalian download, kalian copy filenya.


Setelah kalian copy filenya, kalian buka aplikasi text editor Sublime Text, pilih Preferences > Browse Packages, kemudian akan tampil seperti gambar berikut.


Klik pada bagian Sublime Text 3 agar mundur satu folder, kemudian akan tampil seperti gambar berikut.


Masuk pada bagian folder Installed Packages, kemudian paste file Package Control.sublime-package yang telah di copy tadi, seperti gambar dibawah ini.


Sampai muncul file 0_package_control_loader.sublime-package, seperti yang kalian lihat pada gambar diatas, jika sudah muncul file tersebut, maka kalian udah bisa menginstall package di Sublime Text.

Selanjutnya, cara kita menginstall package package nya bagaimana ?, caranya cukup mudah, kalian tinggal pilih bagian Preferences > Package Control, tampil seperti gambar berikut.


Pada bagian ini, kalian tinggal pilih Package Control: Install Package, lalu cari package yang kalian ingin install, pada kasus kali ini saya akan menginstall package Emmet, seperti gambar berikut.


Sekarang kalian udah berhasil menginstall Package Control baik itu secara Simple atau Manual, jika kalian kebingungan dengan package apa yang seharusnya kalian install, kalian kunjungi akan website https://www.packagecontrol.io pada website itu kalian bisa mengetahui package package mana yang sedang trending, populer atau mungkin selanjutnya mungkin saya akan membuat tutorialnya untuk kalian.

Baik, sampai disini dulu tutorialnya, jika ada kesalahan di tutorial ini silahkan kalian kasih aja komentar pada kolom komentar dibawah, semoga tutorial ini bermanfaat, mohon maaf jika ada kesalahan, terima kasih atas perhatiannya, sampai jumpa di tutorial selanjutnya.

Kalian Luar Biasa !

Tutorial Sublime Text #1: Instalasi Sublime Text


Pada tutorial ini, kita akan belajar bagaimana cara menginstall text editor yang paling populer yaitu Sublime Text, dimana kita akan menginstallnya di sistem operasi Windows, sebenarnya Sublime Text tidak hanya untuk sistem operasi Windows saja, tetapi Sublime Text juga tersedia untuk Linux dan MacOS. Baiklah langsung kita mulai saja, saya harap kalian memperhatikan tutorial ini dengan baik.

Note
Jika kalian belum mempunyai aplikasi Sublime Text silahkan kalian download  aplikasinya pada lihat berikut https://www.sublimetext.com 

Mari Kita Mulai !

Silahkan kalian jalankan setup aplikasi Sublime Text nya, jika kalian sudah menjalankannya, akan tampil seperti gambar berikut.


Selanjutnya kalian pilih tombol Next, setelah itu akan tampil seperti gambar berikut.


Pada tahap ini kalian akan memilih destinasi folder atau dimana letak lokasi menginstall aplikasi Sublime Text, yang dimana pada kasus kali ini letak destinasi folder tempat menginstall aplikasi Sublime Text pada local C:\Program Files\Sublime Text 3, jika kalian ingin menginstallnya pada destinasi folder yang lain, silahkan klik tombol Browse, kemudian pilih destinasi folder yang kalian inginkan, kemudian klik tombol Next, selanjutnya akan tampil seperti gambar berikut.


Pilih tombol Next, selanjutnya akan tampil seperti gambar berikut.


Pilih tombol Install, setelah itu kalian tunggu proses instalasi selesai. Jika proses instalasi telah selesai, selanjutnya akan tampil seperti gambar berikut.


Pilih tombol Finish, setelah itu silahkan kalian jalankan aplikasi Sublime Text yang telah terinstall, seperti gambar berikut.


Berhasil ! kita telah menginstall aplikasi Sublime Text di sistem operasi Windows. 

Sekian tutorial ini, jika ada kesalahan pada tutorial ini, silahkan berikan komentar kalian ya, terima kasih atas perhatiannya, mohon maaf jika ada kesalahan, semoga tutorial ini bermanfaat, sampai jumpa di tutorial selanjutnya.

Kalian Luar Biasa !!!

Friday, March 9, 2018

Tutorial Membuat Navbar Responsive


Hai semuanya...

Pada artikel kali ini kita akan belajar membuat navbar responsive dengan HTML dan CSS, penasaran bagaimana cara membuatnya, yuk kita langsung mulai belajar membuatnya.

Langkah pertama, kita akan menggunakan library icon yaitu Font Awesome untuk digunakan pada navbar, silahkan copy dan paste code berikut dibawah tag <head>.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
Langkah kedua, tulis syntax HTML seperti dibawah ini.
  <nav class="navbar" id="nav">
  <a href="#" class="active"><span class="fa fa-code"></span> Kode Kuliahan</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#" class="bars" onclick="toggleItem()">
    <span class="fa fa-bars"></span></a>
</nav>
Langkah ketiga, tambahkan syntax CSS seperti berikut.
  .navbar{overflow: hidden;background-color: #1d1d1d;}
  .navbar a{
    display: block;
    float: left;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 25px 20px;
  }
  .navbar a:hover{background-color: #0058ee;}
  .active{background-color: #0058ee;}
  .navbar .bars{display: none;}

  @media screen and (max-width:600px){
    .navbar a:not(:first-child){display: none;}
    .navbar a.bars{
      display: block;
      float: right;
    }
  }
  @media screen and (max-width:600px){
    .navbar.item{position: relative;}
    .navbar.item .bars{
      position: absolute;
      right: 0;
      top: 0;
    }
    .navbar.item a{
      float: none;
      display: block;
      text-align: left;
      
    }
  }

Langkah keempat, tambahkan syntax Java Script seperti berikut.
  function toggleItem(){
    let n = document.getElementById('nav');
      if(n.className === 'navbar'){
        n.className += ' item';
      }else{
        n.className = 'navbar';
      }
    }
Hasilnya dapat dilihat pada gambar dibawah ini.


Ketika browsernya diresize menjadi 600px, maka tombol bars akan mucul, seperti gambar berikut ini.


Sehingga kita dapat mengklik tombol barsnya dan akan memunculkan itemnya, dapat dilihat seperti gambar dibawah ini.


Sekian dulu tutorial membuat navbar responsive, semoga bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Membuat Fullscreen Modal Search Form


Hai semuanya,  pada tulisan kali ini kita akan belajar membuat fullscreen modal search dengan HTML dan CSS, langsung kita mulai belajar membuatnya.
Langkah Pertama, kita akan menggunakan library icon yaitu Font Awesome, copy dan paste kode dibawah tag <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Langkah Kedua, silahkan tulis syntax HTML seperti dibawah ini.
<!-- modal -->
<div class="modal" id="search-modal">
<!-- trigger untuk menutup modal -->
  <span class="btn-close" onclick="closeModal()" title="Close">
    <i class="fa fa-close"></i></span>
    <!-- isi modal -->
  <div class="modal-content">
    <p>Pencarian</p>
    <form action="#">
      <input type="text" placeholder="Cari">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div> <!-- end modal -->
<!-- trigger untuk menampilkan modal -->
<button class="trigger" onclick="openSearch()">
  <i class="fa fa-search"></i> Klik Search</button>
Hasilnya awalnya dapat dilihat pada gambar dibawah ini.
Langkah ketiga, silahkan tulis syntax CSS seperti dibawah ini.
.trigger{
      background-color: #007afa;
      border: none;
      padding: 15px;
      cursor: pointer;
      color:#fff;
      border-radius: 7px;
    }
    .modal{
      width: 100%;
      height: 100%;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .modal-content{
      position: relative;
      top: 35%;
      width: 80%;
      text-align: center;
      margin: 30px auto 0;
    }
    .modal-content p{
      font-size: 40px;
      color: #fff;
    }
    .modal .btn-close{
      position: absolute;
      top: 20px;
      right: 45px;
      cursor: pointer;
      color: #fff;
    }
    .modal input[type=text]{
      width: 80%;
      float: left;
      border: none;
      padding: 15px;
      box-sizing: border-box;
    }
    .modal button{
      width: 20%;
      float: left;
      border: none;
      padding: 15px;
      cursor: pointer;
      background-color: #007afa;
      color: #fff;
    }
Langkah keempat, silahkan tulis syntax Java Script seperti dibawah ini.
// fungsi untuk membuka modal search
  function openSearch(){
    document.getElementById('search-modal').style.display = "block";
  }
  // fungsi untuk menutup modal search
  function closeModal(){
    document.getElementById('search-modal').style.display = "none";
  }
Jadi, ketika kita mengklik tombol "Klik Search", maka modalnya akan tampil, contohnya dapat dilihat pada demo berikut.

See the Pen Fullscreen Modal Search by Karis Maulana (@karismaulana) on CodePen.

Demikian cara membuat fullscreen modal search form dengan HTML, CSS, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tulis komentar anda dibawah.

Terima kasih telah berkunjung.

Monday, February 19, 2018

Membuat Scroll Indikator Dengan HTML, CSS Dan Java Script


Hai semuanya, pada tutorial kali ini kita akan belajar membuat scroll indicator dengan HTML, CSS dan Java Script, agan mau tau cara buatnya, yuk kita langsung mulai belajar membuat scroll indicator.

Bagi anda yang ingin mendownload source code dari tutorial ini, anda dapat mendownloadnya pada link dibawah ini.


Pertama, tulis syntax HTML seperti dibawah ini.
<header>
  <nav>
    <a href="">Kode Kuliahan</a>
    <div class="left">
    <a href="">Home</a>
    <a href="">Blog</a>
    <a href="">About</a>
    <a href="">Contact</a>
    </div>
  </nav>
  <div class="progress">
    <div class="progress-indicator" id="scroll-bar"></div>
  </div>
</header>
<article>
<p>
<h1>Perbedaan Front End, Back End Dan Full Stack Developer</h1>
<hr>
<h1>Front End</h1>
Jadi apa yang dimaksud dengan Front-end? Front-end merupakan bagian daru suatu website yang pengguna bisa dan dapat di interaksi secara lanngsung, Front-end terdiri dari HTML, CSS, dan JavaScript. HTML (HyperText Markup Language) merupakan penompang dasar suatu website, semua website yang akmu kunjungi dibuat dengan HTML. HTML menangani semua struktur yang ada di website tersebut walaupun situs yang dibuat dengan versi yang lama masih berjalan dengan lancar dengan browser Anda.....
</p>
<p>
<h1>Back-End</h1>
Dimana Front-end menangani semuanya yang berkaitan interaksi langsung pengguna, back-end seperti namanya lebih mengerjakan di behind-the-scenes dan mempunyai keunggulan lebih daripada teknologi front-end untuk projek yang lebih spesifik. Bahasa program Back-end terdiri dari PHP, Ruby, Phython dan lainnya....
</p>
<p>
<h1>Full-Stack</h1>
Developer full-stack bekerja di front dan back end suatu website, mereka mengathui cara kerja HTML, CSS, JavaScript dan satu atau mungkin lebih bahasa program back-end. Seiring waktu berjalan apa yang bisa dilakukan dengan menggunakan bahasa program front dan back end menjadi lebih mirip dan susah dibedakan, dan dimana suatu masalah dulu hanya bisa diatasi dengan menggunakan back end, sekarang menjadi tidak mustahil bila menggunakan front-end,As the line developer menjadi apa yang kita sebut “full stack.” banyak pekerja (terutama agency yang menggunakan berbagai website) mencari developer yang tahu bagaimana cara kerja semua bagian di website tersebut....
</p>
<h2>Sumber Artikel</h2>
<a href="https://beyonder.asia/apa-perbedaan-dari-front-end-back-end-full-stack-developer/">
  https://beyonder.asia/apa-perbedaan-dari-front-end-back-end-full-stack-developer/
</a>
</article>
Kedua, setelah anda menulis syntax HTML yang cukup panjang, tulis syntax CSS seperti dibawah ini.
header{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      display: table;
      clear: both;
      background-color: #282828;
    }
    nav{
      width: 90%;
      margin: auto;
    }
    nav a{
      display: inline-block;
      padding: 20px 10px;
      text-decoration: none;
      color: #fff;
    }
    .left{float: right;}
    .progress{
      width: 100%;
      height: 4px;
      background-color: #ccc;
    }
    .progress-indicator{
      width: 0%;
      height: inherit;
      background-color: #1b9dc6;
    }
    article{
      width: 80%;
      margin: 100px auto 0;
      text-align: justify;
    }
Ketiga, tulis syntax Java Script seperti dibawah ini.
// ketika halaman discroll jalankan fungsi scrollIndicator()
window.onscroll = function(){scrollIndicator();}

function scrollIndicator(){
  let pageScroll = document.body.scrollTop || document.documentElement.scrollTop;
  let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let scroll = (pageScroll / height) * 100;
  document.getElementById('scroll-bar').style.width = scroll + "%";
}
Hasilnya, anda dapat melihatnya pada gambar bawah ini.


Jadi, ketika kita scroll halamannya kebawah, maka scroll indicatornya yang berwarna biru akan berjalan, dapat dilihat gambar dibawah ini.



Seperti yang kita lihat pada gambar diatas ini, indicator scrollnya berjalan.

Demikian, tutorial cara membuat scroll indicator dengan HTML, CSS dan Java Script, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.

Cara Membuat Form Newsletter Dengan HTML Dan CSS


Hai semuanya, pada tutorial kali ini kita akan belajar membuat design form newsletter dengan HTML dan CSS, langsung kita mulai belajar cara membuatnya.

Bila anda ingin mendownload source code tutorial ini, anda dapat mendownloadnya pada link dibawah ini.


Pertama, kita membutuhkan library Font Awesome untuk menggunakan sebuah icon, untuk menggunakan library Font Awesome, silahkan copy dan paste tag link ini dibawah tag <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Kedua, tulis syntax HTML seperti dibawah ini.
<form action="#" method="get">
  <div class="icon">
    <span class="fa fa-envelope"></span>
  </div>
  <p><strong>Newsletter</strong></p>
  <p>Dapatkan artikel terbaru dari kami, langsung via email anda.</p>
  <label><span class="fa fa-user"></span> Nama Lengkap
    <input type="text" placeholder="Masukkan nama lengkap anda">
  </label>
  <label><span class="fa fa-envelope-o"></span> Email
    <input type="email" placeholder="Masukkan email yang valid">
  </label>
  <button type="submit"><span class="fa fa-send"></span> Kirim</button>
</div>
Selanjutnya, jika anda telah menulis syntax HTML diatas, tulis syntax CSS seperti dibawah ini.
form{
      width: 100%;
      max-width: 300px;
      padding: 15px;
      text-align: center;
      background-color: #199e46;
      color: #fff;
    }

    label,input{
      display: block;
      margin-bottom: 12px;
      font-size: 12px;
    }

    input{
      width: 100%;
      padding: 10px 14px;
      border-radius: 20px;
      border: none;
      margin-top: 7px;
      box-sizing: border-box;
      color: #199e46;
    }

    button{
      padding: 10px;
      width: 100%;
      border: none;
      border-radius: 20px;
      background-color: #199e46;
      border: 2px solid #fff;
      color: #fff;
      cursor: pointer;
      transition: .3s;
    }
    button:hover{
      background-color: #fff;
      color: #199e46;
    }
    .icon{
      width: 150px;
      height: 150px;
      margin: auto;
      border-radius: 50%;
      background-color: #fff;
      color: #199e46;
      line-height: 150px;
      text-align: center;
      font-size: 100px;
    }
Untuk hasilnya, anda dapat melihat hasilnya pada gambar dibawah ini.


Bagaimana menurut anda, design form newsletternya udah bagus atau belum nih ?

Demikian, cara membuat design form newsletter dengan HTML dan CSS, semoga anda tertarik belajar membuatnya. Jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih

Semoga Bermanfaat.