Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

14
Tgl. 12 Mei 2014

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...

Tampilan Postingan Artikel Terbaru Yang Terdapat Pada Eltelu Blog

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://lh4.googleusercontent.com/-eRDsEdCfSQw/UQmcgxiL9aI/AAAAAAAABHs/JaKhiAtPP04/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://lh4.googleusercontent.com/-Y6OQ9gcuVD0/Uy8WGC3kRZI/AAAAAAAACuY/_ihQWRU4B2Y/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.

Ad

Suka? Bagikan artikel ini kepada teman - jaringan Anda.
Label: , .
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 14 komentar untuk artikel ELTELU yang berjudul Step By Step Cara Membuat Template Blog Sendiri - Belajar Tahap #5 .
12/05/14 21.19 O

saya pahami dulu, makasih mas

12/05/14 21.44 O

@Fajri Alhadi Silakan Sob. Memang ada baiknya bila dipahami terlebih dulu sebelum melakukan uji coba, karena dengan begitu maka akan lebih mudah dan memperlancar dalam mengerjakannya.

16/05/14 10.46 O

udah saya coba mas,,,

16/05/14 15.22 O

@Wayan Kelor Kalau begitu silakan tunggu tahap yang berikutnya Sob. Sedapatnya akan segara saya susun dan terbitkan ulasan tahap 6 dalam artikel yang berikutnya. :)

26/05/14 09.20 O

Saya jadi tertarik untuk buat template sendiri, makasih sudah berbagi langkah langkahnya

26/05/14 11.04 O

@jona rendra Kalau begitu tidak ada salahnya bila segera dicoba Sob. :)

15/06/14 17.14 O

bikin template dari awal kayaknya menarik banget ^_^ ^_^

16/06/14 00.07 O

@Dian Amelia Putri Memang sangat menarik Sob. Karena dengan begitu kita dapat belajar sekaligus dapat memahami bagaimana karakteristik template Blogger yang sebenarnya. Oleh sebab itu tidak ada salahnya bila Sobat coba untuk mengerjakannya. :)

25/06/14 13.05 O

wah sangat menarik gan tapi ketika saya terapkan mlah error templete saya kasih solusinya gan trimakasih

25/06/14 13.47 O

@pangeran sehat Ketika Sobat menerapkan tutorial tersebut, maka sangat saya sarankan agar melakukannya pada blog uji coba.

Kemudian apabila tutorial tersebut Sobat terapkan pada template yang berbeda, maka ada baiknya bila Sobat pelajari secara lebih cermat terlebih dulu agar dapat memahami fungsi masing-masing bagian. Hal ini disebabkan karena antara satu template dengan template yang lain bisa saja memiliki karakteristik yang berbeda.

01/08/14 03.22 O

Thanks Om, tutorialnya menarik dan bisa dipahami. kini ane udah bisa buat templet sendiri

04/08/14 00.51 O

@Abdul Rasyid Iya Sob, sama-sama dan syukurlah kalau begitu.

22/12/15 04.11 O

terimakasih, sangat menarik dan membangun, semoga bermanfaat untuk semua.,1x lagi maturnuwun,saluuut..!!

22/12/15 16.38 O

@Agus Aji Kalau begitu tidak ada salahnya bila melihat dan kemudian mempelajari seluruh tahapan dari tutorial pembuatan template sederhana ini, Sob. Dalam hal ini tepatnya Sobat dapat menemukannya dalam katagori "Themes".

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog