Cara Membuat Template di Blogger

Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku
buat,

downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru
aja biar gak ngerusak blog asli kamu.



Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu

Background, Header, Main dan Footer.


seperti yang ada dalam gambar berikut:













Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu
harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint
dll. Cara pembuatan desainya lebih jelasnya seperti ini:

1. Buat desain seperti gambar diatas


2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan
   berulang-ulang).


3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom
   atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan
   sidebar.


4. Kemudian potong-potong perbagian


5. Untuk bagian Header motongnya harus full.


6. Bagian background, main dan footer motongnya sedikit aja karena bersifat
   "tile"


7. Desain diatas kalo dipotong-potong akan terdiri dari :
   background
   header
   main
   footer
   


8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan
   penyimpanan file lainya.

Ok kita mulai:

• Kembali ke blogger dan ke menu "Edit HTML".


• Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload
  tadi.


• Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px;
text-align: left; font:$bodyfont; color:$textcolor; background: #323232
url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }

• Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu
  buat.


• Cari kode seperti ini :

#center {background: #ffffff
url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

• Ganti text yang dicetak tebal dengan lokasi gambar main kamu.


• Cari kode seperti ini:

#header { margin: 0; height:196px;
width:898; color: $pagetitlecolor; background:
url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

• Ganti text yang dicetak tebal dengan gambar header.


• Cari kode seperti ini:

#footer { margin: 0; width: 898px;
height:80px; padding: 0px; background:
url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

• Ganti text yang dicetak tebal dengan gambara foter.


• Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode
  berikut:

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

• menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai
  keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu
  buat.

#main { float: left; width: 445px;
margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap:
break-word; /* fix for long text breaking sidebar float in IE */ overflow:
hidden; }kode width: 445px;

• adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#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; }

• kode width: 153px; adalah lebar sidebar bagian kanan.


• Dan kode width: 195px; adalah lebar sidebar bagian kiri.


• Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar
  sebelah kanan dengan garis batas kanan.


• Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan
  garis batas kiri.

#header { margin: 0; height:196px;
width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg')
no-repeat top center; }kode height:196px;

• width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa
  menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px;
height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg')
no-repeat top center; }

• kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian
  footer.


• Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah?
  atau hancur?


• Kalo sudah di Save.:


• akhirnya selesai juga aku buat artikel tentang pembuatan template, capek
  ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan
  sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin
  kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.OK
  SELAMAT BERJUANG......

Silahkan dibaca juga kelanjutannya dibawah ini