[SHARE] Tutorial Membuat Template Website Responsive dengan Bootstrap 3

Beranda

...

Programmer Forum
[SHARE] Tutorial Membuat Template Website Responsive dengan Bootstrap 3

aplikasiphp

12-07-2014 08:35

[SHARE] Tutorial Membuat Template Website Responsive dengan Bootstrap 3

Newbie izin share tulisan pribadi mengenai cara membuat template Blog Responsive dengan Bootstrap 3.2. Artikel ini sudah saya posting di blog saya beberapa jam yang lalu.. Artikel ini dipandu dengan rinci dan disertai file download hasil akhirnya.

Sumber aslinya : Tutorial Membuat Template Blog Responsive dengan Bootstrap 3

Quote:

Bootstrap adalah sebuah Framework atau Tools untuk membuat template Website yang responsive secara cepat, mudah dan gratis. Bootstrap terdiri dari file CSS, jQuery dan HTML untuk menghasilkan template website yang sangat cantik dan dilengkapi dengan plugin jQuery yang siap pakai. Sehingga kita hanya memerlukan sedikit kode programming saja untuk menghasilkan sebuah tampilan website yang sangat cantik dan responsive. Plugin jQuery yang sudah terinstall dalam Bootstrap ini antara lain adalah User Interface DropDown Menu, Scrollspy, Tooltip, Alert, Button dan lainnya.

Kelebihan lainnya dari Bootstrap adalah sudah di dukung oleh hampir semua Browser modern seperti Modzilla Firefox, Safari, Opera dan Internet Exploler (IE 9 keatas). Bahkan browser versi mobile yang ada di Smart Phone juga sudah mendukung Bootstrap. Tampilan website di desktop (computer) akan terlihat cantik, demikian juga kalau websitenya di buka dengan Smart Phone yang layarnya kecil sekalipun websitenya akan tetap terlihat cantik. Mantap bukan?

Nah karena kelebihannya itu juga kita akan membuat sebuah tutorial membuat sebuah template website yang keren dan responsive memanfaatkan semua keunggulan dari Bootstrap ini. Adapaun template yang akan kita buat kali ini adalah template Blog yang sama persis dengan template Blog yang saya gunakan dalam blog AplikasiPHP.com ini.

File hasil akhir tutorial ini dapat di download di link pada bagian akhir artikel ini.

Langkah Pertama : Design Layout

Layout design yang akan kita buat terdiri dari beberapa element, yaitu Container yang merupakan element layout induk, dimana element lainnya akan masuk kedalamnya. Didalam Container ini nantinya aka nada beberapa element layout lainnya yaitu Header, Slider News, Artikel Populer, Main Content, Menu Kanan dan Footer. Untuk lebih jelasnya silahkan lihat gambar di bawah :

Langkah Kedua : Download Bootstrap 3

Langkah selanjutnya adalah mewujudkan design Layout tersebut kedalam kode-kode. Pertama sekali kita download dahulu File Bootstrap versi 3 dari link berikut. Setelah file Bootstrap versi 3.2.0 di download, extrak file bootstrap tersebut kedalam folder localhost anda. Lalu rubah nama foldernya sesuai selera anda. Saya menamakan folder saya “bootstrap_template” dan saya simpan di localhost saya. Perhatikan gambar di bawah ini :

File Bootstrap terdiri dari 3 folder yaitu CSS, Fonts dan Js (berisi file jQuery). Ketiga folder ini berisi file-file css, fonts dan jQuery yang sudah dibuat sedemikian rupa oleh Bootstrap sehingga kita tidak perlu memikirkan bagaimana membuat file CSS untuk mengatur tampilan dan bagaimana mengatur jQuery agar tampilannya responsive. Semua sudah dikerjakan oleh Bootstrap untuk kita.

Selain file bawaan Bootstrap, saya sudah menambahkan beberapa plugin jQuery dan CSS tambahan yang diperlukan untuk mempercantik tampilan templatenya.

Langkah Ketiga : Buat File Index.html sebagai Template Utama

Buat file baru bernama index.html yang akan kita gunakan sebagai template website kita nantinya.

