Cara Memindahkan Tanggal Posting di Theme Blogger (1)

Cara membuat template sendiri saya rasakan semakin mudah dengan bantuan Bootstrap. Framework ini benar-benar membantu pembuatan theme blogger dengan mudah. Sehingga tidak ada alasan untuk tidak memulainya karena tidak mengenyam bangku kuliah sekalipun.

Namun tentu saja harus ada semangat belajar dalam mempraktekannya. Termasuk materi lain yang terkait dengan bahasan desain web. Dalam hal ini terkait dengan penerapan Bootstrap pada theme Blogger yang dihasilkan.

Mengapa? Karena jika menggunakan Blogger tentu tidak bisa sepenuhnya full Bootstrap. 

Pilihan lainnya kita bisa menggunakan secara penuh. Namun posting artikel tidak bisa melalui dashboard seperti biasa pada umumnya. Dengan kata lain, jika kita ingin menggunakan full Bootstrap untuk theme Blogger maka update postingan harus diakses melalui pengeditan theme.

Lalu metode apa yang baik dalam membuat template blogger dengan Bootstrap? CMIIW, jika yang ingin dihasilkan untuk template blog. Penggunaan baris kode dari Blogger harus menyertakan widget "blog-posts" pada section "main". Setelah itu baru dibungkus dengan kode "container" dari Bootstrap .

Dengan cara ini kita bisa menggunakan teknologi Bootstrap untuk tampilan secara umum. Adapun backend tetap menggunakan mesin Blogger. Efek samping dari semua ini, nantinya ada kerangka tampilan yang sudah ada dari sononya.

Salah satunya adalah tampilan default tanggal posting yang terlihat di atas judul. Tampilan seperti ini mungkin ada yang tidak setuju. Mungkin ada yang berfikir mengapa tidak diletakan di bawah judul saja? Oke, kita coba mulai lagi belajar membuat template meskipun secara otodidak.

Cara Memindahkan Tanggal Posting di Theme Blogger

Date header atau tanggal posting secara default akan ditampilkan pada bagian atas judul. Baris kode yang mempunyai fungsi ini termasuk bagian dari kode otomatis yang ditambahkan Blogger. Tepatnya pada saat menuliskan sintaks untuk elemen blogger untuk memunculkan posting blog. 

Dan berikut ini tata cara memindahkan letak tanggal posting agar berada di bawah. Jangan lupa! backup theme terlebih dahulu untuk meminimalisir terjadinya error yang tidak bisa diatasi.

1. Login ke dashboard Blogger.

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

3. Klik pada area baris kode yang terlihat kemudian tekan Ctrl + F untuk memunculkan kotak pencarian.

4. Ketik: "isDateStart" pada kolom pencarian kemudian tekan enter.

5. Di sana akan terlihat kode-kode seperti yang terlihat di bawah ini. Silahkan cut baris kode yang berfungsi untuk memunculkan tanggal posting ini kemudian simpan di notepad terlebih dahulu.

<b:if cond='data:post.isDateStart and not data:post.isFirstPost'> </div></div> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-outer"> </b:if> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-posts"> </b:if>

6. Perhatian! Baris kode di atas terletak setelah kode berikut ini ya.

<!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <b:loop values='data:posts' var='post'>

7. Kemudian tekan Ctrl + F, ketikan "<div class='post-header-line-1'/>" dan tekan enter.

8. Baris kode tersebut terletak pada beberapa tempat. Dalam hal ini perhatikan hasil pencarian yang kedua. Tepatnya akan terlihat seperti baris kode di bawah ini.

<div class='post-header'> <div class='post-header-line-1'/> </div>

9. Kemudian ambil baris kode pada nomor 5 yang sudah kita simpan tadi. Dan tempatkan pada posisi setelah <div class='post-header-line-1'/> dan sebelum tag penutup </div> seperti nomor 8 di atas.

10. Simpan theme.

11. Hasil bisa dilihat seperti pada link demo di bawah ini.

Demo

Kesimpulan

Cara membuat template blogger sendiri yang kita pelajari sudah sampai tahap merapihkan. Terutama pada bagian "blog-posts" area yang didominasi kode bawaan dari Blogger. Sedangkan pada bagian sidebar dan footer banyak didominasi Bootstrap agar lebih mudah  Begitu juga "carousel" yang diterapkan Bootstrap sebagaimana terlihat pada link demo. 

Untuk itu, fokus bahasan kali ini lebih mengurai kode bawaan dari Blogger. Salah satunya adalah baris kode yang menghasilkan date-header. Baris kode tersebut menghasilkan tanggal posting di atas judul posting. Sehingga, perlu kiranya memberi sentuhan sedikit dengan memindahkannya ke bawah judul posting agar tampilan lebih elok.

Sekian tutorial kali ini tentang cara memindahkan tanggal posting di theme blogger.

Selamat mencoba.

Ralat

13-12-2022 - Saya meninggalkan cara ini dan beralih ke cara yang sederhana di sini.

Baca Juga