Step By Step Cara Membuat Template Blog Sendiri - Belajar Tahap #5

Anggap saja Anda baru saja selesai membangun dan mendirikan sebuah toko. Dalam hal ini sebagai contoh misalnya adalah sebuah toko yang akan Anda gunakan sebagai tempat untuk berjualan buku serta berbagai alat tulis kantor, sebuah bangunan toko yang Anda rencanakan sebagai tempat untuk berjualan handphone, atau sebuah toko yang akan dipakai sebagai tempat untuk berjualan jenis barang lainnya.

Karena baru saja selesai dibangun dan didirikan, maka dapat diartikan bahwa kondisi toko tersebut masih dalam keadaan kosong. Sehingga sebelum toko benar-benar dapat digunakan untuk berjualan, maka ada beberapa hal lagi yang perlu dipersiapkan. Dalam hal ini sebagai contoh misalnya Anda masih harus mempersiapkan rak atau etalase terlebih dulu yang nantinya dapat Anda gunakan sebagai tempat untuk memajang barang dagangan.

Demikian pula dengan blog. Apabila blog diibaratkan sebagai sebuah toko dan artikel yang Anda terbitkan diibaratkan sebagai suatu barang dagangan, maka tentu saja juga diperlukan tempat untuk memajang atau menampilkan artikel itu bukan?

Agar artikel dapat tampil dengan baik, maka diperlukan sebuah template untuk menayangkannya. Dan agar sebuah template dapat menayangkan artikel, maka diperlukan adanya prosedur tertentu dalam template itu. Sementara itu jika sebelum ini Anda telah melakukan uji coba pembuatan template dengan mengacu pada beberapa tutorial yang telah saya terbitkan sebelumnya dalam katagori Themes, maka template yang terbentuk baru dapat menayangkan navbar, header, dan daftar laman saja. Oleh sebab itu agar template uji coba yang telah Anda buat sebelumnya dapat menampilkan postingan, maka proses pembuatan template tersebut dapat Anda lanjutkan dengan cara mengerjakan beberapa langkah berikut ini secara urut dan runtut.

Pertama, buka template uji coba yang telah Anda buat sebelumnya. Namun bagi Anda yang baru menemukan artikel ini dan belum paham dengan yang dimaksud template uji coba tersebut, maka silakan baca terlebih dulu beberapa ulasan sebelumnya terkait dengan tahap-tahap pembuatan template responsive tersesuai yang didukung dengan tampilan khusus versi mobile dengan cara menelusurinya pada katagori Themes.