Kodenya adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Template Bootstrap 3.2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/costum/costum.css" rel="stylesheet" media="screen">
<link href="css/costum/bootstrap-slider.min.css" rel="stylesheet" media="screen">
<link href="css/costum/flexslider.css" rel="stylesheet" media="screen">
<link href="css/costum/site.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<header>
Header disini
</header>
<aside>
<div class="row">
<div class="col-md-8">
Slide News
<div>
<div class="col-md-4">
Populer Artikel
<div>

<div class="row">
<div class="col-md-8">
Main Content
</div>
<div class="col-md-4">
Menu Kanan
</div>
</div>
</aside>
<footer>
Footer disini
</footer>


[removed][removed]
[removed][removed]
[removed]
$(window).load(function(){
$('.flexslider').flexslider({
animation : "slide",
controlNav : false,
start : function(slider){
$('body').removeClass('loading');
}
});
});
[removed]
[removed]
$(function () {
$(".demo1").bootstrapNews({
newsPerPage: 3,
autoplay: true,
pauseOnHover:true,
direction: 'up',
newsTickerInterval: 4000,
onToDo: function () {
}
});
});
[removed]
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]
</body>
</html>

Langkah Keempat : Merombak Design Header pada file Index.html

Langkah berikut ini adalah pelengkap dari langkah ketiga diatas, dimana kita akan melengkapi element-element dalam template Index.html diatas. Element yang akan kita lengkapi adalah element Header, dimana didalamnya akan ada nama Website, menu utama dan kolom pencarian (search). Adapun kode element Header menjadi :

<header>
<div class="row">
<div class="col-md-12">
<h1>NamaWebsite.com</h1>
<h5><em class="text-muted">Slogan Website di sini!</em></h5>
<div class="col-md-8">
<div class="nav-container">
<ul class="nav nav-pills">
<li class="active"><a >Home</a></li>
<li><a >Archive</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">RSS Feeder</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<form class="navbar-form navbar-left" method='post' action="">
<div class="form-group">
<input type="text" name='key' class="form-control" placeholder="Search">
</div>
<input type="submit" name='search' value='GO' class="btn btn-default">
</form>
</div>
</div>
</div>
</header>

Hasilnya akan terlihat seperti gambar di bawah ini :

Langkah Kelima : Merombak Design News Slider dan Popular Artikel pada file Index.html

Langkah selanjutnya adalah merombak file Index.html pada bagian News Slider dan Most Popular Artikel. News Slider akan berisi gambar dan informasi yang akan bergerak horizontal secara otomatis (slide) dalam interval waktu tertentu. Sedangkan Most Popular Artikel akan berisi link menuju artikel paling pouler, dimana artikel-artikel tersebut akan ditampilkan secara slide vertical.

Kode untuk menu News Slider dan Most Populer Artikel ini adalah sebagai berikut :

<div class="row">
<div class="col-md-8">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="images_try/kitchen_adventurer_cheesecake_brownie.jpg" /></li>
<li><img src="images_try/kitchen_adventurer_cheesecake_ lemon.jpg" /></li>
<li><img src="images_try/kitchen_adventurer_cheesecake_ donut.jpg" /></li>
<li><img src="images_try/kitchen_adventurer_cheesecake_ caramel.jpg" /></li>
</ul>
</div>
</section>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon"></span><b>Most Popular Article</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">

<ul class="demo1">
<li class="news-item"><table cellpadding="4"> <tr><td><img src="icon/f16.jpg" width="60" class="img-kecil" /></td>
<td><a href=''>Judul Artikel Populer 1</a> </td></tr> </table>
</li>
<li class="news-item"><table cellpadding="4"> <tr><td><img src="icon/sukhoi.jpg" width="60" class="img-kecil" /></td>
<td><a href=''>Judul Artikel Populer 2</a> </td></tr> </table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>
</div>

Hasilnya adalah seperti gambar di bawah ini :

Gambar pada Slider News akan selalu berganti dengan pergerakan secara horizontal dalam interval waktu tertentu secara otomatis. Most Populer Article juga akan bergantian tampil dimana pergantian artikel akan diatur secara vertical dengan interval waktu tertentu juga.

