Cara Menampilkan Label, Tanggal dan Author di Bawah Judul Artikel

Seringkali kita melihat template blogger premium dengan interface yang ciamik nan aduhai. Namun apa daya kita belum mampu meniru sama persis karena keterbatasan kemampuan. Seperti halnya dengan keberadaan label, tanggal posting dan penulis artikel yang berbeda dengan pengaturan default.

Bagian-bagian tersebut, yaitu: post author, date dan label, saya lihat pada beberapa template premium diletakan di bawah judul artikel. Selain itu terlihat juga penggunaan icon yang semakin mempercantik penampilan. Kiranya, bisakah kita juga memiliki template sendiri namun dengan fitur tersebut?

Dalam jangka waktu yang tidak sebentar saya mencari referensi terkait hal itu. Baik yang didapatkan dari penulis dengan berbahasa Indonesia maupun bahasa Inggris. Hingga suatu hari saya menemukan tutorial yang tepat agar bisa menampilkan tanggal, author dan label berada di bawah judul postingan.

Tutorial tersebut berasal dari mayura4ever dan sudah saya praktekan pada theme blogger lain yang masih dalam perbaikan. Teman-teman ada yang tertarik untuk mencobanya? Silahkan merujuk sumber asal yang dalam bahasa Inggris atau simak bahasan di bawah ini.

Cara Menampilkan Label, Tanggal dan Author di Bawah Judul Postingan

Ketika kita mempublikasikan sebuah artikel blog maka terlihat di bawah postingannya ada nama penulis, tanggal posting serta label atau kategori. Inilah pengaturan default yang disediakan oleh Blogger. Dan kustomisasi yang disediakan juga terlihat minim sekali. Seolah-olah Blogger hanya menyediakan mode itu atau tidak sama sekali; yakni dengan tidak menampilkannya.

Kecuali melalui pengeditan mode HTML tentu Blogger menyediakan ruang sebebas-bebasnya.

Dan inilah yang akan kita lakukan sekarang agar label, tanggal serta author post bisa ditampilkan di bawah judul postingan. Tidak sabar untuk segera mempraktekan tutorialnya? Ikuti langkah-langkah di bawah ini agar post author, date dan label nanti terlihat di bawah judul postingan.

1. Login ke dashboard Blogger.

2. Klik judul blog yang ingin di edit kemudian klik "Layout" atau "Tata Letak".

3. Klik "Edit" yang terlihat di bagian section "Main" atau "Article" di bawah widget "Blog Posts" (lihat pointer mouse pada gambar).

4. Pastikan author, date dan label sudah dalam keadaan aktif kemudian klik "Simpan".

5. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

6. Cari kode berikut menggunakan fitur pencarian dengan menekan Ctrl + F, masukan kode di bawah kemudian tekan enter.

<b:if cond='data:post.dateHeader'>

7. Dengan kata kunci pada nomor 6 di atas kita menemukan kode tersebut pada beberapa tempat. Itu pun ada dua model tergantung theme blogger yang digunakan. 

8. Dan model pertama dengan baris kode selengkapnya yaitu:

<b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if>

9. Sedangkan baris kode selengkapnya model kedua yaitu:

<b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if>

10. Sekarang perhatikan baris kode yang ada pada template masing-masing; model pertama seperti nomor 8? Atau sama dengan model kedua pada nomor 9 di atas? 

11. Pada theme blogger sendiri yang dibuat dari nol saya dapati sesuai dengan model pertama. Sehingga, sesuai arahan dari sumber referensi, maka kode tersebut dihapus dan diganti dengan kode ini:

<b:if cond='data:post.dateHeader'> <script>var DateScript = '<data:post.dateHeader/>';</script> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> <b:else/> <h2 class='date-header'> </h2> </b:if>

12. Lakukan hal yang sama pada tempat lainnya. Pada template yang saya gunakan terdapat 3 tempat namun cuma 2 saja yang dirubah. Tempat yang ketiga tidak mempengaruhi apa pun.

13. Adapun bagi teman-teman yang mempunyai template dengan baris kode model kedua. Maka, dijelaskan dalam tulisan asal, baris kode tersebut (yang model dua) harus diganti dengan kode ini: 

