Learn More

Friday, December 30, 2011

How To Making Blogger Template Part 5

After you read our post about how to making blogger template part 4, now on this posting we will guide you for making your first template. For that purpose, we recommend you to create a new blog from your blogger account. When you success making blogger template, please for not objection to add a link for www.threelas.com as a form thanks from you.

Imagine Your Blog

Now, imagine there are a lot of people seeing your blog from a computer or laptop screen. No matter how big that screen. The area of screen will painted by body tag. So the first time when making a template is draw the body. We had discussed this on how to making blogger template part 3. Then see the picture below

template plan

The outer white solid line is referring to body tag. Remember, body tag will paint all browser windows. All the white solid line box inside body tag is refer to division tag. If the solid line is inside other solid line, then its meaning that division tag will embeded inside other solid line. When we see all solid line inside body tag, there are 11 solid line, so it also refer to 11 division tag with specified id (such as header id, attribution id, etc.). Let talk one example from the picture above, sidebar id and postside id are inside mainside id, so division tag for sidebar id and postside id must embeded inside division tag for mainside id. Green color on the picture above is refer to margin area and the orange color is refer to padding area, inside dashed line refer to section area. From this definition, we can write the html code as follow

And for the css code is written as follow

Until here, you are finish making your template. But its still less style for text, widget, and also for post content. For fill that, you can learn css in here.

  1. Kapan selesainya seri postingan how to making blogger!!!

  2. Untuk Beben:
    Kami masih ada beberapa posting lagi tentang ini. Agar lebih mudah dimengerti oleh teman2.

  3. terpaksa nunggu kelar dolo baru saya sharing deh...xixixixi

  4. Ms. I want to ask .... how to make an appearance posting a small thumbnail image and displays the dithumbnail post.,,,,

    1. If you want to show a small thumbnail and display that thumbnail, may be you need learn about blogger json api. We have explained that complete.