Baik, saya bantu jawab sesingkat mungkin tentang hal pembuatan template di blogspot.

Kamu harus sudah memahami 6 jenis kode dibawah ini.

  1. XML [ Membuat Dokumen Markup ]
  2. Tag Conditional[1] [ Kode Blogger Multi Fungsi ]
  3. Kode HTML [ Kerangka Template]
  4. Kode CSS [ Tampilan Template ]
  5. JavaScript & jQuery [ Fungsi Macam-macam Template ]

Kode XML, hanya memberikan sedikit manfaat saja ke tempate bogger. Jadi kamu cukup fokos menguasai 4 kode diatas saja.

Contoh Susunan kode HTML Template

  1. <?xml version="1.0" encoding="UTF-8" ?> 
  2. <!DOCTYPE html> 
  3. <HTML> 
  4. <head> 
  5. <!- meta tag title, CSS & JavaScript -> 
  6. <head/> 
  7. <body> 
  8. <!- HTML body Kerangka -> 
  9. <sidebar> 
  10. <!- Widget sidebar-> 
  11. </sidebar> 
  12. <footer> 
  13. <!- HTML bawah link -> 
  14. <footer/> 
  15. </body> 
  16. </HTML> 

Maka langkah berikutnya menentukan model desain tema yang mau di buat.

Baca penjelasan Mengubah desain blog

Susunan contoh bagian template yang dibuat :

  1. Model desain bagian kepala tema (Header wrapper)
  2. Model desain bagian menu navigasi (Navigasi)
  3. Model desain bagian body / kerangka (Body wrapper)
  4. Model desain bagian halaman depan postingan (Post wrapper)
  5. Model desain bagian sidebar / samping (Sidebar wrapper)
  6. Memilih model desain jenis Font (Google Font
  • )
  • Menentukan Icon (FontAwesome, Material Icon, IonIcons & SVG
  • ) dan perlengkapan gambar BackgroundFungsi jQuery dan macam JavaScript bisa cari Github
    1. Model desain bagian kaki tema / Footer (Footer wrapper)

    Contoh Gambar Model Desain Tema

    Untuk mencari model desain tema, bisa kamu cari insfirasi dari kumpulan gambar desain model website dibawah ini.

    Freepik | Discover the best free graphic resources about design web, 68,757 resultsFreepik | Graphic Resources for everyoneFree Gallery Website Templates - TemplateMo

    Lalu, langkah berikutnya kita akan menentukan warna tema apa yang digunakan.

    Sebagai saran dari saya, jangan memilih bagian warna cerah model [ Merah & Orange ]

    Arti Warna dan Simbolisme Bagaimana Menggunakan Kekuatan Warna pada Merek Anda

    Untuk mencari warna kusus buat desain tema, bisa lihat contoh model beberapa warna di website ini.

    1. HTML Color Codes
    Material Color WebFlat Ul Color

    Saya pribadi lebih menyukai warna kebagian polos [ Putih & Biru ] karena warna ini sangat cocok digunakan.

    Sebagai respsinsi kita bisa lihat beberapa situs besar contohnya Google, Facebook, Lingkedin & Twitter.

    Tapi kamu bisa pilih sesuai selera sendiri untuk bagian warna tema, tidak mesti sama seperti selera saya.

    NB : Pemilihan warna tema juga sangat berpengaruh dalam hal ini, jadi pastikan menggunakan warna yang enak dipandang.

    Sudah lengkap pada mode dasar pembuatannya, langkah berikutnya adalah melakukan pembuatan kode HTML, CSS & JavaScript.

    Cara disini tidak bisa saya jelaskan lebih lanjut, tapi kamu bisa mempelajari lebih dalam tentang kode HTML, CSS & JavaScript disitus bawah ini.

    Situs diatas sangat cocok buat yang ingin belajar kode dasar HTML, CSS & JavaScript.

    Tips! Belajar lah dulu dengan mengotak-atik tema bawaan dari Blogger, nanti akan paham sendiri berbagai macam fungsi kode

    Kamu harus sabar saat melakukan trial eror dalam pembuatan template di blogspot, sebab ini biasanya bagian paling rumit dan paling banyak memakan waktu.

    Mungkin ada pendapat dari yang lain bisa ditambahkan juga ya!

    Sumber!

    [2] Bos HJN - Panduan Blogging

    [3] W3Schools - Belajar HTML, CSS & JavaScript

    [4] Web Design Tutsplush - Tutorial Web Design

    [5] Canva - Pembuatan Foto & Barner

    [6] Freepik - Images Design Web

    [7] Google Font Web


    Baca Juga