Gini, the easiest way to make the blogger template with a template and then download our brain especial own, so we do not need to create from scratch. Practice for this time we try to use a template that I dah I ever made, downlad material here. Before we start I saranin a new blog lo aja biar gak ngerusak your original blog.
Design Phase
Template that we create here will have four main components namely Background, Header, Footer and Main. as there is in the image below:
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 menjadi seperti ini :
background
header
main 
footer 8. Upload pieces on a webhosting or other file storage services. For example in the Photobucket or geocities etc..
Nha modeng po ra?
Now we enter the preparation stage to the blogger. gini the steps. Ohya I have not downloaded the earlier bahanya, I have not downloaded the first over. Ok here we go:
1. Back to bloggers and to the menu "Edit HTML".
2. You click the "Brows" to do is upload the template before you donwload.
3. Then search the code like this:
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; }
4. Replace the bold text with the location of the background image you create.
5. Find the code like this:
#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}
6. Replace the bold text with the location of your main image.
7. Find the code like this:
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
8. Replace the bold text with a picture header.
9. Find the code like this:
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }
10. Replace the text with bold gambara foter.
11. There are still some things that you should note. try looking for the following codes:
#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }
code width: 898px indicate the width of your blog, you can change it according keinginanmu, but must be tailored to the design width of the image that you create.
#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; }
code width: 445px; is a wide area that contains the main posts, you can change .
#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; }
code width: 153px; wide is the right sidebar. And the code width: 195px; width is the left sidebar. Continue code padding-right: 50px; the distance between any posts or content of the sidebar to the right with the right boundary. Code and padding-left: 10px; is the distance between the content of the sidebar to the left of the left border.
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
code height: 196px; width: 898; size is high and the width of the header, you can adjust them with the size of your header.
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }
code width: 898px; height: 80px; size is wide and high the footer.
12. Well I finished I try to preview the template you have appropriate kah? or destroyed?
13. I have been in the Save.
: f I finally finished the article on creating a template, so tired? but remember once again this is a method to create a template that is easy and simple, so sebenrnya content of the template is more complex, munkin somewhen akan we detail from part-bagina template.
OK Good Luck .............