<b:if cond='data:post.dateHeader'> <script>var DateScript = '<data:post.dateHeader/>';</script> <h2 class='date-header'><data:post.dateHeader/></h2> <b:else/> <h2 class='date-header'> </h2> </b:if>

14. Langkah selanjutnya letakan baris kode ini di bawah kode <div class='post-header-line-1'/>. Dan kode <div class='post-header-line-1'/> ini ada pada dua tempat. Pada template saya sendiri yang dibuat dari nol diletakan setelah kode <div class='post-header-line-1'/> yang kedua.

<b:if cond='data:blog.pageType != "static_page"'> <table style='font-size: 12px'> <tr valign='top'> <td><img src='[Author Icon]' style='vertical-align:middle;padding-right:5px;'/></td> <td><span class='post-author vcard'><b:if cond='data:post.authorProfileUrl'> <span class='fn'> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <data:post.author/> </a> </span> <b:else/> <span class='fn'><data:post.author/></span></b:if></span> </td> <td><img src='[Date/Time Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/></td> <td><script>document.write(DateScript);</script> at <data:post.timestamp/></td> <td><img src='[Label Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/></td> <td> <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> </b:if></b:loop></b:if> </td> </tr> </table> </b:if>

15. Simpan theme.

16. Ini hasil mentahnya.

Catatan Tambahan!

Disebutkan dalam sumber referensi, baris kode yang telah dibagikan itu bisa kita modifikasi sesuai keinginan. Selengkapnya, berikut ini penjelasan tentang baris kode pada nomor 14 di atas agar bisa digunakan sebaik mungkin.

1. Jika ingin mengganti ukuran huruf silahkan ganti angka 12px pada baris <table style="font-size: 12 px">.

2. Untuk icon penulis silahkan isi dengan IP Address icon yang Anda ketahui pada baris: <img src='[Author Icon]' style='vertical-align:middle;padding-right:5px;'/>, tepatnya dengan mengganti [Author Icon] di atas dengan alamat icon Anda yang berukuran 16 x 16 pixel.

3. Penambahan kata sebelum atau sesudah post author bisa dilakukan pada baris: <span class='fn'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></span>. Caranya: tuliskan sebelum atau sesudah kode <data:post.author/>.

4. Untuk icon tanggal dan waktu masukan URL icon melalui kode "[Date/Time Icon] pada baris kode : <img src='[Date/Time Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/> .

5. Kata "at" sepertinya juga bisa diganti melalui baris: <td>

<script>document.write(DateScript);</script> at <data:post.timestamp/>

</td>.

6. Untuk icon label silahkan masukan alamatnya di [Label Icon] pada baris kode: <img src='[Label Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/>.

7. Sedangkan warna kuning pada baris kode: <td>

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> </b:if></b:loop></b:if>

</td>

Sebagai penanda area yang bisa digunakan untuk menambahkan teks atau karakter diantara label lainnya. Biasanya ini digunakan pada postingan yang memiliki kategori 2 label atau lebih.

Penutup

Dengan menggunakan langkah-langkah di atas kita dapat menampilkan label, tanggal dan author di bawah judul artikel. Memang terlihat sedikit ribet jika dibandingkan tutorial blogger yang lainnya. Makanya sangat dimaklumi jika tutorial seperti di atas juga jarang dikupas.

Apalagi jika berkaitan dengan jenis template yang sangat banyak ragamnya. Sehingga boleh jadi pada sebagian template akhirnya tidak berhasil dipraktekan. Begitu pun percobaan yang baru saja saya lakukan beberapa saat lalu. Percobaan ini belum memasukan link CDN Bootstrap yang sering saya gunakan. Dan kita lihat nanti apakah ada masalah baru di tengah perjalanannya? 

Apapun itu, hasil yang kita dapat bukan tujuan akhir. Karena belajar otodidak yang terbaik adalah ketika kita menikmati prosesnya. Meskipun kita tidak pernah mengetahui apakah ini berhasil atau tidak. Dan yang tidak boleh dilupakan juga pastikan template yang kita buat itu sesuai gaya CSS dan struktur HTML yang sepadan dengan kebutuhan desain kita.

Selamat mencoba.

Baca Juga