Free Template Bootsrap ilmuweb V.0.1
Bootsrap adalah framework CSS yang dibuat khusus untuk front-end website, dan yang paling populer digunakan, sehingga developer dapat mempermudah dan cepat didalam membuat tampilan halaman depan atau front-end web, karena kita tinggal menambah class, grid, navigasi dan lainya.
Kali ini saya akan shering gratis template bootsrap ilmuweb V.0.1, yang saya buat dengan Bootsrap, karena rilis baru pertama jadi saya menggunakan kode versi 0.1 tak menutup kemungkinan saya akan shering template bootsrap lainya pada versi lanjutanya, ok langsung saja untuk konsep template ini adalah memiliki header, dengan navigasi, kemudian bagian tengah terdapat caroucel, teks berjalan tampilanya templatenya seperti berikut :
Bagian konten isi artikel saya bagi dua bagian yakni bagian konten dan kategori pada sidebar, dan kelebihan lainya dengan bootsrap ini tampilan webnya sudah responsif karena ukuran layar akan menyesuaikan perangkat yang kita gunakan.
Pada template ini saya menggunakan bootsrap versi 3.3.7 anda dapat mendownloadnya disini setelah selesai download selanjutnya buat dua file pertama saya menggunakan ilmuweb.php dan kedua style.css kode template sebagai berikut:
ilmuweb.php
<!DOCTYPE html>
<html>
<head>
<title>Free Bootstrap Template ilmuweb.net</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<!-- Header -->
<div class="col-md-12 col-xs-12">
<img src="img/headerilmuweb.jpg" class="img-responsive" >
</div>
<!-- Navbar -->
<div class="col-md-12 col-xs-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="https://www.silmuweb.net">Ilmuweb.NET</a>-->
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="https://www.ilmuweb.net">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Kontak</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorial
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
</div>
<!-- Slide Show -->
<div class="col-md-12 col-xs-12">
<!-- Slide Show 1 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- deklarasi carousel -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/slider1.jpg" alt="www.ilmuweb.net">
<div class="carousel-caption">
<h3>http://ilmuweb.net</h3>
<p>Selamat Datang di Website Ilmuweb.net</p>
</div>
</div>
<div class="item">
<img src="img/slider2.jpg" alt="www.ilmuweb.net">
<div class="carousel-caption">
<h3>Ilmuweb memberikan berbagai tutorial seputar web programing</h3>
<p>PHP, CSS, HTML, Mysql</p>
</div>
</div>
<div class="item">
<img src="img/slider3.jpg" alt="www.ilmuweb.net">
<div class="carousel-caption">
<h3>Tutorial PHP</h3>
<p>Berisi Tutorial tentang PHP mulai dari pemula</p>
</div>
</div>
</div>
<!-- membuat panah next dan previous -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Teks Berjalan -->
<div class="col-md-12 col-xs-12 teksberjalan">
<font color="#F8F8FF" ><b><marquee>Selamat Datang di Website Ilmuweb.net</marquee><b></font>
</div>
<!-- layanan -->
<div class="col-md-12 col-xs-12 layanan">
Layanan : <br>
<center> <img src="img/berita.jpg" class="img-circle" alt="" width="150" height="150" style="float:center;">
</div>
<!-- Konten -->
<div class="col-md-7 col-xs-12 konten">
<br>
<img src="img/berita.jpg" class="img-thumbnail" alt="" width="200" height="236" style="margin: 15px;" align="left" >
<h3> Tutorial PHP bagian 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr>
<img src="img/berita.jpg" class="img-thumbnail" alt="" width="200" height="236" style="margin: 15px;" align="left" >
<h3> Tutorial CSS Memahami Property Pada CSS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr>
<img src="img/berita.jpg" class="img-thumbnail" alt="" width="200" height="236" style="margin: 15px;" align="left" >
<h3> Membuat Navigasi dengan Bootsrap</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<!-- Sidebar -->
<div class="col-md-5 col-xs-12 sidebar">
<h3>Kategori</h3>
<ul>
<li>Tutorial PHP</li>
<li>Tutorial Mysql</li>
<li>Belajar CSS</li>
</ul>
<h3>Popular Post</h3>
<ul>
<li>Kontrol Perulangan PHP</li>
<li>Membuat sistem CRUD dengan PHP</li>
<li>Membuat web responsiv dengan CSS</li>
<li>Pengenalan Bootsrap</li>
<li>Tutorial Bootsrap Sistem Grid</li>
<li>Tutorial Form dengan Bootsrap</li>
</ul>
<h3>Tulisan Terbaru</h3>
<ul>
<li>Kontrol Perulangan PHP</li>
<li>Membuat sistem CRUD dengan PHP</li>
<li>Membuat web responsiv dengan CSS</li>
<li>Pengenalan Bootsrap</li>
<li>Tutorial Bootsrap Sistem Grid</li>
<li>Tutorial Form dengan Bootsrap</li>
<li>Pengenalan Bootsrap</li>
<li>Tutorial Bootsrap Sistem Grid</li>
<li>Tutorial Form dengan Bootsrap</li>
</ul>
</div>
<!-- Galeri -->
<div class="col-md-12 col-xs-12 galeri">
Galeri
</div>
<!-- Banner -->
<div class="col-md-12 col-xs-12 baner">
Baner
</div>
<!-- layanan publik -->
<div class="col-md-12 col-xs-12 aplikasi">
Aplikasi
</div>
<!-- Footer -->
<div class="col-md-12 col-xs-12 footer">
<font color="#ffffff" >© 2018 www.ilmuweb.net. All right reserved. </font>
</div>
</div>
</div>
<!-- Bootstrap js dan semua plugins diletakkkan dibawahnya -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Untuk file CSS kode CSS sebagai berikut
style.css
body{
background: #DCDCDC;
}
.konten{
height: 800px;
background: #ffffff;
}
.sidebar{
height: 800px;
background: #ffffff;
}
.teksberjalan{
height: 20px;
background: #008000;
}
.layanan{
height: 200px;
background: #F5DEB3;
}
.galeri {
height: 90px;
background: #EE82EE ;
}
.baner {
height: 150px;
background: #40E0D0 ;
}
.aplikasi {
height: 150px;
background: #9ACD32 ;
}
.footer{
height: 90px;
background: #000080;
}
Setelah selesai tinggal anda sesuaikan dengan kode PHP dan Query MYsql untuk konten agar website menjadi dinamis dengan menggunakan database.
Untuk lebih lengkapnya Download file template bootsrap Ilmuweb V.0.1
Semoga dapat bermanfaat, salam sukses penuh keberkahan
