Kerangka Template Blogger (Membuat Template Blogger Dari Nol – Bagian 2)

  • Diterbitkan pada
  • July 24, 2020
  • Diposkan oleh
  • Eka Awaludin
Lokasi: Maja, Kabupaten Majalengka, Jawa Barat, Indonesia
Sebelumnya kita telah membuat template blogger yang paling sederhana yang bisa di terima oleh blogger. Di template tersebut hanya terdapat 1 tag b:section yang menampilkan konten postingan blog. Di kesempatan kali ini kita akan menambahkan tag b:section lainnya, yaitu untuk Header untuk menampilkan judul dan deskripsi blog, Sidebar untuk menampilkan widget dan Footer untuk menampilan atribusi dan copyright.

Rancangan

Pertama yang akan kita lakukan adalah membuat rancangan template yang akan kita buat. Dengan kata lain kita akan membuat denah template kita. Untuk gambaran jelasnya tentang rancangan template yang akan kita buat bisa di lihat di gambar berikut ini:
Denah template

Kerangka HTML

Kita akan mulai mengkonversi rancangan yang telah kita buat ke dalam kode. Pertama saya akan membuat kerangka HTML nya dulu dan disini saya menggunakan HTML editor gratisan yaitu VSCode. Sebenarnya banyak yang lebih bagus contohnya adalah Adobe Dreamweaver yang mempunyai fitur realtime preview artinya kita bisa melihat langsung tampilan dari kode yang sedang kita susun, tapi software tersebut berbayar dan mempunyai ukuran yang besar. Singkat cerita saya telah selesai membuat kerangka HTML nya, kodenya bisa dilihat di bawah ini.
Kode ini belum sepenuhnya seperti gambar di atas karena belum di atur tata letaknya menggunakan CSS.

Menambahkan CSS

Lanjut kita akan mengatur desain dan letak DIV kontainer serta DIV lainnya yaitu header, konten, sidebar dan footer menggunakan CSS sehingga nantinya akan menyerupai gambar di atas. Singkat cerita saya sudah menambahkan CSS di kerangka HTML nya sehingga sekarang kode lengkapnya adalah seperti di bawah ini:
Kerangka dasar blog kita sudah jadi dan nantinya kita tinggal menyisipkan tag XML blogger saja ke dalam kode HTML yang telah kita buat. Masih ragu dengan kerangka HTML nya? Coba saja simpan kode di atas sebagai file HTML kemudian buka di browser. Hasilnya akan terlihat seperti gambar di bawah ini.
Kerangka HTML
Ko tampilannya gepeng sih? Tampilannya akan berubah jika nanti sudah diisi konten dari blog. Dan langkah selanjutnya kita akan menyisipkan tag XML blogger ke dalam layout HTML yang kita buat.

Menyempurnakan Kerangka Template

Sekarang kita akan menambahkan tag XML blogger ke kerangka HTML yang kita buat. Di bagian pertama kita telah mengenal XML declaration, tag b:skin, tag b:section dan tag b:widget. Kita juga telah membuat b:section konten dan di kesempatan kali ini kita akan menambahkan lagi b:section lainnya mengikuti rancangan blog kita yaitu b:section header, sidebar dan footer. Singkat cerita saya telah menambahkan tag XML blogger ke kerangka HTML nya sehingga sekarang telah berubah menjadi template XML blogger. Kode lengkapnya sekarang adalah seperti di bawah ini.
Sempurna! Sekarang kita bisa memindahkan kode template ini ke tema di blog percobaan kita, simpan tema lalu lihat blog percobaan kita maka tampilannya akan seperti gambar di bawah ini.
Tampilan blog dengan template buatan kita
Tampilan blognya sesuai dengan rancangan yang telah kita buat tadi bukan? Lalu apa saja yang ada di kode template kita sekarang ini?

CSS Reset

Perhatikan komentar CSS berikut ini:
/* Reset */
Kode setelahnya adalah CSS reset, saya menggunakan nya untuk menghilangkan masalah yang sering timbul akibat inkonsistensi browser seperti line-height, margin, padding dan font-size heading, dan sebagainya. Tool ini dibuat oleh Eric Meyer.

Pengaturan Global

