-->
›

Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP

By Edit
Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP - Hallo sahabat Blog Tentang Pengetahuan Umum, Pada Artikel yang anda baca kali ini dengan judul Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Ilmu Sekolah, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
link : Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP

Baca juga


Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP

Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP

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/AVvXsEixk_OCz6k2EA9JHhYE4yg-9JZZZs9qTIqozd3CvyvZtN0t28N6yWsymfHXrc6pAYZsbMlFfxBxgaq5ktvMz7dbdkLRPStD932Etm3BalIHVxzTeMRGzBejdc3a_lTiiPLFzZmbI1UVg_7Z/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/AVvXsEgfcEyfBqoPsh0fHs1ErV0cBPH4Mysr3jVmumtRrnXtpwXvE5VWjSiy7Ia0Wma6KQE4dTAGnmwjP0JcOfZF0zuT_E03VmBSRR9LJgbiMjRh1136dLiVVyFl3GOScCVMIRvzSvOJyFjc_Tc/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/AVvXsEhxR5IMdYbpRT2law9AleHStuUfCqE46E7RFh_TBDMHaLjVI8HhHgKt6dlo-Wm-zdIu5BY0uiQ74WIbzJ61V-9v5DmWQXs9wX26bRXnRAxg1HNNDPspcpwTTNnsW-df7qWYeJj4MklwDt8/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/AVvXsEhyl45Jjsd6-ODy7w-IMtrVJ2Cz9v1WzV8u4y_ofzilpnt6o-eMbAlwplCn0WHJr3pNTwczhfOTi_UhbwcoY2IoaqnSfbuXEhoqShDfxmaP4Zdj4i_a3sYdPHR-s1CG_9RiMoiK8xOmVC2F/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/AVvXsEhyl45Jjsd6-ODy7w-IMtrVJ2Cz9v1WzV8u4y_ofzilpnt6o-eMbAlwplCn0WHJr3pNTwczhfOTi_UhbwcoY2IoaqnSfbuXEhoqShDfxmaP4Zdj4i_a3sYdPHR-s1CG_9RiMoiK8xOmVC2F/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/AVvXsEhyl45Jjsd6-ODy7w-IMtrVJ2Cz9v1WzV8u4y_ofzilpnt6o-eMbAlwplCn0WHJr3pNTwczhfOTi_UhbwcoY2IoaqnSfbuXEhoqShDfxmaP4Zdj4i_a3sYdPHR-s1CG_9RiMoiK8xOmVC2F/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">".
Membuat Template Blog
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.
Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
Menu navigasi (Desktop)
Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
Menu navigasi (Mobile / Ponsel)
Pada bagian sisi dari link terdapat "icon" yang merupakan tambahan dari kode ini "<i class="fa fa-home" aria-hidden="true"></i>" kode tersebut diambil dari situs fontawesome.io yang telah menyediakan berbagai macam gambar / icon yang dapat kita gunakan. Untuk pemanggilan link file fontawesome terdapat pada tag <head> diatas.

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

Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
Page / pagination
Tag HTML ini membuat class page / halaman / pagination. Sangat penting membuat widget ini untuk keperluan looping suatu laman post, dimaksudkan agar tidak semua laman post tampil pada halaman yang dapat memberatkan server sehingga loading menjadi lambat. Jika pagination ini dibuat dengan misalkan 5 post per halaman blog, jika blog tersebut mempunyai 20 post makan akan ada 4 halaman pagination yang dapat dibuka. Sehingga beban server untuk membuka halaman tidak terlalu berat. Maksud dari tag ini "<ul class="pagination justify-content-center">" adalah mendeklarasikan class pagination bootstrap, "justify-content-center" adalah meletakkan widget dengan rata tengah.

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
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.
Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
Menu navigasi (Desktop)
Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
Menu navigasi (Mobile / Ponsel)
Pada bagian sisi dari link terdapat "icon" yang merupakan tambahan dari kode ini "<i class="fa fa-home" aria-hidden="true"></i>" kode tersebut diambil dari situs fontawesome.io yang telah menyediakan berbagai macam gambar / icon yang dapat kita gunakan. Untuk pemanggilan link file fontawesome terdapat pada tag <head> diatas.

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

Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP
Page / pagination
Tag HTML ini membuat class page / halaman / pagination. Sangat penting membuat widget ini untuk keperluan looping suatu laman post, dimaksudkan agar tidak semua laman post tampil pada halaman yang dapat memberatkan server sehingga loading menjadi lambat. Jika pagination ini dibuat dengan misalkan 5 post per halaman blog, jika blog tersebut mempunyai 20 post makan akan ada 4 halaman pagination yang dapat dibuka. Sehingga beban server untuk membuka halaman tidak terlalu berat. Maksud dari tag ini "<ul class="pagination justify-content-center">" adalah mendeklarasikan class pagination bootstrap, "justify-content-center" adalah meletakkan widget dengan rata tengah.

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.


Demikianlah Artikel Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP

Sekianlah artikel Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Tuttorial Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP dengan alamat link https://salem-bur.blogspot.com/2018/03/tuttorial-membuat-template-blog-home.html

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan2

Iklan Tengah Artikel 2

Iklan Bawah Artikel