Cara Hanya Menampilkan Judul Posting per Label

Sebuah tambahan artikel di bawah menu modifikasi blog setelah sebelumnya saya memberikan tutorial cara membuat huruf besar di awal postingan atau membuat drop cap - sesuai koreksi dari bang Je-Fry- , kali ini kita akan merubah tampilan daftar artikel per label dengan hanya menampilkan judul artikel atau posting nya saja.

Defaultnya, saat pengunjung melakukan klik menu label di blog anda, maka yang akan tampil kemudian adalah daftar postingan di blog tersebut lengkap dengan potongan artikel hingga batas jump break atau read more, namun lewat posting kali ini saya ingin mengajak anda memodifikasi tampilan tersebut hingga hanya menampilkan judul artikelnya saja, dengan tampilan seperti itu diharapkan akan membantu meringankan loading blog anda nantinya.

Cara menampilkan hanya judul posting

Berikut penampakan default saat label anda di kunjungi ;

Jika posting anda sudah banyak, maka tampilan artikel akan berjajar ke bawah dan memberi tambahan waktu saat loading halaman blog anda. Untuk menyiasatinya, maka kita akan menuju ke menu template dan edit HTML blog.

Setelah menambahkan centang pada expand template widget, kita cari markah <b:include data='post' name='post'/> dan menggantinya dengan ;

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Sampai di sini jika anda simpan template anda, maka tampilan posting per label di blog anda akan terlihat seperti ini ;

Namun tampilan tersebut rasanya terlihat kurang menarik, jadi kita lanjutkan ke tutorial berikutnya.

Menambahkan border pada judul posting

Kita lakukan kreasi dengan menambahkan border pada tampilan judul artikel tersebut dengan mengganti kode <data:post.title/></a><br/><br/>  yang telah saya beri warna biru di atas dengan ;

<div style='padding:6px 0 6px 5px;border-right:3px solid #0f5298;border-bottom:1px solid #b6cfea;margin-bottom:2px;background:#ffffff;color:#000000;'>
<data:post.title/></div></a>

Dengan kode tersebut maka saya telah menambahkan border di bawah judul artikel setebal 1px dengan warna  #b6cfea , dan border di sisi kanan judul setebal 3px dengan warna  #0f5298 , hingga menampilkan hasil seperti ini ;

Masih kurang puas? kita ganti background judul posting tersebut di kode di atas dari semula background:#ffffff menjadi   background:#f3f3f3 , lengkapnya seperti berikut ;

<div style='padding:6px 0 6px 5px;border-right:3px solid #0f5298;border-bottom:1px solid #b6cfea;margin-bottom:2px;background:#f3f3f3;color:#000000;'>
<data:post.title/></div></a>

Hingga judul posting akan terlihat seperti ini ;

Sampai di sini kita telah merubah tampilan artikel kita per label dengan hanya menampilkan judul artikel dengan border dan background. Masih kurang puas? Bagaimana jika kita tambahkan icon?

Icon pada judul posting

Kebetulan salah satu icon favorit saya adalah  yang saya simpan di https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTGGIQvx9Hx7ruclr4hifi8o7bqnfuJwM0WPUZJAXylZW9KYCbhS6XCY6mLBRneQm2V-qPBxxhNdyrHV8xC5bgFSWYYfg3La31BYnZk3Jw-UFG87dk-VpmnT9J3Y80vqe-BZUBldmSPs/ , maka saya akan tambahkan kode berikut ;
<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTGGIQvx9Hx7ruclr4hifi8o7bqnfuJwM0WPUZJAXylZW9KYCbhS6XCY6mLBRneQm2V-qPBxxhNdyrHV8xC5bgFSWYYfg3La31BYnZk3Jw-UFG87dk-VpmnT9J3Y80vqe-BZUBldmSPs/'/>
sebelum tag  <data:post.title/> di atas. atau lengkapnya,

<div style='padding:6px 0 6px 5px;border-right:3px solid #0f5298;border-bottom:1px solid #b6cfea;margin-bottom:2px;background:#f3f3f3;color:#000000;'><img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTGGIQvx9Hx7ruclr4hifi8o7bqnfuJwM0WPUZJAXylZW9KYCbhS6XCY6mLBRneQm2V-qPBxxhNdyrHV8xC5bgFSWYYfg3La31BYnZk3Jw-UFG87dk-VpmnT9J3Y80vqe-BZUBldmSPs/'/>
<data:post.title/></div></a>

Setelah memilih save template, maka tampilan akhirnya akan seperti ini ;

Modifikasi tampilan judul posting per label

Tutorial di atas sengaja saya urutkan prosesnya sehingga diharapkan memudahkan anda melakukan modifikasi sesuai dengan selera anda sendiri, namun bagi anda yang kurang memahami setting kode warna - dan - atau penempatan kode hingga takut menimbulkan error pada template anda, berikut saya tuliskan list urutan tutorial tersebut ;

1. Masuk ke menu template - edit HTML blog anda.
2. Beri centang pada expand template widget
3. Cari kode  <b:include data='post' name='post'/>
4. Ganti kode  <b:include data='post' name='post'/> dengan

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:3px solid #0f5298;border-bottom:1px solid #b6cfea;margin-bottom:2px;background:#f3f3f3;color:#000000;'><img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTGGIQvx9Hx7ruclr4hifi8o7bqnfuJwM0WPUZJAXylZW9KYCbhS6XCY6mLBRneQm2V-qPBxxhNdyrHV8xC5bgFSWYYfg3La31BYnZk3Jw-UFG87dk-VpmnT9J3Y80vqe-BZUBldmSPs/'/>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
5. Simpan template anda.

Untuk demo nya silahkan anda lihat melalui tautan buka label modifikasi blog (link akan terbuka di tab baru)
Terima kasih telah membaca cara hanya menampilkan judul posting per label, semoga bermanfaat dan jangan lupa tinggalkan komentar anda setelah membaca tutorial ini, terima kasih.

Artikel Cara Hanya Menampilkan Judul Posting per Label ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;