SeniKoding.com - Template / tema suatu website atau blog dibuat sedemikian menarik agar pengunjung situs merasa nyaman untuk membaca dan mudah untuk menjelajahinya. Tidak hanya itu, tingkat populer dan bagus suatu website pun bisa tercemin dari menariknya suatu tampilan / desain dari halaman blog / website. Pada artikel ini saya akan memaparkan bagaimana membuat Template Blog / Website yang profesional dan menarik menggunakan Framework CSS yaitu BOOTSTRAP.
Apasi BOOTSTRAP itu?
BOOTSTRAP
Adalah framework CSS yang diprakarsai oleh situs Twitter untuk keperluan mempermudah didalam membangun desain dan tampilan template website / blog. Banyak macam fungsi yang dapat kita terapkan didalam website, seperti: Navbar, Dropdowns, Form, Pagination, Button, Icon, Footer, dan masih banyak lagi. Kemudahan didalam menggunakan membuat banyak deceloper atau individu menggunakan framework ini, selain itu tidak lupa juga mengusung keindahan dari desain yang disajikan. Mudah sekali cara menggunakan Bootstrap, sobat hanya memanggil setiap "nama class" dari class yang diperoleh "elemen / componen" tersebut.
Contoh, ingin membuat tombol "button" dengan bootstrap didalam website, maka sobat hanya memanggil tag class button didalam kode web sobat.
Memanggil class Button: class="btn btn-dark"Hasilnya ada di Gambar-1 dibawah.
Kode Tag Button:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
 |
