Membuat Template Blog (Home Page) Profesional Memakai Bootstrap
- Template / tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyaman untuk membaca dan gampang untuk menjelajahinya. Tidak hanya itu, tingkat terkenal dan cantik suatu website pun sanggup tercemin dari menariknya suatu tampilan / desain dari halaman blog / website. Pada artikel ini saya akan memaparkan bagaimana menciptakan Template Blog / Website yang profesional dan menarik memakai 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 sanggup kita terapkan didalam website, seperti: Navbar, Dropdowns, Form, Pagination, Button, Icon, Footer, dan masih banyak lagi. Kemudahan didalam memakai menciptakan banyak deceloper atau individu memakai framework ini, selain itu tidak lupa juga mengusung keindahan dari desain yang disajikan. Praktis sekali cara memakai Bootstrap, sahabat hanya memanggil setiap "nama class" dari class yang diperoleh "elemen / componen" tersebut.
Contoh, ingin menciptakan tombol "button" dengan bootstrap didalam website, maka sahabat hanya memanggil tag class button didalam arahan 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 bab depan atau beranda website. Bisanya untuk website / blog halaman yang dibutuhkan ialah bab Home page dan laman Post alasannya ialah memang berbeda. Sehingga sesudah artikel bab Home page ini dibuat, Admin akan berusaha untuk melanjutkan menciptakan artikel dengan tema menciptakan template bab Laman Post, jadi keduanya nanti sanggup digambungkan menjadi satu, yang dimana memang bab kedua ini sama-sama dibutuhkan.
Yang harus dilakukan untuk menciptakan template dengan Bootstrap ialah memanggil file Bootstrap kedalam bab script / koding template. Cara pemanggilan file Bootstrap sanggup dilakukan dengan dua metode, yaitu dengan CDN / eksklusif 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 kalau memiliki 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 ialah cara memanggil file Bootstrap kedalam arahan 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 / arahan lengkap membuat template blog (Home page) dengan Bootstrap, berikut yang terpenting ialah klarifikasi 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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> 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/AVvXsEgUq99xd5_Y9U3D1zVW9ozcjRkHj9AaIkNQmqo4rLLwwFGAfngEAVT9mMa8iiyNoMdnlsopiQRDGo-wG-qGWok57DU7ykODN4iaNWQp53k33DhgXqekzE_wbZT8izyEyNk8CyIEQ3kEGLoQ/s1600/belajar_crud.png" alt=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"></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/AVvXsEiaMfsPWxICdoPm9eMMFmXw27EjZlxDEZWK3QSnyz8Mtv-h5_TrKISz4G597bcjAoMz9Us0moDX4TphlL5ES_6EKYXNs5XZ9l4tmDtANjPwON0WzshrvybYrUuCEKLlwH6gUbIuz44s8lE/s1600/oop.jpg" alt=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"></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/AVvXsEib_vMBczcv2BrAqc2Ew2YHf2s8FDrYrSm30Va8vqvZUW4mwjKMgAQZfoOZI2qMPZ8en5n50rYe5eLYxRUs7gSF1rxdEluG050m15Ib4CMGrJKgTp0e0h44-3KsWx37bDaGPjwLL9RW_uE/s1600/session-login.jpg" alt=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"></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/AVvXsEhDcDYyUkj4MES8rR1Vug9p_7TF9vs0O1v9pdZ8slSqrjCRamcB3garm-l-eqJv5OsuvF5A70__QM5EvMCziltO7h6EYcF0rY56Z_y8uUgs98XX7iYbvvGfGRkxfW2w-_c_SeDQv-ve0L6o/s1600/website-dinamis.png" class="mx-auto d-block" alt=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"></a> <h2><div class="hp-judul-post text-capitalize"><a href="http://senikoding.com">Tes : Belajar bahasa pemrogramman ()</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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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/AVvXsEhDcDYyUkj4MES8rR1Vug9p_7TF9vs0O1v9pdZ8slSqrjCRamcB3garm-l-eqJv5OsuvF5A70__QM5EvMCziltO7h6EYcF0rY56Z_y8uUgs98XX7iYbvvGfGRkxfW2w-_c_SeDQv-ve0L6o/s1600/website-dinamis.png" class="mx-auto d-block" alt=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"></a> <h2><div class="hp-judul-post text-capitalize"><a href="http://senikoding.com">Tes : Belajar bahasa pemrogramman ()</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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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/AVvXsEhDcDYyUkj4MES8rR1Vug9p_7TF9vs0O1v9pdZ8slSqrjCRamcB3garm-l-eqJv5OsuvF5A70__QM5EvMCziltO7h6EYcF0rY56Z_y8uUgs98XX7iYbvvGfGRkxfW2w-_c_SeDQv-ve0L6o/s1600/website-dinamis.png" class="mx-auto d-block" alt=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"></a> <h2><div class="hp-judul-post text-capitalize"><a href="http://senikoding.com">Tes : Belajar bahasa pemrogramman ()</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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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=" tema suatu website atau blog dibentuk sedemikian menarik biar pengunjung situs merasa nyama Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP"> <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"></a> 2018</center></span> <center><a href="#">^ Back Top</a></center> </footer> </div> </body> </html>
Setelah menciptakan script diatas langkah selanjutnya menciptakan file CSS pemanis yang dibutuhkan diatas yang sudah dipanggil didalam arahan 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> bab ini ialah arahan untuk mendeskriksikan bahwa script ini sudah mendukung type HTML 5, yang memang sudah masuk di eranya.
- <Head> ... </head> merupakan bab 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 mirip CSS, JavaScript untuk keperluan pendukung dari pada template blog. Lihat pada bab <head> tersebut banyak link file dari Bootstrap yang dipanggil untuk keperluan desain blog.
- <body> ... </body> Pada bab 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 sanggup juga container yang sering digukanan pada template-template yaitu untuk menciptakan "tag" dari bab keseluruhan halaman, letaknya persis dibawah tag <body>. Maksud dari tag wrapper ini ialah untuk memudahkan didalam meningkatkan secara optimal / perubahan desain pada bab tag tersebut kalau diperlukan.
2. <nav> / navbar / navigasi / menu
Pada bab ini sajian navigasi digunakan. Menu ini digunakan untuk akomodasi didalam pencarian suatu halaman. Lihat gambar dibawah ini tampilan sajian dengan Desktop dan Ponsel.
 |
