#Bootstrap - #Web Design

Membuat Template Blog Sederhana Dengan Bootstrap

Membuat Template Blog Sederhana Dengan Bootstrap – Template website adalah salah satu yang terpenting. template mencerminkan mutu atau kualitas dari blog itu sendiri. karena saat user mengunjungi sebuah website atau blog maka yang pertama kali di lihat adalah tampilan dari website tersebut. bagaimana jika website tersebut memiliki tampilan yang kurang menarik? dan tentu akan menjadi nilai lebih jika tampilan template website tersebut sangat bagus. apalagi responsive, tetap rapi jika di buka dari segala platform.

Tentu dari permasalah di responsive di atas, bootstrap telah lama menjadi solusi nya. dengan menggunakan bootstrap kita tidak perlu lagi mengurusi keresponsive-an template website kita. kita tinggal menggunakan fitur grid yang sudah tersedia pada bootstrap. untuk tutorial grid system sendiri telah kita bahas pada tutorial bootstrap sebelumnya di www.malasngoding.com. (baca : tutorial grid system bootstrap).

Sebenarnya artikel Membuat Template Blog Sederhana Dengan Bootstrap ini merupakan tutorial lanjutan dari tutorial-tutorial dasar bootstrap yang telah di bahas di www.malasngoding.com. jadi kita akan mencoba menggabungkan setiap element komponen bootstrap yang telah kita pelajari cara pembuatan nya dengan bootstrap, menjadi sebuah template website sederhana. dan renponsive tentunya.

Adapun tutorial bootstrap lainnya yang berhubungan dengan tutorial membuat template website dengan bootstrap ini adalah :

Dalam penjelasan tutorial ini tidak lagi di jelaskan secara mendetail tentang component bootstrap seperti pada poin atas. teman-teman dapat mempelajari nya sendiri di malasngoding.com.Membuat Template Blog Sederhana Dengan Bootstrap

Persiapan Membuat Template Blog Sederhana Dengan Bootstrap

Adapun beberapa persiapan yang harus di siapkan adalah:

Bootstrap. download di sini.
Beberapa file gambar(untuk cover posting).

Membuat Template Website Sederhana Dengan Bootstrap

Setelah teman-teman download bootstrap dan menyediakan beberapa file gambar. letakkan di dalam satu directory. seperti gambar di bawah.

membuat template blog sederhana dengan bootstrap

Dan isi folder gambar nya, saya menyediakan beberapa file gambar.

membuat template website

Langsung saja kita mulai membuat template website sendiri sederhana dengan bootstrap. di sini kita akan membuat halaman depan(index) dan halaman single post(single).

index.html

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

<!DOCTYPE html>

<html>

<head>

<title>Membuat Menu Responsive Dengan CSS Dan JQuery | www.malasngoding.com</title>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="https://www.malasngoding.com">Malas Ngoding</a>

</div>

<li><a href="#">Profil <span class="sr-only">(current)</span></a></li>

<li><a href="#">Portofolio</a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tutorial <span class="caret"></span></a>

<li><a href="#">Javascript</a></li>

<li><a href="#">JQuery</a></li>

<li><a href="#">CodeIgniter</a></li>

</ul>

</li>

</ul>

<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>

</div>

</nav>

<h4 class="modal-title" id="myModalLabel">Modal Login</h4>

</div>

<form>

<label>Email</label>

</div>

<label>Password</label>

</div>

</form>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>

<button type="button" class="btn btn-primary">Login</button>

</div>

<h4 class="modal-title" id="myModalLabel">Modal Daftar</h4>

</div>

<form>

</div>

<label>Email</label>

</div>

<label>Password</label>

</div>

</form>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>

<button type="button" class="btn btn-primary">Daftar</button>

</div>

<h2>Selamat datang di www.malasngoding.com!</h2>

<p>Tutorial pemrograman bahasa indonesia terlengkap di muka bumi..</p><br/><br/>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Mulai Belajar !</a></p>

</center>

</div>

<h3>Tutorial JQuery</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="https://www.malasngoding.com/" class="btn btn-primary" role="button">Lihat</a></p>

</div>

<h3>Tutorial Ionic</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="https://www.malasngoding.com/" class="btn btn-primary" role="button">Lihat</a></p>

</div>

<h3>Tutorial CodeIgniter</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="https://www.malasngoding.com/" class="btn btn-primary" role="button">Lihat</a></p>

</div>

<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="https://www.malasngoding.com/" class="btn btn-primary" role="button">Lihat</a></p>

</div>

<br/>

</ul>

<li><a href="#">Develop by www.malasngoding.com</a></li>

</ul>

</center>

</div>

</nav>

</body>

</html>

jalankan pada browser. dan hasilnya.

membuat template sederhana dengan bootstrap

Dan tampilan responsive nya jika di buka dari ukuran layar smartphone. Membuat Template Blog Sederhana Dengan Bootstrap.

membuat template dengan bootstrap

klik pada login atau daftar. di sini kita menggunakan modal.

membuat modal login dengan bootstrap

Membuat halaman single

single.html

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

<!DOCTYPE html>

<html>

<head>

<title>Membuat Menu Responsive Dengan CSS Dan JQuery | www.malasngoding.com</title>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="https://www.malasngoding.com">Malas Ngoding</a>

</div>

<li><a href="#">Profil <span class="sr-only">(current)</span></a></li>

<li><a href="#">Portofolio</a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tutorial <span class="caret"></span></a>

<li><a href="#">Javascript</a></li>

<li><a href="#">JQuery</a></li>

<li><a href="#">CodeIgniter</a></li>

</ul>

</li>

</ul>

<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>

</div>

</nav>

<h4 class="modal-title" id="myModalLabel">Modal Login</h4>

</div>

<form>

<label>Email</label>

</div>

<label>Password</label>

</div>

</form>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>

<button type="button" class="btn btn-primary">Login</button>

</div>

<h4 class="modal-title" id="myModalLabel">Modal Daftar</h4>

</div>

<form>

</div>

<label>Email</label>

</div>

<label>Password</label>

</div>

</form>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>

<button type="button" class="btn btn-primary">Daftar</button>

</div>

<li><a href="#">Tutorial</a></li>

<li class="active">Tutorial Bootstrap : Membuat Template Sederhana Dengan Bootstrap</li>

</ol>

</div>

<h2 style="margin-top: 0">Tutorial Membuat Template Sederhana Dengan Bootstrap</h2>

<br/>

</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>

<tr>

<th>Alamat</th>

</tr>

<tr>

<td>Diki Alfarabi Hadi</td>

</tr>

<tr>

<td>Diki Alfarabi Hadi</td>

</tr>

<tr>

<td>Diki Alfarabi Hadi</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/>

<h3><a href="#">Tutorial CodeIgniter</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

<h3><a href="#">Tutorial Bootstrap</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua.s</p>

</div>

<h3><a href="#">Tutorial CodeIgniter</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

<br/>

</ul>

<li><a href="#">Develop by www.malasngoding.com</a></li>

</ul>

</div>

</nav>

</body>

</html>

dan jalankan pada browser. Membuat Template Blog Sederhana Dengan Bootstrap.

membuat template responsive dengan bootstrap

Template telah jadi. mungkin sekian saja tutorial kali ini tentang cara membuat template sederhana sendiri dengan bootstrap. semoga dapat bermanfaat. terima kasih sudah berkunjung.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tags: bootstrap template, cara membuat template blog, cara membuat template website, contoh template bootstrap, download template bootstrap sederhana, membuat template blog sendiri, membuat template wordpress, responsive bootstrap, template blog, template bootstrap sederhana, template responsive, template website

Marcelino Musung • 6 years ago

mas diki, minta juga dong file gambar2nya

Rohman • 6 years ago

Test

Sandi • 6 years ago

Bang ada tutorial khusus bootstrap sampe mahir?

vanya • 5 years ago

template buat perusahaan dong?

IntanIS • 5 years ago

mas udah pernah buat tampilan untuk web profile penjualan terutama di bagian produk. tampilannya itu di buat kotak kotak seperti tampilan awal waktu misal kita buka tokopedia / bukalapak gitu, kalo udah pernah buat bikin tutorialnya dong mas 🙂

Whatsapp	0896-0676-7404
Email	malasngoding@gmail.com

Membuat Template Blog Sederhana Dengan Bootstrap