Template Bootstrap Blog Sederhana Gratis!
Hai kali ini CalonDosen.com akan berbagi template Bootstrap Blog Sederhana Gratis!. Kalian tinggal mengedit sedikit sesuai selara. Dengan template ini diharapkan kalian lebih paham dengan struktur koding di Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Calon Dosen</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Home</a></li>
<li><a href="#section2">Teman</a></li>
<li><a href="#section3">Keluarga</a></li>
<li><a href="#section3">Galery</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9">
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>Pengalaman Hidup Kuliah</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Kyon, Sep 27, 2018.</h5>
<h5><span class="label label-danger">Hidup</span> <span class="label label-primary">Ipsum</span></h5><br>
<p>Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, </p>
<br><br>
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>Proposal Ditolak Dosen</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Kyon, Sep 24, 2018.</h5>
<h5><span class="label label-success">Lorem</span></h5><br>
<p>Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh, Ini cuma contoh,</p>
<hr>
<h4>Leave a Comment:</h4>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<br><br>
<p><span class="badge">2</span> Comments:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>Haruhi <small>Sep 29, 2015, 9:12 PM</small></h4>
<p>wkk kasian.</p>
<br>
</div>
<div class="col-sm-2 text-center">
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>Kyon <small>Sep 25, 2015, 8:25 PM</small></h4>
<p>hehe.</p>
<br>
<p><span class="badge">1</span> Comment:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-xs-10">
<h4>Linda <small>Sep 25, 2015, 8:28 PM</small></h4>
<p>Apaan sih.</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Hasil:
Silahkan dicopy-paste dan masukan ke code editor kesayanganmu.
Komentar
Posting Komentar