Langkah Keenam : Merombak Design Main Content pada file Index.html

Main Content ini akan berisi content utama dari template yang kita buat, dimana akan berisi artikel artikel yang akan tampil dalam blog kita. Kodenya adalah sebagai berikut :

<div class="col-md-8">
<h5><a href="">Judul 1</a></h5><hr>
<p><em>08 Nov 2012 13:43:03 | by Admin | 2187 views </em></p>
<p>
Sudah banyak perubahan yang saya lakukan didalam Aplikasi ini, salah satunya adalah <i>Facebook Connect</i> yang memungkinkan adanya interaksi antara admin dengan pengunjung memalui
<i>Account Facebook</i> mereka.<a href="">Baca selengkapnya...</a> <br/><br/>
</p>
<h5><a href="">Judul 2</a></h5><hr>
<p><em>06 Nov 2012 10:12:40 | by Admin | 2478 views </em></p>
<p>
Pada artikel tersebut, saya menunjukkan cara pembuatan RSS Feed kepada setiap pembaca blog AplikasiPHP.com ini. Dengan tutorial tersebut RSS Feed dari blog AplikasiPHP.com imi bisa ditampilkan dalam blog lain.<a href="">Baca selengkapnya...</a><br />
</p>
</div>

Hasilnya akan terlihat seperti gambar di bawah ini :

Langkah Ketujuh : Merombak Design Menu Kanan pada file Index.html

Menu kanan akan berisi dua menu yaitu Last Comment dan Archiev Artikel. Last Comment akan berisi link komentar-komentar yang terbaru dalam blog kita, sedangkan Archive Artikel akan berisi arsip artikel dalam blog kita dalam kategori bulan. Kodenya adalah sebagai berikut :


<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon"></span><b>Last Comment</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo2">
<li class='news-item'><a class='name' href=''>Noer</a> on <a href=''>Judul 1</a></li>
<li class='news-item'><a class='name' href=''>Andi</a> on <a href=''>Judul 2</a></li>
<li class='news-item'><a class='name' href=''>Wanto</a> on <a href=''>Judul 3</a></li>
<li class='news-item'><a class='name' href=''>Apri</a> on <a href=''>Judul 4</a></li>
<li class='news-item'><a class='name' href=''>Neli</a> on <a href=''>Judul 5</a></li>
</ul>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>

<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon"></span><b>Article Archive</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<a href="">June 2014 (5 )</a><br><a href="">May 2014 (5 )</a><br>
<a href="">April 2014 (5 )</a><br><a href="">March 2014 (5 )</a><br>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>

Hasilnya adalah sebagai berikut :

Langkah Kedelapan : Merombak Design Footer pada file Index.html

Langkah selanjutnya adalah merubah design Footer yang akan berfungsi sebagai footer template blog kita. Kodenya adalah sebagai berikut :

<div class="row">
<div class="col-md-12">
<center>NamaBlog.com powered by LunkCMS v2.0<br>
<b>Copyright © 2011 - NamaBlog.com, All Rights Reserved</b></center>
</div>
</div>

Hasilnya adalah sebagai berikut :

Download Hasil Akhir File Tutorial

Hasil akhir dari tutorial ini sudah saya sediakan di blog ini dan sudah bisa di download untuk dikembangkan lagi sesuai dengan kebutuhan pembaca masing-masing. Untuk Download filenya bisa klik link berikut. Hasil akhir tutorial akan terlihat seperti gambar di bawah ini :

Semoga Bermanfaat….

Maaf masih belajar posting, postingannya masih berantakan gan.. tapi akan saya rapikan sambil belajar posting di Kaskus ini..

Semoga bermanfaat agan-agan.. saran dan kritiknya di tunggu ya gan..

Sumber aslinya : Tutorial Membuat Template Blog Responsive dengan Bootstrap 3

nona212 memberi reputasi

5.1K

Kutip

Balasan

Guest

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru

Mari bergabung, dapatkan informasi dan teman baru!

Programmer Forum

20.2KThread•4.2KAnggota

Terlama

Guest

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru