Cara Membuat Template Blogger Sederhana

Membuat template Blogger bisa dilakukan dengan mudah dengan metode sederhana yaitu mengedit template yang sudah ada. Meskipun metode ini sederhana, hasilnya bisa sangat indah tergantung bagaimana Anda mendesainnya. Tutorial ini tidak membuat template Blogger dari awal, tetapi dengan mengedit template yang ada. Sebelum memulai, disarankan untuk membuat blog baru untuk menghindari kerusakan pada blog Anda yang sudah ada.

Persiapan

Download Template: Unduh template dasar yang akan diedit. Download template.
Buat Desain: Desain template akan terdiri dari empat elemen utama (Latar Belakang, Header, Utama, dan Footer) seperti gambar di bawah ini:
Desain Empat Elemen: Gunakan perangkat lunak pengedit gambar seperti Adobe Photoshop, Corel Draw, atau Paint untuk membuat desain.
Unggah Gambar: Unggah gambar elemen yang telah Anda buat ke layanan hosting gambar seperti Photobucket atau web hosting seperti Geocities.

Langkah-Langkah

Masuk ke Blogger:
- Buka Blogger dan masuk ke menu "Layout --> Edit HTML".
Unggah Template:
- Klik tombol "Browse" untuk mengunggah template yang telah Anda unduh.

Edit CSS untuk Latar Belakang:

Cari kode berikut:

css
body { 
  margin: 0px; 
  padding: 0px; 
  text-align: left; 
  font:$bodyfont; 
  color:$textcolor; 
  background: #323232 url('http://blogoholic.info/files/bg.jpg') repeat-x top left; 
}

Ganti teks yang dicetak tebal dengan lokasi gambar latar belakang Anda.

Edit CSS untuk Bagian Utama:

Cari kode berikut:

css
#center {
  background: #ffffff url('http://blogoholic.info/files/body.jpg') repeat-y top center;
}

Ganti teks yang dicetak tebal dengan lokasi gambar bagian utama Anda.

Edit CSS untuk Header:

Cari kode berikut:

css
#header {
  margin: 0; 
  height:196px; 
  width:898px; 
  color: $pagetitlecolor; 
  background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; 
}

Ganti teks yang dicetak tebal dengan lokasi gambar header Anda.

Edit CSS untuk Footer:

Cari kode berikut:

css
#footer {
  margin: 0; 
  width: 898px; 
  height:80px; 
  padding: 0px; 
  background: url('http://blogoholic.info/files/foot.jpg') repeat-y top center; 
}

Ganti teks yang dicetak tebal dengan lokasi gambar footer Anda.

Atur Lebar dan Tinggi Elemen:

Cari kode berikut dan sesuaikan lebar dan tinggi sesuai gambar Anda:

css
#outer-wrapper {
  width: 898px; 
  margin: 0px auto 0; 
  text-align: justify; 
}

#main {
  float: left; 
  width: 445px; 
  margin: 5px; 
  padding: 0px 0px 0px 10px; 
  line-height: 1.5em; 
  word-wrap: break-word; 
  overflow: hidden; 
}

#sidebar {
  float: right; 
  width: 153px; 
  padding-right: 50px; 
  font-size: 83%; 
  color: $sidebartextcolor; 
  line-height: 1.4em; 
  word-wrap: break-word; 
  overflow: hidden; 
}

#ads-wrapper {
  float: left; 
  width: 195px; 
  padding-left: 10px; 
  word-wrap: break-word; 
  overflow: hidden; 
}

#header {
  margin: 0; 
  height:196px; 
  width:898px; 
  color: $pagetitlecolor; 
  background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; 
}

#footer {
  margin: 0; 
  width: 898px; 
  height:80px; 
  padding: 0px; 
  background: url('http://blogoholic.info/files/foot.jpg') no-repeat top center; 
}

Pratinjau dan Modifikasi:
- Modifikasi template sesuai keinginan Anda dan pratinjau hasilnya sampai terlihat baik.
Simpan Perubahan:
- Jika tampilan sudah sesuai dengan keinginan, simpan perubahan yang telah dilakukan.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda bisa membuat template Blogger yang sederhana namun menarik. Pastikan untuk menguji template pada berbagai perangkat untuk memastikan tampilannya responsif dan menarik.

Selamat mencoba dan semoga berhasil!

Ruli Lesmana