Halo, selamat datang di Identips!, Artikel ini merupakan bagian dari artikel Cara Membuat Tema Blogger Sendiri Menggunakan Bootstrap . Pada artikel ini saya akan membahas cara mengatur layout index page pada blogger dengan Bootstrap 4.
Pada Artikel sebelumnya saya sudah membahas cara mengatur layout halaman postingan blogger dengan bootstrap yang terdiri dari cara mengatur layout artikel, membuat navigasi postingan dan menambahkan kolom komentar, dan mungkin setelah menerapkan kode pada halamn itu, postingan yang ada pada homepage akan kosong. Itu disebabkan karena kita belum mengatur layout untuk index page. Dan pada artikel ini, saya akan mengatur tata letak index page atau halaman yang akan menampilkan daftar postingan blog yang kita buat.
Di Dalam mengubah index page ini, kita fokus pada tag <article> </article> atau lebih tepatnya kita akan fokus pada Widget Blog Posting yang ada diantara tag <article> </article>
Mengatur layout Index Page
Layout index page saya atur menggunakan Bootstrap Grid Cards, dkumentasinya dapat kamu lihat di https://getbootstrap.com/docs/4.5/components/card/#grid-cards. Dalam dokumentasi Bootstrap ditulis cara untuk membuat Grid Cards kita menggunakan kode berikut:
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
| <div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<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 longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<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 longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<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 longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<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 longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
|
Perhatikan kode yang saya highlight diatas, kamu dapat melihat bahwa kode tersebut dibuat berulang hingga 4 kali. Kode tersebut diulang sebanyak 4 kali agar nantinya bisa menghasilkan 4 buah post card, akan tetapi pada XML Blogger kamu hanya perlu menulisnya satu kali saja, karena kita dapat menggunakan fungsi <b:loop> untuk mengulangnya. Sekarang mari kita mulai menulis kode yang saya highlihgt pada XML Blogger, dan hasilnya akan seperti ini.
<b:includable id='index' var='post'>
<div class='col mb-4'>
<div class='card'>
<b:if cond='data:post.firstImageUrl'>
<img class='card-img-top' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' />
</b:if>
<div class='card-body'>
<a expr:href='data:post.url'>
<h5 class='card-title'>
<data:post.title />
</h5>
</a>
<p class='card-text'>
<b:eval expr='snippet(data:post.snippet, {length: 100})' />
</p>
</div>
</div>
</div>
</b:includable>
Sekarang masukkan kode diatas dibawah kode <b:includable id=‘main’> . . . </b:includable>. Seperti yang kita ketahui bahwa kode yang akan diparse oleh Blogger hanya kode yang berada diantara <b:includable id=‘main’> </b:includable>, jadi sekarang mari kita memamanggil kode tersebut kedalam <b:includable id=‘main’> </b:includable> sekaligus menambahkan looping, dengan cara memasukkan kode berikut tepat dibawah <b:includable id=‘main’>.
<b:if cond='data:blog.pageType == "index"'>
<div class='row row-cols-1 row-cols-md-2'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='index' />
</b:loop>
</div>
</b:if>
Selanjutnya mari kita menambahkan paginasi.
Menambahkan Paginasi
Pada postingan sebelumnya kita telah membuat navigasi postingan, untuk sementara kita akan memanggil ulang navigasi postingan yng telah kita buat sebelumnya pada halaman index yang telah buat. Caranya adalah menambahkan kode <b:include name=‘nextprev’ />, jadi hasilnya akan seperti ini
<b:if cond='data:blog.pageType == "index"'>
<div class='row row-cols-1 row-cols-md-2'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='index' />
</b:loop>
</div>
<b:include name='nextprev' />
</b:if>
Setelah semuanya selesai, kode yang ada diantara tag <article> </article> sekarang menjadi 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
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
| <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:if cond='data:blog.pageType == "index"'>
<div class='row row-cols-1 row-cols-md-2'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='index' />
</b:loop>
</div>
<b:include name='nextprev' />
</b:if>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post' />
</b:loop>
</b:includable>
<b:includable id='index' var='post'>
<div class='col mb-4'>
<div class='card'>
<b:if cond='data:post.firstImageUrl'>
<img class='card-img-top' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' />
</b:if>
<div class='card-body'>
<a expr:href='data:post.url'>
<h5 class='card-title'>
<data:post.title />
</h5>
</a>
<p class='card-text'>
<b:eval expr='snippet(data:post.snippet, {length: 100})' />
</p>
</div>
</div>
</div>
</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/.
Selanjutnya: Mengatur Layout Homepage Blogger Dengan Bootstrap
