Template blog atau Template website itu adalah desain-desain halaman blog ataupun halaman website beserta seluruh komponennya baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Template bisa juga kita artikan sebagai tema blog atau tampilan blog. Seperti yang kita lihat saat ini di blog belajar blog dan seo, bahwa terlihat tatanan gambar atau tampilan serta tulisan di layar monitor anda, itulah yang dinamakan template.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<!-- membuat menu navigasi -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="http://amirulmuttaqin24.blogspot.co.id">Blogger</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Profil <span class="sr-only">(current)</span></a></li>
<li><a href="#">Menu</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">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="#">Javascript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">CodeIgniter</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#modal-login">Login</a></li>
<li><button type="button" class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#modal-daftar">Daftar</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Modal -->
<div class="modal fade" id="modal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-daftar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Daftar</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary">Daftar</button>
</div>
</div>
</div>
</div>
<!-- akhir modal -->
<!-- akhir menu navigasi -->
<div class="container">
<!-- membuat jumbotron -->
<div class="jumbotron">
<center>
<h2>Tampilan templete sederhana dengan bootstrap</h2>
<p>klik tombol di bawah maka akan langsung menuju blog </p><br/><br/>
<p><a class="btn btn-primary btn-lg" href="http://amirulmuttaqin24.blogspot.co.id/" role="button">Visite Blog</a></p>
</center>
</div>
<!-- akhir jumbotron -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="html.png" alt="..." style="width: 50%; height: 50%;">
<div class="caption">
<h3>Tutorial HTML</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</p>
<p><a href="http://amirulmuttaqin24.blogspot.co.id/" class="btn btn-primary" role="button">Lihat</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="css.png" alt="..." style="width: 50%; height: 50%;">
<div class="caption">
<h3>Tutorial 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</p>
<p><a href="http://amirulmuttaqin24.blogspot.co.id/" class="btn btn-primary" role="button">Lihat</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="bss.png" alt="..." style="width: 50%; height: 50%;">
<div class="caption">
<h3>Tutorial Bootstrap</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</p>
<p><a href="http://amirulmuttaqin24.blogspot.co.id/" class="btn btn-primary" role="button">Lihat</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="php.png" alt="..." style="width: 50%; height: 50%;">
<div class="caption">
<h3>Tutorial PHP</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</p>
<p><a href="http://amirulmuttaqin24.blogspot.co.id/" class="btn btn-primary" role="button">Lihat</a></p>
</div>
</div>
</div>
</div>
<br/>
<div class="clearfix"></div>
<nav class="navbar navbar-default" style="bottom: 0;margin: 0">
<div class="container">
<center>
<ul class="nav navbar-nav">
<li><a href="#">Copyright @ 2017 Amirul Muttaqin. All rights reserved.</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Develop Amirul Muttaqin</a></li>
</ul>
</center>
</div>
</nav>
</body>
</html>
Di bawah ini adalah hasil dari script di atas
jika kita beralih ka mode handphone maka otomatis tampilannya akan seprti di bawah ini
jika kita klik daftar maka akan tampil percakapan yang menggunakan modal
Di bawah ini adalah Contoh halaman single
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<!-- membuat menu navigasi -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="amirulmuttaqin24.blogspot.co.id/">Blogger</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Profil <span class="sr-only">(current)</span></a></li>
<li><a href="#">Menu</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">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="#">Javascript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">CodeIgniter</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#modal-login">Login</a></li>
<li><button type="button" class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#modal-daftar">Daftar</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Modal -->
<div class="modal fade" id="modal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-daftar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Daftar</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary">Daftar</button>
</div>
</div>
</div>
</div>
<!-- akhir modal -->
<!-- akhir menu navigasi -->
<div class="col-md-12" style="padding: 0">
<h2 style="margin-top: 0">Tutorial Membuat Template Sederhana Dengan Bootstrap</h2>
<br/>
<div class="thumbnail">
<img src="bss.png">
</div>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
lorem
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
lorem
</p>
<table class="table table-bordered table-hover">
<tr>
<th class="col-md-1">No</th>
<th>Nama</th>
<th>Alamat</th>
<th class="col-md-1">Usia</th>
</tr>
<tr>
<td>1</td>
<td>Diki Alfarabi Hadi</td>
<td>Aceh</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>Diki Alfarabi Hadi</td>
<td>Aceh</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>Diki Alfarabi Hadi</td>
<td>Aceh</td>
<td>23</td>
</tr>
</table>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
lorem
</p>
<br/>
<h3>Related Posts</h3><br/>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="html.png" alt="..." style="width: 50%; height: 50%; ">
<div class="caption">
<h3><a href="#">Tutorial html</a></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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="css.png" alt="..." style="width: 50%; height: 50%;">
<div class="caption">
<h3><a href="#">Tutorial css</a></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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="php.png" alt="..." style="width: 50%; height: 50%">
<div class="caption">
<h3><a href="#">Tutorial php</a></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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>
<br/>
<div class="clearfix"></div>
<nav class="navbar navbar-default" style="bottom: 0;margin: 0">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#">Copyright @ 2017 Amirul Muttaqin. All rights reserved.</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Develop by Amirul Muttaqin</a></li>
</ul>
</div>
</nav>
</body>
</html>
Dan di bawah ini adalah hasil dari script di atas
Referensi : malasngoding.com
Tidak ada komentar :
Posting Komentar