Cara Membuat Headline Artikel Di Beranda Blog

Secara default, Blogger memberikan model yang sama untuk bidang artikel yang tampilkan pada halaman beranda (versi web maupun versi seluler). Namun apabila kita membuka berbagai situs web atau portal berita, maka kita akan mendapati adanya headline yang digunakan untuk menampilkan berita terbaru atau berita yang menjadi sorotan  seperti yang digunakan pada blog ini untuk tampilan versi web maupun versi seluler.

Sedikit cerita tentang hal tersebut, kebetulan beberapa waktu yang lalu ada seorang sahabat yang bertanya mengenai cara membuat headline seperti yang tampak pada gambar di atas atau seperti yang biasa digunakan pada berbagai situs web atau portal berita. Nah, untuk keperluan membuat headline artikel di beranda blog tampilan versi mobile, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari kode <b:include data='post' name='mobile-index-post'/> dan kemudian hapus kode tersebut lalu ganti dengan kode di bawah ini.

<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<!-- newer post -->
<b:include data='post' name='mobile-index-post'/>
<b:else/>
<!-- older post -->
<b:include data='post' name='older-mobile-index-post'/>
</b:if>

Ketiga, cari kode <b:includable id='mobile-index-post' var='post'> dan kemudian hapus seluruh rangkaian kode untuk bagian tersebut sampai dengan kode </b:includable>, seperti yang tampak pada contoh rangkaian kode di bawah ini.

<b:includable id='mobile-index-post' var='post'>   <!--- hapus dari sini --->
<div class='mobile-date-outer date-outer'>
---- rangkaian kode ----
</div>
</b:includable>   <!--- hapus sampai sini --->

Kemudian pada bagian kode yang dihapus tersebut, sisipkan rangkaian kode di bawah ini.

<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title'>
<b><data:post.title/></b>
</h3>
</a>

<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image' style='float:left; '>
<div style='float: left; width:80px; height:80px; margin-right:4px; border: 1px solid #666666;'>
<img expr:src='data:post.thumbnailUrl' style='width:80px !important; height:80px !important;'/>
</div>
</div>
</div>
<b:else/>
<div style='float: left; width:80px; height:80px; margin-right:4px; border: 1px solid #666666;'>
<img alt='eltelu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghXQZ-AT_zSjD1Tk8xx7NrWwDPDl9RcG51Cvwm3mXqzLLZfXBFw6_JvK6unRTa7sIVoQ1QPIjug4IZyvVlqVroRSsgm8NRQpimpSi1sYvUrFAoQaSVp7HwOQlNiHBWLv6gQGuNxO0hJ5k/s800/ELTELU.png' style='width: 80px !important; height: 80px !important;'/>
</div>
</b:if>

<div class='post-body'>
<div align='justify'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
</div>
<div style='clear: both;'/>

<div class='mobile-index-comment'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 0'>
<a expr:href='data:post.url'>0 <data:top.commentLabel/></a>
</b:if>
<b:if cond='data:post.numComments != 0'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</div>
</div>
</div>
</b:includable>


<b:includable id='older-mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title'>
<div class='mobile-bingkai-judul'>
<b><data:post.title/></b>
</div>
</h3>
</a>

<div class='mobile-index-comment'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 0'>
<a expr:href='data:post.url'>0 <data:top.commentLabel/></a>
</b:if>
<b:if cond='data:post.numComments != 0'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</div>
</div>
</div>
</b:includable>

Keterangan:

Ganti URL gambar yang terdapat dalam kode <img alt='eltelu' src='https:…. dengan URL gambar yang akan digunakan dan ditampilkan pada headline apabila tidak terdapat gambar dalam artikel yang dimaksud. 

Keempat, simpan template.

Sehingga apabila sebelumnya Anda telah melakukan kustomisasi pada template untuk tampilan versi seluler, maka ketika blog Anda dibuka dengan menggunakan perangkat seluler, tampilannya adalah seperti yang tampak pada gambar di atas. Sedangkan apabila Anda masih menggunakan desain tampilan versi seluler default yang disediakan oleh Blogger, maka ketika blog Anda dibuka dengan menggunakan perangkat seluler, tampilannya adalah seperti yang tampak pada gambar di bawah ini.

Lantas, bagaimana caranya untuk membuat headline artikel di beranda blog untuk tampilan versi web? Terkait dengan hal tersebut, akan saya uraikan dalam artikel yang terpisah atau pada artikel yang berikutnya.

Semoga berguna dan bermanfaat.

Salam.