Tuesday, July 11, 2017

Cara Membuat Template Blogger Pembahasan Lengkap

Cara Membuat Template pada postingan kali ini yaitu Template Blogger. sebagai seorang blogger sobat diwajibkan untuk bisa mengedit template atau bahkan untuk membuatnya. Jika sobat mencari kesana kemari tapi tidak menemukan panduan membuat template secara lengkap, maka sobat sedang membaca artikel yang tepat yaitu cara membuat template blogger secara lengkap.

Artikel ini akan saya bungkus dengan simple dan tentunya mudah untuk dipahami. Pembahasan akan saya kupas mulai dari dasar. Sebenarnya dasar membuat template blogger itu kita harus belajar html.


Setelah sobat memabca artikel belajar html, maka sobat akan mendapatkan sebuah struktur html. Struktur tersebut akan kita gunakan dalam membuat template pada artikel ini, jadi baca sampai selesai ya sob.

Apakah sudah hatam belajar html? silahkan sobat lanjutkan dengan belajar css. CSS akan kita gunakan untuk mempercantik tampilan template yang akan dibuat, bagi yang belum tahu apa itu css silahkan saya sarankan untuk mempelajarinya terlebih dahulu.

Atau sobat juga bisa mampir ke belajar pemrograman. Setelah sobat memahami kedua tersebut, langkah selanjutnya sobat harus mempelajari javascript. Kenapa harus belajar JS? Gunananya agar template yang akan sobat buat bisa lebih interaktif dan realtime.

Sebelum masuk pada tahap cara membuat template blogger, sobat harus berkenalan dan mengetahui conditional tag pada blogger, dan berikut beberapa conditional tag yang harus sobat ketahui.

1. Conditional Tag untuk Halaman Depan

<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>

Tag ini digunakan jika sobat ingin menampilkan data hanya pada bagian halaman depan saja, misal sobat ingin menampilkan banner pada halaman utama saja, sobat bisa menggunakan tag ini.

2. Conditional Tag untuk Halaman Statis dan Posting

<b:if cond='data:blog.url == data:post.url'>
...
</b:if>

Jika sobat ingin menampilkan data pada bagian halaman statis dan posting saja, maka sobat bisa menggunakan tag conditional ini, misalkan sobat ingin menampilkan banner atau iklan produk sobat pada halaman statis dan posting, maka gunakan tag conditional ini.

3. Conditional Tag untuk Halaman Posting

<b:if cond='data:blog.pageType == "item"'>
...
</b:if>

Jika pada conditional tag sebelumnya pada halaman statis dan posting, tag ini digunakan jika sobat ingin lebih spesifik lagi untuk penempatan data yang akan ditampilkan.

4. Conditional Tag untuk Halaman Statis

<b:if cond='data:blog.pageType == "static_page"'>
...
</b:if>

Fungsi dari tag ini yaitu hanya menampilkan data pada halaman-halaman statis saja, sobat bisa menggunakan tag ini jika sobat ingin menampilkan data pada halaman statis saja.

5. Conditional Tag untuk Halaman Indeks

<b:if cond='data:blog.pageType == "index"'>
...
</b:if>

Contoh halaman jika menggunakan tag ini adalah halaman depan, search dan halaman label. Jadi sobat bisa menggunakan tag ini jika ingin menampilkan data apda tiga halaman tersebut sekaligus, karena lebih menghemat waktu dan efisien kode.

6. Conditional Tag Halaman Pencarian

<b:if cond='data:blog.searchQuery'>
...
</b:if>

Sobat bisa menggunakan tag ini jika sobat ingin menampilkan data pada halaman pencarian saja, tentunya cukup efisien dan menghemat waktu.

7. Conditional Tag Halaman Label

<b:if cond='data:blog.searchLabel'>
...
</b:if>

Tag ini lebih khusu lagi untuk sobat yang ingin menampilkan data pada halaman label saja, silahkan sobat buktikan sendiri.

8. Conditional Tag Arsip

<b:if cond='data:blog.pageType == "archive"'>
...
</b:if>

Tag Conditional ini bila digunakan maka data hanya akan tampil pada halaman arsip saja.

9. Conditional Tag Posting Pertama

<b:if cond='data:post.isFirstPost'>
...
</b:if>

Digunakan untuk halaman depan, arsip, label, dan halaman pencarian. Untuk lebih jelasnya silahkan sobat coba pada template yang sudah jadi.

10. Conditional Tag Error

<b:if cond='data:blog.pageType == "error_page"'>
...
</b:if>

Dengan tag ini sobat bisa memanfaatkan jika terjadi halaman error pada blog sobat, misalnya sobat ingin menambahkan kolom pencarian yang lebih besar pada halaman error, silahkan gunakan tag ini.

11. Conditional Tag URL

<b:if cond='data:blog.url == "URL"'>
...
</b:if>

Jika sobat menginginkan menampilkan data pada halaman atau URL khusus, maka gunakan tag ini. Untuk penggunaanya silahkan sobat hapus tulis URL yang kedua dengan URL tujuan sobat.

Itulah 11 Conditional Tag pada blogger, sebelum membuat template silahkan sobat pahami dulu beberapa conditional tag di atas, karena nanti akan kita gunakan dalam membuat template pada PART berikutnya.

Perlu sobat ketahui ada beberapa tulisan yang saya baca dari referensi xceria, tetapi saya tidak copy paste, saya bungkus dengan gaya penulisan saya.

Untuk PART 1 saya rasa cukup sampai di sini dulu, silahkan sobat pahami terlebih dahulu tag conditional di atas. Jika sobat belum paham tentang HTML dan CSS, silahkan sobat membaca belajar html dan belajar css.

PART berikutnya akan saya update beberapa hari lagi, jadi sobat terus pantengin blog ini agar sobat tidak tertinggal informasi cara membuat template blogger. Jangan lupa juga kritik dan sarannya untuk penulis agar lebih baik dan berkualitas lagi.

Sampai bertemu pada PART cara membuat template blogger berikutnya, semoga artikel ini banyak disukai, dibagikan dan bermanfaat untuk sobat terutama untuk penulis juga. Baik saya akhiri, sekian dan terima kasih.