Perhatikan komentar CSS berikut ini:
/* Global */
Kode setelahnya adalah kode CSS yang mengatur segala sesuatu yang ada di dalam tag "body" template kita. Misalnya jenis font, warna background dan lain-lain.
body {
font-family:Arial, Helvetica, sans-serif;
font-size:medium;
font-weight:normal;
background-color:#FFF;
margin:0px;
}
Kemudian setelahnya adalah pengaturan global untuk semua yang berhubungan dengan link blog kita, misalnya warna link, warna link ketika di hover, warna link ketika sudah di klik dan link gambar.
a:link {
color: #2A78B8;
text-decoration: none;
}
a:hover {
color: #7BABD1;
text-decoration: underline;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a img {
border-width:0;
}

CSS Yang Mengatur DIV

Saya bingung mau kasih judul apa tapi yang jelas bagian ini adalah kode CSS yang mengatur DIV yang mempunyai ID "kontainer", "header", "konten", "sidebar" dan "footer".
Di CSS, ID biasanya diawali dengan tanda "#".

CSS Untuk DIV Kontainer

Pertama yang akan kita bahas adalah kode CSS dari DIV yang mempunyai ID "kontainer".
/* Kontainer */
#kontainer {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
Kontainer ini adalah yang menjadi wadah yang mewadahi header, konten, sidebar dan footer. Kalau ga ada kontainer ini tampilan blog kita bakalan berukuran full screen mengikuti resolusi layar karena saya menggunakan % bukan px pada bagian width. Kemudian saya tambahkan max-width untuk mengatur maksimal lebar kontainer, saya mengaturnya jadi hanya menjadi 800px saja. Sedangkan pada bagian margin value nya di atur menjadi "0 auto" adalah supaya kontainer ini berada di tengah. Coba kalian hilangkan bagian margin: 0 auto maka kontainer kita akan berada di kiri. Ajaib!

CSS Untuk DIV Header

Kemudian kita akan membahas kode CSS dari DIV yang mempunyai ID "header".
/* Header */
#header {
display: block;
background-color:#ec3a5c;
height: auto;
width: 100%;
}
Tidak ada yang istimewa di bagian header ini hanya lebarnya saja yang di atur 100% mengikuti lebar kontainer.

CSS Untuk DIV Konten

Lalu kita akan membahas kode CSS dari DIV yang mempunyai ID "konten".
/* Konten */
#konten {
display: block;
background-color:#2368a2;
float: left;
width: 70%;
}
#konten.konten.section {
width:100%;
}
Lebar bagian konten dibuat 70% dari lebar kontainer. Kita menyisakan 30% nya lagi untuk sidebar. Dan kita menggunakan float untuk mengatur letak elemen konten. Untuk kasus kita value dari float itu sendiri adalah di bagian kiri agar mengikuti rancangan yang kita buat.

CSS Untuk DIV Sidebar

Kemudian kita akan membahas kode CSS dari DIV yang mempunyai ID "sidebar".
/* Sidebar */
#sidebar {
display: block;
background-color:#ebba16;
float: left;
width: 30%;
}
#sidebar.sidebar.section {
width:100%;
}
#sidebar .widget {
padding:20px;
}
Dan sidebar mengisi 30% kekosongan yang di tinggalkan bagian konten. Untuk value float nya sebenarnya bisa di kiri atau di kanan, tapi saya memilih sebelah kiri saja.

CSS Untuk DIV Footer

Kemudian kita akan membahas kode CSS dari DIV yang mempunyai ID "footer".
/* Footer */
#footer {
display: block;
background-color:#23a24d;
height: auto;
width: 100%;
}
Tidak ada yang istimewa di bagian "footer" ini hanya lebarnya saja yang di atur 100% mengikuti lebar kontainer sama seperti bagian header.

Bagian Utama Kerangka

Untuk selanjutnya kita bakalan membahas DIV yang mempunyai ID "kontainer". Seperti yang sudah saya jelaskan tadi DIV yang mempunyai ID "kontainer" adalah yang menjadi wadah atau yang jadi frame dari DIV yang mempunyai ID "header", "konten", "sidebar", "footer" dan itu bisa dilihat jelas disini.
Sedangkan DIV yang mempunyai ID "header" dan yang lainnya menjadi wadah untuk b:section yang juga jadi wadah b:widget. Bisa dilihat setiap DIV mempunyai ID yang jadi penanda yang menghubungkan HTML ke CSS. Rumit juga yah menjelaskannya (maklum saya juga masih belajar). 😟
Satu lagi kode yang bisa di katakan ajaib adalah kode di bawah ini.
<div style="clear: both;"/>
Ini berarti apapun yang berada setelah kode ini akan pindah ke garis baru. Kode ini memisahkan atau memotong rangkaian blok DIV di template kita setelah sidebar. Jika tidak ada kode ini bagian "footer" akan sejajar dengan bagian "konten" dan "sidebar". Ajaib!
Click to Expand