Halo, selamat datang di Identips!, Artikel ini merupakan lanjutan dari artikel Cara Membuat Tema Blogger Sendiri Menggunakan Bootstrap . Pada artikel ini saya akan membahas cara mengatur layout halaman postingan pada blogger dengan Bootstrap 4.
Pada postingan sebelumnya yang berjudul Mengatur Tampilan Header Blogger Dengan Bootstrap kita telah mengatur layout artikel, namun masih ada komponen yang belum kita atur seperti kolom komentar dan lainnya. Oleh karena itu pada artikel ini kita akan menata ulang layout halaman postingan.
Saat mengatur tampilan layout halaman postingan kita akan fokus pada tag <article> </article> atau lebih tepatnya kita akan fokus pada Widget Blog Posting yang ada diantara tag <article> </article>
Mengatur layout postingan
Untuk menata postingan kita menggunakan Bootstrap Card Image Caps, sama seperti yang saya gunakan pada situs ini. Untuk dokumentasinya dapat kamu lihat di https://getbootstrap.com/docs/4.5/components/card/. Pada halaman dokumentasi Bootstrap kita ditunjukan kode untuk membuat sebuah Card Image Caps seperti berikut:
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
Sekarang mari kita terapkan pada markup XML Blogger dan hasilnya akan seperti ini:
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
| <article id='article-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>false</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>false</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post' />
</b:loop>
</b:includable>
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<div>
<!-- Post Start -->
<div class='card mb-3' itemprop='blogPost' itemscope='itemscope'
itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url' />
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId' />
<meta expr:content='data:post.id' itemprop='postId' />
<a expr:name='data:post.id' />
<b:if cond='data:post.firstImageUrl'>
<img class='card-img-top' expr:src='data:post.firstImageUrl'
expr:alt='data:post.title' />
</b:if>
<div class='card-body mb-0 pb-0'>
<b:if cond='data:post.title'>
<h2 class='card-title' itemprop='name'>
<data:post.title />
</h2>
</b:if>
<b:if cond='data:top.showTimestamp'>
<span class='card-text'>
<small class='text-muted'>
Oleh
<data:post.author /> • Di update pada
<data:post.timestamp />
</small>
</span>
</b:if>
<hr />
</div>
<div class='card-body pt-0 mt-0' expr:id='"post-body-" + data:post.id'
expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body />
</div>
<div class='card-footer'>
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span class='badge badge-success'>
<a class='text-white' expr:href='data:label.url' rel='tag'>
#
<data:label.name />
</a>
</span>
</b:loop>
</b:if>
</div>
</div>
</div>
<!-- Post End -->
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</article>
|
Selanjutnya adalah menambahkan navigasi untuk postingan lama dan postingan baru.
Menambahkan navigasi postingan
Navigasi postingan kita buat menggunakan Bootstrap flex, lihat dokumentasinya di https://getbootstrap.com/docs/4.5/utilities/flex/ dan Bootstrap Outline Buttons, lihat dokumentasinya di https://getbootstrap.com/docs/4.5/components/buttons/#outline-buttons. Jadi kode HTML yang saya gunakan untuk membuat navigasi postingan sebagai berikut:
<div class='d-flex justify-content-between mb-3'>
<a href="#">
<button type="button" class="btn btn-outline-primary"> Postingan baru </button>
</a>
<a href="#">
<button type="button" class="btn btn-outline-primary"> Postingan lama </button>
</a>
</div>
Jika diterapkan dalam markup XML Blogger maka hasilnya akan seperti ini:
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
| <article id='article-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>false</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>false</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post' />
</b:loop>
</b:includable>
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<div>
<!-- Post Start -->
<div class='card mb-3' itemprop='blogPost' itemscope='itemscope'
itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url' />
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId' />
<meta expr:content='data:post.id' itemprop='postId' />
<a expr:name='data:post.id' />
<b:if cond='data:post.firstImageUrl'>
<img class='card-img-top' expr:src='data:post.firstImageUrl'
expr:alt='data:post.title' />
</b:if>
<div class='card-body mb-0 pb-0'>
<b:if cond='data:post.title'>
<h2 class='card-title' itemprop='name'>
<data:post.title />
</h2>
</b:if>
<b:if cond='data:top.showTimestamp'>
<span class='card-text'>
<small class='text-muted'>
Oleh
<data:post.author /> • Di update pada
<data:post.timestamp />
</small>
</span>
</b:if>
<hr />
</div>
<div class='card-body pt-0 mt-0' expr:id='"post-body-" + data:post.id'
expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body />
</div>
<div class='card-footer'>
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span class='badge badge-success'>
<a class='text-white' expr:href='data:label.url' rel='tag'>
#
<data:label.name />
</a>
</span>
</b:loop>
</b:if>
</div>
</div>
</div>
<!-- Post End -->
<b:include name='nextprev' />
</div>
</b:if>
</b:includable>
<b:includable id='nextprev'>
<div class='d-flex justify-content-between mb-3'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
<button type="button" class="btn btn-outline-primary">
<data:newerPageTitle /></button>
</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
<button type="button" class="btn btn-outline-primary">
<data:olderPageTitle /></button>
</a>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</article>
|
Setelah menambahkan navigasi postingan, selanjutnya adalah menambahkan kolom komentar.
Menambahkan kolom komentar
Untuk menambahkan kolom komentar kamu hanya perlu memasukkan kode berikut:
<div class="card p-3 mb-3">
<b:include data='post' name='comment_picker' />
</div>
di bawah
<b:include name=‘nextprev’ />, dan jika pada
widget setting nilai
<b:widget-setting name=‘showCommentLink’> adalah
false, maka ubah menjadi
true, jadi hasil akhirnya seperti ini:
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
| <article id='article-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>false</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post' />
</b:loop>
</b:includable>
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<div>
<!-- Post Start -->
<div class='card mb-3' itemprop='blogPost' itemscope='itemscope'
itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url' />
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId' />
<meta expr:content='data:post.id' itemprop='postId' />
<a expr:name='data:post.id' />
<b:if cond='data:post.firstImageUrl'>
<img class='card-img-top' expr:src='data:post.firstImageUrl'
expr:alt='data:post.title' />
</b:if>
<div class='card-body mb-0 pb-0'>
<b:if cond='data:post.title'>
<h2 class='card-title' itemprop='name'>
<data:post.title />
</h2>
</b:if>
<b:if cond='data:top.showTimestamp'>
<span class='card-text'>
<small class='text-muted'>
Oleh
<data:post.author /> • Di update pada
<data:post.timestamp />
</small>
</span>
</b:if>
<hr />
</div>
<div class='card-body pt-0 mt-0' expr:id='"post-body-" + data:post.id'
expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body />
</div>
<div class='card-footer'>
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span class='badge badge-success'>
<a class='text-white' expr:href='data:label.url' rel='tag'>
#
<data:label.name />
</a>
</span>
</b:loop>
</b:if>
</div>
</div>
</div>
<!-- Post End -->
<b:include name='nextprev' />
<div class="card p-3 mb-3">
<b:include data='post' name='comment_picker' />
</div>
</div>
</b:if>
</b:includable>
<b:includable id='nextprev'>
<div class='d-flex justify-content-between mb-3'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
<button type="button" class="btn btn-outline-primary">
<data:newerPageTitle /></button>
</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
<button type="button" class="btn btn-outline-primary">
<data:olderPageTitle /></button>
</a>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</article>
|
tampilannya setelah diterapkan pada Blogger silahkan lihat langsung di https://template-blogger-bootstrap-2.blogspot.com/2020/10/vestibulum-ante-ipsum-primis-in.html.
Selanjutnya: Mengatur Layout Index Page Blogger Dengan Bootstrap
