Cara Menambahkan Sebuah Kolom Posting Utama Untuk Artikel Terbaru Pada Beranda Blog

Sobat Blogger, melanjutkan uraian teknik untuk mengubah atau mengganti model bidang posting yang ditampilkan di halaman beranda dalam artikel sebelumnya dengan judul ‘Cara Mengganti Desain Halaman Blog Yang Dihasilkan Oleh Penggunaan Template Standar’, berikut ini adalah uraian cara yang digunakan untuk menambahkan 1 (satu) kolom utama untuk artikel terbaru pada homepage yang dimaksudkan sebagai sebuah headline. Disamping itu, penerbitan artikel ini sekaligus dimaksudkan untuk menjawab pertanyaan yang diajukan dalam artikel sebelumnya mengenai bagaimana caranya menambahkan kotak posting baru di atas kumpulan kotak artikel yang dihasilkan oleh penggunaan teknik dalam artikel tersebut di atas. Sehingga untuk menerapkan teknik dalam artikel ini, maka terlebih dulu Anda harus mengimplementasikan teknik yang telah diuraikan dalam artikel sebelumnya seperti yang telah saya sebutkan di atas.

Dan karena langkah-langkah untuk membuat sebuah kolom posting baru seperti yang tampak pada gambar di atas cukup panjang, maka jika Anda ingin menerapkannya dapat langsung dilakukan dengan mengerjakan cara di bawah ini secara berurutan.

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

Kedua, menambahkan sebuah kolom posting baru. Untuk mengerjakannya cari <b:include name='kolom-posting'/> dan kemudian sisipkan <b:include name='full-artikel'/> tepat di atasnya. Dan karena kode tersebut terdapat 2 (dua) buah, maka perhatikan contoh rangkaian kode di bawah ini.

Berikut ini adalah rangkaian kode awal (sebelum dilakukan perubahan).

<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:include name='kolom-posting'/>
          <b:else/>
            <b:include name='full-artikel'/>
          </b:if>
        <b:else/>
          <b:include name='full-artikel'/>
        </b:if>
      <b:else/>
        <b:include name='kolom-posting'/>
      </b:if>
    <b:else/>
    </b:if>
  </b:loop>
</div>

Dan berikut ini adalah rangkaian kode yang telah dilakukan perubahan.

<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:include name='kolom-posting'/>
          <b:else/>
            <b:include name='full-artikel'/>
          </b:if>
        <b:else/>
          <b:include name='full-artikel'/>
        </b:if>
      <b:else/>
        <b:include name='full-artikel'/>  <!-- KODE TAMBAHAN YANG DISISIPKAN -->
        <b:include name='kolom-posting'/>
      </b:if>
    <b:else/>
    </b:if>
  </b:loop>
</div>

Keterangan:

Setelah mengerjakan langkah di atas, maka lakukan pratinjau untuk memastikan bahwa telah tertambah satu kolom baru di atas kolom kumpulan artikel sebelumnya. Dan apabila telah tertambah kolom posting baru, maka lanjutkan pada langkah yang ketiga.

Ketiga, menyembunyikan kolom footer yang terdapat di bawah artikel. Untuk mengerjakannya terlebih dulu cari <div class='post-footer'>. Namun ingat karena kode tersebut dalam template terdapat 2 (dua) buah, maka pastikan bahwa kode yang dimaksud merupakan kode yang terletak beberapa baris di bawahnya <b:if cond='data:post.hasJumpLink'>.

Dan selanjutnya apabila sudah ketemu maka tambahkan 2 (dua) buah kode seperti yang ditandai dengan keterangan huruf kapital dalam rangkaian kode di bawah ini.

<!-- Rangkaian Kode Bawaan Template -->

    <b:if cond='data:post.hasJumpLink'>
      <!-- Rangkaian Kode Bawaan Template -->
    </b:if>
    
    <b:if cond='data:blog.pageType != &quot;index&quot;'>  <!-- TAMBAHKAN KODE INI DI SINI-->
    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
    
       <!-- Rangkaian Kode Bawaan Template -->
    
       </span> </div>
    </div>
  </b:if>  <!-- DAN TAMBAHKAN KODE INI DI SINI -->
  </div>
</b:includable>

Keterangan:

Setelah mengerjakan langkah di atas, maka lakukan pratinjau untuk memastikan bahwa kolom footer artikel tidak lagi tampil di halaman beranda. Dan bila hasilnya telah sesuai dengan yang diharapkan, maka lanjutkan pada langkah yang keempat.

Keempat, menambahkan judul untuk kolom posting baru yang terbentuk. Untuk mengerjakannya silakan cari <b:includable id='full-artikel'> dan kemudian temukan kode <h2 class='date-header'><span><data:post.dateHeader/></span></h2> yang terletak beberapa baris di bawahnya.

Selanjutnya bila kode tersebut telah ketemu, maka hapuslah dan kemudian ganti kode tersebut dengan rangkaian kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <h2 class='date-header'><span>Headline</span></h2>
<b:else/>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Kelima, menambahkan judul untuk kumpulan kolom posting yang kedua. Untuk mengerjakannya cari terlebih dulu <b:includable id='kolom-posting'> dan kemudian perhatikan bahwa di bawah kode tersebut terdapat <div class='date-outer'>. Nah, yang perlu dilakukan adalah menyisipkan <h2 class='date-header'><span>Daftar Pilihan Artikel</span></h2> tepat di bawah kode tersebut, dalam hal ini tepat di bawah <div class='date-outer'>.

Keenam, simpan template.

Namun ingat, karena setiap template memiliki desain tampilan awal serta karakteristik yang berbeda, maka bukan berarti kustomisasi yang dilakukan telah selesai sepenuhnya. Sehingga dengan demikian dapat diartikan pula bahwa perlu dilakukan penataan lanjutan, termasuk diantaranya adalah menata kerapian bidang posting, judul kolom posting, dan atau bagian lainnya sesuai dengan template yang dipakai. Oleh sebab itu jika Anda mengalami kesulitan dalam mengimplementasikan teknik tersebut, maka silakan ajukan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini, karena dengan senang hati saya akan membantu memberikan solusi untuk mengatasinya sesuai kemampuan yang saya miliki.

Semoga berguna dan bermanfaat.

Salam.