Mengatur Tampilan Layout Blogger Dengan Bootstrap
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 tampilan layout Blogger dengan Bootstrap 4.
Sebelumnya kita telah mengatur layout dari template Blogger yang kita buat jadi sekarang saatnya kita mempercantik tampilan layoutnya.
Tampilan layout yang akan kita atur pada artikel ini adalah :
- Tampilan layout artikel
- Tampilan layout sidebar
- Tampilan layout footer
Untuk cara mengatur tampilan header dan navbar silahkan lihat di halaman ini.
Pada tutorial ini kita akan banyak menggunakan tag blogger seperti <b:if>, <b:elseif>, dantag lainnya, jadi sebaiknya kamu mempelajari dahulu kapan tag tersebut harus digunakan di https://support.google.com/blogger/answer/46995.
Mengatur Tampilan Layout Artikel
Saat mengatur tampilan layout artikel kita akan fokus pada tag <article> </article>. Isi tag <article> </article> yang telah kita buat sebelumnya adalah sebuah section yang berisi widget Blog Posting.
<article id='article-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posting' type='Blog'></b:widget>
</b:section>
</article>Sebenarnya kode widget Blog Posting tidak sesederhana diatas, karena setelah menerapkan tema yang telah kita buat sebelumnya di Blogger maka Blogger akan mengubah widget tersebut menjadi seperti ini
<section class='card col-12 col-lg-8' id='outer-wrapper'>
<article id='article-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</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'>true</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>
<!-- Dan Masih Banyak Lagi, lihat semuanya di:
https://identips.github.io/cara-membuat-tema-blogger-dengan-bootstrap/sec_articele_1 -->Kodenya panjang, tapi sebenarnya tidak semua kode itu kita akan gunakan, jadi kita cukup mengambil kode yang kita butuhkan saja.
Disini saya akan mendesain layout artikel yang kurang lebih mirip dengan desain layout artikel yang digunakan oleh Identips, dimana terdapat featured image, judul postingan, nama penulis dan tanggal postingan diperbarui, isi artikel dan label.
Untuk layoutnya saya menggunakan 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 yang digunakan untuk membuat sebuah Card Image Caps seperti ini
<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>Jadi kita tinggal menerapkan kode tersebut diatas pada kode widget Blog Posting, maka hasilnya akan seperti ini:
<article id='article-wrapper'>
<b:section class='main' id='main'>
<!-- Widget Posting Blog dimulai disini -->
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>
<!-- Pengaturan Widget-->
<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>
<!-- Layout artikel -->
<b:includable id='main'>
<b:loop values='data:posts' var='post'>
<div>
<b:include data='post' name='post' />
</div>
</b:loop>
</b:includable>
<b:includable id='post' var='post'>
<!-- Container Artikel -->
<div class='card' 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' />
<!-- Featured Image -->
<b:include data='post' name='postFeaturedImage' />
<!-- Cotainer judul artikel dan nama penulis dan tanggal postingan diperbarui -->
<div class='card-body mb-0 pb-0'>
<b:if cond='data:post.title'>
<!-- Judul artikel -->
<h2 class='card-title' itemprop='name'>
<b:include data='post' name='postTitle' />
</h2>
</b:if>
<!-- Nama penulis dan tanggal postingan diperbarui -->
<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>
<!-- Container isi Postingan -->
<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>
<!-- Container Label -->
<div class='card-footer'>
<!-- Label -->
<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>
</b:includable>
<b:includable id='postFeaturedImage' var='post'>
<b:if cond='data:post.firstImageUrl'>
<img class='card-img-top' expr:src='data:post.firstImageUrl' />
</b:if>
</b:includable>
<b:includable id='postTitle' var='post'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title />
</a>
<b:else />
<data:post.title />
</b:if>
</b:includable>
</b:widget>
</b:section>
</article>tampilannya setelah diterapkan di blogger silahkan lihat langsung di https://template-blogger-bootstrap.blogspot.com/2020/07/lorem-ipsum-dolor-sit-amet-consectetur.html
Lihat cara mengatur layout artikel halaman postingan lanjutan di https://www.identips.com/mengatur-layout-halaman-postingan-blogger-dengan-bootstrap/
Mengatur Tampilan Layout Sidebar
Saat mengatur tampilan layout artikel kita akan fokus pada tag <aside> </aside>. Pada dasarnya cara untuk mengatur layout sidebar sama dengan cara mengatur layout artikel, yang membedakan hanyalah pada sidebar terdapat banyak widget dan layout setiap widget tentu tidak sama, sebagai contoh saya akan menambahkan widget Postingan Populer pada sidebar.
Kode widget Postingan Populer secara standar seperti ini:
<aside class='col-12 col-lg-4 mb-3' id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Postingan Populer' type='PopularPosts'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'>
<data:post.title/>
</a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</aside>Untuk widget Postingan Populer ini saya menggunakan layout List Group Custom Content. Untuk dokumentasinya dapat kamu lihat di https://getbootstrap.com/docs/4.5/components/list-group/#custom-content.
Pada halaman dokumentasi Bootstrap kita ditunjukan cara untuk membuat List Group Custom Content dengan menggunakan kode seperti ini:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>Sekarang kita tinggal menerapkan kode tersebut pada widget Postingan Populer yang akan kita buat. Setelah diterapkan pada widget postingan populer yang kita buat maka hasilnya akan seperti ini:
<aside class='col-12 col-lg-4' id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<!-- Widget Postingan Populer dimulai dari sini -->
<b:widget id='PopularPosts1' locked='false' title='Postingan Populer' type='PopularPosts'>
<!-- Peggaturan Widget -->
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
</b:widget-settings>
<!-- Layout Widget -->
<b:includable id='main'>
<div class="list-group">
<!-- Judul widget -->
<b:if cond='data:title != ""'>
<span class="list-group-item list-group-item-action active">
<data:title/>
</span>
</b:if>
<!-- Daftar Potingan Populer -->
<b:loop values='data:posts' var='post'>
<b:if cond='!data:showSnippets'>
<a class="list-group-item list-group-item-action">
<data:post.title/>
</a>
<b:else/>
<a expr:href='data:post.href' class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">
<data:post.title/>
</h5>
</div>
<hr/>
<p class="mb-1">
<data:post.snippet/>
</p>
</a>
</b:if>
</b:loop>
</div>
</b:includable>
</b:widget>
</b:section>
</aside>tampilannya setelah diterapkan di blogger silahkan lihat langsung di https://template-blogger-bootstrap.blogspot.com/2020/07/lorem-ipsum-dolor-sit-amet-consectetur.html
Mengatur Tampilan Layout Footer
Saat mengatur tampilan layout artikel kita akan fokus pada tag <footer> </footer>.
Kode footer yang telah kita buat sebelumnya adalah seperti ini:
<footer class='col-12' id='footer-wrapper'>
Copyright©2020 <data:blog.title/>
</footer>Sekarang kita tingga mengatur layoutnya, pada footer ini, saya akan menggunakan layout Fluid Jumbotron dari Bootstrap, dokumentasinya silahkan lihat di https://getbootstrap.com/docs/4.5/components/jumbotron/
Pada halaman dokumentasi Bootstrap kita ditunjukan cara untuk membuat Fluid Jumbotron dengan menggunakan kode seperti ini:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>Sekarang tinggal kita terapkan pada footer yang kita buat, maka hasilnya akan seperti ini:
<footer class='jumbotron jumbotron-fluid m-0' id='footer-wrapper'>
<div class="container text-center">
<p> Copyright©2020 <data:blog.title/></p>
</div>
</footer>tampilannya setelah diterapkan di blogger silahkan lihat langsung di https://template-blogger-bootstrap.blogspot.com/2020/07/lorem-ipsum-dolor-sit-amet-consectetur.html
Selanjutnya: Mengatur Layout Halaman Postingan Blogger Dengan Bootstrap