Kedua, cari dan kemudian ganti kode <b:section class='main' id='main' showaddelement='no'/> dengan rangkaian kode di bawah ini.

    <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
        <b:includable id='main' var='top'>
          <b:if cond='data:mobile == &quot;false&quot;'>
            <div class='blog-posts hfeed'>
              <b:include data='top' name='status-message'/>
              <b:if cond='data:blog.pageType == &quot;index&quot;'>
                <b:include name='web-index-post'/>
              <b:else/>
                <b:loop values='data:posts' var='post'>
                  <b:include data='post' name='post'/>
                </b:loop>  
              </b:if>
            </div>
          <b:else/>
            <b:include name='mobile-main'/>
          </b:if>
        </b:includable>
        <b:includable id='web-index-post'>
          <b:loop values='data:posts' var='post'>
            <table class='tabel-index'>
              <tbody>
                <tr>
                  <td class='tabel-index-kiri'>
                    <b:if cond='data:post.thumbnailUrl'>
                      <div class='gambar-index'>
                        <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
                        <br/>
                      </div>
                      <b:else/>
                      <div class='gambar-index'>
                        <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7A50e0EsSeKGypkTz5HqRyKXL0n38JEpjvnykpo-afjGM_z2zcX-j11zE_JMB0H7DrYUAPHvNvjuabAbHljkcClAQaxy-T_SS_GJHdJfR9uAJhNJJQm7X2_SyfLual6PARTXOd0njWY/s144/No%2520Image.jpg'/>
                        <br/>
                      </div>
                    </b:if>
                  </td>
                  <td class='tabel-index-tengah'>
                    <a expr:name='data:post.id'/>
                    <h3 class='judul-index'>
                      <a expr:href='data:post.url'>
                        <data:post.title/>
                      </a>
                    </h3>
                    <b:if cond='data:post.snippet'>
                      <span class='ringkasan-index'>
                        <data:post.snippet/>
                      </span>
                    </b:if>
                    <b:if cond='data:post.numComments == 0'>
                      <span class='komentar-index'>
                        0 komentar
                      </span>
                      <b:else/>
                      <b:if cond='data:post.numComments == 1'>
                        <span class='komentar-index'>
                          1 komentar
                        </span>
                        <b:else/>
                        <span class='komentar-index'>
                          <data:post.numComments/> komentar
                        </span>
                      </b:if>
                    </b:if>
                  </td>
                  <td class='tabel-index-kanan'>
                    <a class='lingkaran' expr:href='data:post.url'>
                      <img alt='&gt;' class='panah' height='22' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmwwqXzOmHClUWO8kmEuAggVPTwLci_b6RL654wN0T_T3xtMCURFiwQkC1vQHh084eTN_GBp3vC6G7BOynlv5ZB1JNF1XyYIngp95pZedDsrm-sGRMZ8ZpKRA6iBd0_OiXpBnqjVuhe-M/s800/Panah.png' title='Baca Selengkapnya' width='15'/>
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </b:loop>
        </b:includable>
      </b:widget>
    </b:section>

Ketiga, simpan template.

Selanjutnya apabila template telah tersimpan, maka tutuplah editor template dan kemudian buatlah beberapa postingan serta laman uji coba.  Sehingga setelah membuat beberapa postingan serta laman uji coba, maka tampilan blog yang didapatkan lebih kurang adalah seperti yang dapat Anda lihat pada blog demo ini.

Perhatikan bahwa seperti yang terjadi pada beberapa tahapan sebelumnya bahwa setelah template disimpan dan kemudian kemudian editor template ditutup, maka bila editor template dibuka kembali Anda akan melihat adanya beberapa rangkaian kode baru dalam template. Yang mana rangkaian kode baru itu ditambahkan secara otomatis oleh Blogger ke dalam template. Demikian pula setelah Anda menambahkan rangkaian kode di atas dan kemudian menyimpannya, maka setelah editor template Anda tutup dan kemudian buka kembali di lain waktu, Anda pun akan melihat terdapat banyak rangkaian kode baru yang ditambahkan secara otomatis oleh Blogger ke dalam template.

Dan perhatikan pula bahwa setelah menerapkan rangkaian kode di atas, maka model laman blog yang Anda dapat tidaklah seperti model laman blog pada umumnya karena memang nantinya akan dibentuk menjadi seperti model laman beranda Eltelu atau seperti yang tampak pada gambar di atas. Sehingga bagi Anda yang paham betul dengan rangkaian kode pada template Blogger, bisa jadi merasa heran dengan rangkaian kode yang terdapat dalam widget “Blog1” dan adanya penggunaan tabel yang terdapat dalam prosedur tambahan “web-index-post”.

Hal tersebut disebabkan karena teknik yang saya pakai untuk merancang dan membuat template bisa jadi memang dapat dikatakan sebagai sebuah teknik baru dan bisa jadi pula teknik ini merupakan sebuah teknik yang belum lazim serta belum pernah dipakai oleh perancang dan pembuat template pada umumnya. Namun demikian Anda tak perlu khawatir, karena apabila langkah demi langkah dalam tutorial yang saya terbitkan Anda kerjakan dengan baik dan benar, maka pada akhirnya Anda akan mendapatkan hasil sesuai dengan yang Anda harapkan.

Oh ya, kemudian apabila Anda mengalami kendala atau kesulitan dalam menerapkan tutorial tersebut, maka silakan ajukan pertanyaan dengan cara mengeposkan komentar dalam artikel ini.