| Gambar-1: Contoh Tombol Button dan Link |
Cara Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
Template untuk Home Page adalah halaman website bagian depan atau beranda website. Bisanya untuk website / blog halaman yang diperlukan adalah bagian Home page dan laman Post karena memang berbeda. Sehingga setelah artikel bagian Home page ini dibuat, Admin akan berusaha untuk melanjutkan membuat artikel dengan tema membuat template bagian Laman Post, jadi keduanya nanti bisa digambungkan menjadi satu, yang dimana memang bagian kedua ini sama-sama dibutuhkan.
Yang harus dilakukan untuk membuat template dengan Bootstrap adalah memanggil file Bootstrap kedalam bagian script / koding template. Cara pemanggilan file Bootstrap bisa dilakukan dengan dua metode, yaitu dengan CDN / langsung memanggil file link ke situs Bootstrap nya, yaitu :
<!DOCTYPE html> <html> <head> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'> <!-- JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </head>Kemudian cara kedua untuk memanggil file Bootstrap yaitu dengan cara memanggil nama file "Path" / "Folder" dimana file tersebut terletak / di Upload. Cara ini bisanya diterapkan jika mempunyai hosting sendiri, sehingga bebas mengupload file kedalamnya. Contoh memanggil file Bootstrap didalam nama folder "CSS dan JS":
<!DOCTYPE html> <html> <head> <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet'> <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script> <script src='bootstrap/js/jquery.min.js' type='text/javascript'></script> </head>Contoh diatas adalah cara memanggil file Bootstrap kedalam kode blog / website kita. Langkah selanjutnya yaitu memasukkan file tersebut kedalam template yang sedang dirancang yaitu dengan HTML dan CSS.
Dibawah ini akan saya berikan script / kode lengkap membuat template blog (Home page) dengan Bootstrap, berikut yang terpenting adalah penjelasan dari kodenya:
<!DOCTYPE html> <html> <head> <title>Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP</title> <!-- Include file Bootstrap disini --> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'> <link rel="stylesheet" href="css/template-homepage.css"> <!-- JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <!-- Include tag META disini --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <!-- Wrapper --> <div id="wrapper"> <!-- NAVBAR --> <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#"> <img src="#" class="d-inline-block align-top" alt=""> Brand </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#"><i class="fa fa-home" aria-hidden="true"></i> Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-link" aria-hidden="true"></i> Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-link" aria-hidden="true"></i> Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-link" aria-hidden="true"></i> Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fa fa-search" aria-hidden="true"></i> </button> </form> </div> </nav> <!-- Slider --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" style="background:gray;"> <div class="carousel-item active"> <a href="http://senikoding.com"><img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhtcm0haQu3iTNTmvSPDGPpEswdTwVWXLITR-9trNmiv56YX28mFPNYaMWLB8NWV5YDLwVl-rth9vK2t7YS2LqwQdMTQQrgYPr1A3YuYFdbLB9zIcbruo7XAXKAmon0EuexkYxXH-5yd5H/s1600/belajar_crud.png" alt=""></a> <div class="carousel-caption d-none d-md-block"> <h3>Gambar 1</h3> <p>...</p> </div> </div> <div class="carousel-item"> <a href="http://senikoding.com"><img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyxyfoJ1WpjNdo8vHktoHtLkolECQh4rijhOwdFZuDxxZjLHT7wfgrtPywjyaVp1v-KJlWytGirDKRFofSRb3J4_qBFHlVpzvnPVxmpyHyUuIh7fVx85gcEA8H7Twqe_trY04YEo5Q7I/s1600/oop.jpg" alt=""></a> <div class="carousel-caption d-none d-md-block"> <h3>Gambar 2</h3> <p>...</p> </div> </div> <div class="carousel-item"> <a href="http://senikoding.com"><img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb6sxP7UM7Ob7iIqUECI2Kukplj99f3MQcryWUH6pDLz7Oy0Jw3tvsQYqrC5qyBFSQWQ8dVX7NlyDULqU_qklabcBJL1QRedAug-5kOVOd5FBCQp5ud7JksYyeIKgVtSCKKCwCEPFlCxs/s1600/session-login.jpg" alt=""></a> <div class="carousel-caption d-none d-md-block"> <h3>Gambar 3</h3> <p>...</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- POST-GRID --> <div id="hp-post"> <!-- Homepage post (hp-post) --> <div class="row justify-content-around m-1"> <div class="hp-grid-post col-md border border-secondary m-2"> <a href="http://senikoding.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudhqUE5Ev0ChSV-w_PLfJ7DH0kBgEZkkw452J4tuapHLsk3-8jiYNLuqFuuKQP6Lr-WxWhMtKgLpdlFvs2uTOjhyphenhyphenclbIXwc-9y__x9CXiouicTqCwQXwrmHn0IZq0YR4qK-OHSv4Lh-wk/s1600/website-dinamis.png" class="mx-auto d-block" alt="Tumbhnail"></a> <h2><div class="hp-judul-post text-capitalize"><a href="http://senikoding.com">Tes : Belajar bahasa pemrogramman (SeniKoding.com)</a></div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> </div> <div class="row justify-content-around m-1"> <div class="hp-grid-post col-md border border-secondary m-2"> <a href="http://senikoding.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudhqUE5Ev0ChSV-w_PLfJ7DH0kBgEZkkw452J4tuapHLsk3-8jiYNLuqFuuKQP6Lr-WxWhMtKgLpdlFvs2uTOjhyphenhyphenclbIXwc-9y__x9CXiouicTqCwQXwrmHn0IZq0YR4qK-OHSv4Lh-wk/s1600/website-dinamis.png" class="mx-auto d-block" alt="Tumbhnail"></a> <h2><div class="hp-judul-post text-capitalize"><a href="http://senikoding.com">Tes : Belajar bahasa pemrogramman (SeniKoding.com)</a></div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> </div> <div class="row justify-content-around m-1"> <div class="hp-grid-post col-md border border-secondary m-2"> <a href="http://senikoding.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudhqUE5Ev0ChSV-w_PLfJ7DH0kBgEZkkw452J4tuapHLsk3-8jiYNLuqFuuKQP6Lr-WxWhMtKgLpdlFvs2uTOjhyphenhyphenclbIXwc-9y__x9CXiouicTqCwQXwrmHn0IZq0YR4qK-OHSv4Lh-wk/s1600/website-dinamis.png" class="mx-auto d-block" alt="Tumbhnail"></a> <h2><div class="hp-judul-post text-capitalize"><a href="http://senikoding.com">Tes : Belajar bahasa pemrogramman (SeniKoding.com)</a></div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> <div class="hp-grid-post col-md border border-secondary m-2"> <img src="" class="mx-auto d-block" alt="Tumbhnail"> <h2><div class="hp-judul-post text-capitalize">Tes : Judul</div></h2> <div class="hp-author"><i class="fa fa-user" aria-hidden="true"></i> : SeniKoding</div> </div> </div> </div> <!-- Pagination --> <br/> <div id="page"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </div> <br/> <!-- Footer --> <footer class="bg-dark"> <span class="text-light"><center>Powered by <a href="http://senikoding.com" target="_blank">SeniKoding.com</a> 2018</center></span> <center><a href="#">^ Back Top</a></center> </footer> </div> </body> </html>
Setelah membuat script diatas langkah selanjutnya membuat file CSS tambahan yang dibutuhkan diatas yang sudah dipanggil didalam kode ini "<link rel="stylesheet" href="css/template-homepage.css">".
 |
