Cara Membuat Template Blogger

Template yang disediakan Blogger lewat menu Tata Letak > Pilih Template Baru hanya terdiri dari (kalau nggak salah) 38 jenis template. Dengan begini, template anda juga bisa sama dengan template blog lain. Anda bisa sih, memakai template gratisan yang tersebar di dunia ayam maya. Tetapi juga bisa saja template blog anda sama dengan template blog yang lainnya. Nah, solusinya, anda bisa membuat template blog sendiri. Sulitkah? Oh, tentu saja tidak, bahkan sangat menyenangkan apabila anda menikmati pekerjaan membuat template ini. Anda hanya perlu pengetahuan tentang HTML, CSS, dan bahasa XML Blogger.

Pertama-tama, anda bisa membuat gambarnya terlebih dahulu. Buatlah gambar untuk background body, header, kolom posting, dan kolom sidebar. Untuk background body, bikinnya bisa kecil-kecil aja (sekitar 200 x 200). Karena nanti backgroundnya akan diulang-ulang (repeat). Untuk header, anda bisa buat lebar (lebarnya misalnya 660 x 100, karena akan menggunakan kode: repeat-y), atau buat besar (;ebarnya sekitar 660 x 300, karena akan menggunakan kode no-repeat). Untuk kolom main dan sidebar, bikinlah gambar yang lebar (misalnya untuk main 410 x 50. 400 kesamping, 10 kebawah. Dan untuk sidebar misalnya 200x50). Karena gambar untuk kolom main akan diulang-ulang ke bawah (repeat-y). Untuk kolom footer anda bisa menggunakan gambar ataupun warna. Apabila menggunakan gambar, maka buatlah gambar yang lebar juga (karena akan menggunakan kode repeat-y).

Lalu hitunglah lebar antara main dan sidebar. Lebar outer wrapper yang ideal adalah:

main wrapper + sidebar wrapper + 20

Misal:

Misal main wrapper adalah 450 px. dan sidebar wrapper=-nya adalah 250 px. Maka lebar main wrapper yang ideal adalah: 450 + 250 + 20 = 720 px.

Kalau sudah, anda bisa mengupload gambar-gambar tersebut ke image hosting. Lalu, buatlah blog baru dengan template Minima Putih. Lalu lakukan langkah-langkah berikut.

1. Tujulah Tata Letak > Edit HTML.

2. Cari kode:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

3. Ganti kode berikut sehingga menjadi:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

}

Ganti URLGAMBARBACKGROUND dengan URL gambar anda. Kode repeat disampingnya berfungsi untuk mengulang background secara horizontal dan vertikal.

4. Cari kode berikut:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

5. Ganti sehingga menjadi seperti ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(URLGAMBARHEADER) repeat-y;
}

Ganti tulisan URLGAMBARHEADER dengan URL gambar header anda. Lalu ganti juga tulisan repeat-y dengan no-repeat apabila anda ingin menggunakan gambar yang besar. Jika anda ingin membuat gambar yang besar, tambahkanlah kode center supaya backgroundnya terletak ditengah-tengah. Jadi seperti ini.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(URLGAMBARHEADER) no-repeat center;
}

6. Cari kode:

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ubah kodenya menjadi seperti ini.

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background:url(URLGAMBARMAINWRAPPER) repeat-y;
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background:url(URLGAMBARSIDEBARWRAPPER) repeat-y;
}

Ganti:

• 660px dengan lebar outer wrapper ideal
• 410px dengan lebar gambar main wrapper
• 220px dengan lebar gambar sidebar wrapper
• URLGAMBARMAINWRAPPER dengan URL gambar main wrapper.
• URLGAMBARSIDEBARWRAPPER dengan URL gambar sidebar wrapper.

7. Cari kode:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Ubah:

a. Untuk yang menggunakan warna, ubah dengan:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background:WARNAYANGDIINGINKAN;
}

Ganti 660px dengan lebar ideal outer wrapper. Ganti juga WARNAYANGDIINGINKAN dengan kode hex dari warna yang diinginkan.

b. Untuk yang menggunakan gambar, ubah menjadi:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background:url(URLGAMBARFOOTER) repeat-y;
}

Ganti URLGAMBARFOOTER dengan URL gambar footer yang diinginkan.

9. Lalu simpan.

Sebenarnya sih, tidak harus begitu juga... Anda bisa menggunakan kreatifitas anda. Misalnya membuat kolom menjadi 3 kolom, atau menambah hiasan lainnya. Pokoknya, sesuai kreatifitas anda...

Selamat mencoba, semoga berhasil, dan semoga artikel ini bermanfaat.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya