Cara menggunakan membuat web dengan bootstrap

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 :

• Membuat Menu Navigasi Dengan Bootstrap
• Membuat Jumbotron Dengan Bootstrap
• Membuat Breadcrumb Dengan Bootstrap
• Membuat thumbnail dengan bootstrap
• Pengenalan Grid System Bootstrap
• Membuat modal dialog dengan bootstrap
• Membuat Form Dengan Bootstrap
• Membuat tombol dengan bootstrap

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

Membuat Menu Responsive Dengan CSS Dan JQuery | www.malasngoding.com

Toggle navigation

Malas Ngoding

Profil [current]

Portofolio

Tutorial

HTML

CSS

Javascript

JQuery

CodeIgniter

Login

Daftar

×

Modal Login

Email

Password

Batal

Login

×

Modal Daftar

Nama

Email

Password

Batal

Daftar

Selamat datang di www.malasngoding.com!

Tutorial pemrograman bahasa indonesia terlengkap di muka bumi..

Mulai Belajar !

Tutorial JQuery

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

Lihat

Tutorial Ionic

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

Lihat

Tutorial CodeIgniter

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

Lihat

Tutorial Bootstrap

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

Lihat

Copyright @ 2015 Malas Ngoding. All rights reserved.

Develop by www.malasngoding.com

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

Membuat Menu Responsive Dengan CSS Dan JQuery | www.malasngoding.com

Toggle navigation

Malas Ngoding

Profil [current]

Portofolio

Tutorial

HTML

CSS

Javascript

JQuery

CodeIgniter

Login

Daftar

×

Modal Login

Email

Password

Batal

Login

×

Modal Daftar

Nama

Email

Password

Batal

Daftar

Home

Tutorial

Tutorial Bootstrap : Membuat Template Sederhana Dengan Bootstrap

Tutorial Membuat Template Sederhana Dengan Bootstrap

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

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

No

Nama

Alamat

Usia

1

Diki Alfarabi Hadi

Aceh

23

2

Diki Alfarabi Hadi

Aceh

23

3

Diki Alfarabi Hadi

Aceh

23

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

Related Posts

Tutorial CodeIgniter

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

tempor incididunt ut labore et dolore magna aliqua.

Tutorial Bootstrap

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

tempor incididunt ut labore et dolore magna aliqua.s

Tutorial CodeIgniter

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

tempor incididunt ut labore et dolore magna aliqua.

Copyright @ 2015 Malas Ngoding. All rights reserved.

Develop by www.malasngoding.com

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.

Incoming search terms:

• download template bootstrap sederhana
• malesngoding
• cara membuat template website dengan bootstrap
• cara membuat template
• bootstrap sederhana
• cara membuat template blogger dengan bootstrap
• membuat template bootstrap
• membuat blog dengan bootstrap
• malas
• Cara membuat template blog

• SHARE :

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.

• Author's profile
• All posts by Diki Alfarabi Hadi

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