| template-homepage.css |
Isi file CSS nya sebagai berikut:
body {
font-size: 14px;
}
/* heading */
h1,h2,h3,h4,h5,h6 {
font-weight:bold;
line-height:normal;
}
h1{font-size:180%}
h2{font-size:160%}
h3{font-size:140%}
h4{font-size:120%}
h5{font-size:100%}
h6{font-size:80%}
.hp-grid-post {
height:400px;
width:100%;
padding:0;
margin:0;
}
.hp-grid-post img {
height:250px;
background:silver;
width:100%;
}
.hp-judul-post {
text-align:center;
margin-top:5px;
padding: 0px 4px;
position:absolute;
max-height:100px;
width: 100%;
overflow:hidden;
}
.hp-author {
padding: 4px 12px;
margin-top:105px;
max-height:30px;
max-width:100%;
border-top: ;
position:absolute;
overflow:hidden;
}
.navbar-brand img {
border:2px solid green;
padding: 5px;
width:30px;
height:30px;
}
.carousel-item img {
height:400px;
width: 100%;
}
footer {
padding: 20px;
}
Save / simpan file CSS tersebut dengan nama "template-homepage.css" didalam folder CSS ya. PENJELASAN:
- <!DOCTYPE html> bagian ini adalah kode untuk mendeskriksikan bahwa script ini sudah mendukung type HTML 5, yang memang sudah masuk di eranya.
- <Head> ... </head> merupakan bagian dari atas / kepala dari struktur template. Didalamnya terdapat <title> yaitu judul yang akan terlihat pada sidebar browser. Ada <meta> yang merupakan meta data untuk keperluan pendeskripsian "standar karakter" yang digunakan, keperluan "responsive" tema, dan lain-lain. Ada juga link include untuk memanggil file seperti CSS, JavaScript untuk keperluan pendukung dari pada template blog. Lihat pada bagian <head> tersebut banyak link file dari Bootstrap yang dipanggil untuk keperluan desain blog.
- <body> ... </body> Pada bagian ini semua isi yang ada didalam template dituliskan. Pada Tutorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP ini terdapat beberapa poin penting dari "Tag HTML" yang digunakan antara lain:
1. <div id="wrapper">
Wrapper atau bisa juga container yang sering digukanan pada template-template yaitu untuk membuat "tag" dari bagian keseluruhan halaman, letaknya persis dibawah tag <body>. Maksud dari tag wrapper ini adalah untuk memudahkan didalam optimasi / perubahan desain pada bagian tag tersebut jika diperlukan.
2. <nav> / navbar / navigasi / menu
Pada bagian ini menu navigasi digunakan. Menu ini digunakan untuk kemudahan didalam pencarian suatu halaman. Lihat gambar dibawah ini tampilan menu dengan Desktop dan Ponsel.
 |
| Menu navigasi (Desktop) |
 |
| Menu navigasi (Mobile / Ponsel) |
3. <div class="carousel slide"> / Slide
Pada bagian ini digunakan untuk membuat "slide". Tampilan ini akan membuat template blog menjadi lebih profesional dan kreatif. Dengan memanfaatkan sebilah bidang dapat menampilkan bebarapa gambar / post dengan cara slide tersebut. Untuk kode-kode class yang diterapkan semua lebih banyak menggunakan class Bootstrap, sedikit sata tambahan didalam template ini untuk penambahan CSS nya. Contoh kode slide ini "<img class="d-block w-100" src=""" artinya bahwa tag gambar / img diberi class dengan nilai gambar "block dan width (lebar) 100%" Jika sobat SeniKoding ingin memaksimalkan atau merubah tampilannya bisa mengunjungi situs resminya yaitu www.getbootstrap.com.
4. <div id="hp-post"> / Homepage Post / Grid
Bagian Homepage template ini dibuat dengan model Grid. Pada halaman homepage akan terlihat rapi dan enak dilihat ketika post-post tampil dengan grid. Gaya kotak-kotak tersusun rapi dengan tampilan gambar post, judul dan author. Berikut ini settingan cara membuat template blog model grid dengan Bootstrap:
- <div class="row justify-content-around m-1"> yang artinya "row" adalah membuat baris yang rapi dan responsive, "justify-content-around" yang artinya content dari kolom rata kanan dan kiri, "m-1' artinya memberikan jarak dengan margin = '1'.
- <div class="hp-grid-post col-md border border-secondary m-2"> yang artinya "col-md" adalah membuat grid colum dengan size medium (col-md) serta diberikan sentuhan border-secondary, "m-2" adalah margin = '2'.
- <div class="hp-judul-post text-capitalize"> yang artinya dari "text-capitalize" adalah membuat huruf depan setiap kata judul post terlihat Kapital / besar. Contoh "Membuat Template Blog (Home Page) Profesional Menggunakan Bootstrap.
- <i class="fa fa-user" aria-hidden="true"></i> yang artinya memberikan tambahan "icon" model user dengan fontawesome.
5. <div id="page"> / Pagination
 |
| Page / pagination |
6. <footer>
Bagian ini memberikan perintah pada area bagian footer / kaki halaman template. Bagian "<footer class="bg-dark">" adalah memberikan background ber warna dark, dan bagian "<span class="text-light">" memberikan warna teks dengan light (menyerupai putih).
Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP bisa sobat kembangkan lagi sesuai selera dan lebih bagus pastinya.
Jangan lupa untuk memperhatikan setiap class dalam Bootstrap yang dipakai, dan telitilah didalam pengaturan responsive didalam template nya. Simak untuk artikel selanjutnya yaitu membuat template blog (laman post) dengan Bootstrap.
Demo Template.
- Salam -
hwadooh...saya sampe sekarang gak ngerti ngoperasiin bootstrap.
BalasHapusapa perlu ikut kursus website ya ?
Bootstrap keren sih tapi bingung buatnya.
BalasHapus