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.
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 == "true"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isFirstPost == "true"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 == "true"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isFirstPost == "true"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 != "index"'> <!-- 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>
<b:if cond='data:post.hasJumpLink'>
<!-- Rangkaian Kode Bawaan Template -->
</b:if>
<b:if cond='data:blog.pageType != "index"'> <!-- 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 ==
"index"'>
<h2 class='date-header'><span>Headline</span></h2>
<b:else/>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<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.
