Membuat blog sangat mudah dengan blogger. Blogger adalah layanan penerbitan blog terkenal yang memungkinkan pengguna membuat blog luar biasa secara gratis. Namun, diperlukan sedikit pengetahuan pengkodean HTML, CSS, dan Javascript. Ini tidak terlalu sulit. Setelah Anda memutuskan untuk mempelajari “Cara membuat template Blogger dari awal”, dengan beberapa konsep dasar, Anda siap untuk memulai.

Bagaimana Cara Membuat Template Blogger? Tutorial untuk Pemula

Mari kita mulai dengan membuat kode xhtml paling sederhana

Masuk pada dashboard kemudian pilih tema dan edit html.

Buat Kerangka Template Mentah dan Minimal

Kita akan mulai dengan membuat kerangka mentah dari template. Ini membantu kita dalam memahami struktur dan tata letak template dengan cara yang mudah.

Gunakan kode editor seperti VSCode atau Notepad++ atau bisa langsung dalam bloggernyaa untuk membuat template ini. Hapus semua

1<?xml version="1.0" encoding="UTF-8" ?> 
2<!DOCTYPE html> 
3<html lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'> 
4  <head> 
5  </head> 
6  <body> 
7  </body> 
8</html>

klik simpan..

maka akan muncul There should be one and only one skin in the theme, and we found: <b>0</b> ini mengindikasikan bahwa template membutuhkan tag <b></b> elemen Layout dari Blogger yang dapat digunakan.. Ada ketentuan untuk tag <b></b> ini.. Sebelum lanjut, berikut keterangan kode diatas

  • Baris paling pertama dari template mendeklarasikannya sebagai dokumen XML. Sangat penting agar browser web dapat mem-parsing dan memproses kode template dengan cara yang benar.
  • Baris berikutnya <!DOCTYPE html> menentukan bahwa kita akan menggunakan kode HTML5 dalam dokumen XML kita.
  • Atribut yang ditambahkan ke <html> tag mendeklarasikan ruang nama XML untuk dokumen tersebut. Itu juga memiliki atribut bahasa untuk dokumen. Jika Anda membuat kode template dalam bahasa selain bahasa Inggris, ubah kode bahasanya misalkan dengan lang='id-ID untuk bahasa Indonesia.
  • Bagian tag metadata <head> ini mencakup berbagai tag meta, CSS dan bisa juga javascript.
  • Tag <body> di mana desain dan tata letak akan diisi kode tata letak.

Menambahkan Tag Meta

Mari lanjutkan ke langkah berikutnya dan tambahkan tag metadata dasar dan esensial ke bagian <head> tersebut.

1<head> 
2  <b:include data='blog' name='all-head-content' /> 
3  <title><data:blog.pageTitle/></title> 
4  <meta content='width=device-width, initial-scale=1' name='viewport' /> 
5  <b:skin> 
6    <![CDATA[ /* Custom CSS rules goes here... */ ]]> 
7  </b:skin>
8</head>

Klik simpan, maka akan muncul tulisan We did not find any section in your theme. A theme must have at least one b:section tag.. Itu artinya dibutuhkan minimal ada tag <b:section> yang merupakan elemen Layout dari Blogger yang dapat digunakan sebagai wadah/container dari Widget/Gadget Blogger.

Keterangan:

  • Tag pertama menambahkan beberapa tag SEO <b:include> terpenting dalam bagian ini. Ini termasuk tag deskripsi halaman yang sangat penting juga.
  • Tag menambahkan judul halaman ke bagian head. Semua tag ini penting untuk mesin telusur dan perayap.
  • Tag <meta content='width=device-width, initial-scale=1' name='viewport' /> digunakan untuk layout responsif untuk mengaktifkan mode desain responsif sehingga tata letak dirender dengan baik pada perangkat yang lebih kecil juga.
  • Tag <b:skin> mencakup semua kode CSS untuk membuat tata letak dan desain blog. Saat ini, kosong dan akan diisi dengan aturan CSS yang relevan pada tahap selanjutnya.

Selanjutnya kita tambahkan tag <b:section> didalam tag <body>

Menambah elemen pada Body

Menambah tag section

Bagian merangkum semua elemen yang dilihat oleh pengunjung situs dalam browser web. tag minimal pada blog adalah header, main, aside, footer. Didalam nya baru kita masukkan tag <b:section>.

Mari kita mulai dengan menambahkan kode berikut

 1<body> 
 2  <header>
 3    <b:section class='header' id='header'/>
 4  </header>
 5  <main>
 6    <b:section class='artikel' id='main'/>
 7  </main>
 8  <aside>
 9    <b:section class='sidebar' id='aside'/>
10  </aside>
11  <footer>
12    <b:section class='footer' id='footer'/>
13  </footer>
14</body>

Keterangan

  • Bagian <header> ini mencakup judul dan deskripsi blog. Dapat juga berisi logo. Tag <b:section> merupakan elemen Layout dari Blogger yang dapat digunakan sebagai wadah/container dari Widget/Gadget Blogger. tag <b:section> harus ada yaaa dalam template blogger..
  • Bagian <main>. Bagian untuk posting blog utama tempat semua artikel tertulis muncul di halaman.
  • Bagian <aside> tag HTML5 untuk sidebar. Meskipun tidak wajib untuk menggunakannya dan dapat dengan mudah diganti dengan tag biasa.

Penjelasan tambahan:

  • Setiap Tag <b:section> dapat diletakkan di dalam tag <body>.
  • Tag <b:section> hanya dapat terdiri dari tag <b:widget>.
  • Tag <b:section> tidak dapat saling menumpuk. Dengan kata lain, kita tidak dapat memasukkan tag <b:section> di dalam tag <b:section>.
  • Pada template Blogger, setidaknya harus ada satu tag <b:section>.