| Menu navigasi (Desktop) |
 |
| Menu navigasi (Mobile / Ponsel) |
3. <div class="carousel slide"> / Slide
Pada bab ini digunakan untuk menciptakan "slide". Tampilan ini akan menciptakan template blog menjadi lebih profesional dan kreatif. Dengan memanfaatkan sebilah bidang sanggup menampilkan bebarapa gambar / post dengan cara slide tersebut. Untuk kode-kode class yang diterapkan semua lebih banyak memakai class Bootstrap, sedikit sata pemanis didalam template ini untuk penambahan CSS nya. Contoh arahan 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 sahabat SeniKoding ingin memaksimalkan atau merubah tampilannya sanggup mengunjungi situs resminya yaitu www.getbootstrap.com.
4. <div id="hp-post"> / Homepage Post / Grid
Bagian Homepage template ini dibentuk dengan model Grid. Pada halaman homepage akan terlihat rapi dan yummy dilihat saat post-post tampil dengan grid. Gaya kotak-kotak tersusun rapi dengan tampilan gambar post, judul dan author. Berikut ini settingan cara menciptakan template blog model grid dengan Bootstrap:
- <div class="row justify-content-around m-1"> yang artinya "row" ialah menciptakan baris yang rapi dan responsive, "justify-content-around" yang artinya content dari kolom rata kanan dan kiri, "m-1' artinya menunjukkan jarak dengan margin = '1'.
- <div class="hp-grid-post col-md border border-secondary m-2"> yang artinya "col-md" ialah menciptakan grid colum dengan size medium (col-md) serta diberikan sentuhan border-secondary, "m-2" ialah margin = '2'.
- <div class="hp-judul-post text-capitalize"> yang artinya dari "text-capitalize" ialah menciptakan abjad 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 menunjukkan pemanis "icon" model user dengan fontawesome.
5. <div id="page"> / Pagination
 |
| Page / pagination |
6. <footer>
Bagian ini menunjukkan perintah pada area bab footer / kaki halaman template. Bagian "<footer class="bg-dark">" ialah menunjukkan background ber warna dark, dan bab "<span class="text-light">" menunjukkan warna teks dengan light (menyerupai putih).
Membuat Template Blog (Home Page) Profesional Menggunakan BOOTSTRAP sanggup sahabat kembangkan lagi sesuai selera dan lebih cantik 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 -