RESIZE SEMULA LAYOUT DI BLOGGER

Step by Step Instruction to Resize or Expand Blogger Layouts

Assalamualaikum,
Tgh Sebok2 Pasang Templat at Blog tibe2 saiz layout sume berubah...adoyai dah satu hal kne setup smule beberapa benda, saneb baik lah S4y0R ade jumpe 1 blog ni dy ade aja mcm mne nk buat saiz layout ikot kemahuan kite sendiri..haa kan senang mcm 2..jadi supaya S4y0R sendiri x lupe mcm mne nk buat, S4y0R msok kan lah artikle ni bukan untuk S4y0R sje tapi buat Pembaca semua...

Okay, S4y0r menganggap bahawa , sekarang, anda faham dengan jelas masalahnye.jadi mari kite blaja bersama... :)

The Explanation of Blogger Layouts

Outer-wrapper is the whole body element that holds the header, post content, sidebar, and also the footer.

• Main-wrapper is the post content element where all of your articles are published in this part.
• Sidebar-wrapper is the sidebar element of your blogger layouts, where all the widgets of your blog are put in this place.
• Footer-wrapper is the last part from the blogger layouts, the bottom element of your blog, where you can usually see the credit section regarding the designer of the template.

So let’s proceed to the tutorial. In this post, i want to explore more about resizing the blogger layouts.

1. Login to Blogger

Go to Blogger.com and sign in to your account.

2. Go to Layout

In the Dashboard, Go to Layout/Design > Page Element.

3. Go to Edit HTML

In the Layout/Design tab, press the sub-tab Edit HTML. Anyway, before implementing all the steps in this article, i strongly insist you to create a back up template if later, you want to revert back the template to normal again.

4. Find the code that defines the outer wrapper and header wrapper

Press CTRL + F and find the outer-wrapper in your template

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

For example, I want to expand the size of my blogger layouts from 660px to 1000px, and currently, the size of outer wrapper is 660px. So the first thing to do is to expand the size of outer wrapper from 660px to 1000px. To do this, now, replace the value 660px of the outer wrapper with 1000px.

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 1000px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

5. Save the change

To see what exactly happens if we replace the value from 660px to the 1000px, now save the change by pressing the save templates button

6. Go to Page Element

To see the result on the recent change you've just made to the outer-wrapper, now go to Page Element tab.

As you can see in the picture above:

• At the picture number 1, you can see the difference between the outer-wrapper that had a width size 660px.
• And in the second picture (number 2) the width size of outer wrapper has been successfully expanded into the new width size, 1000px.

7. Adjust the width size of post content and sidebar element

Okay, now the whole body layout of your blog template has been successfully expanded from660px to the 1000px width size. The next thing and important to do is we have to adjust the width size of the header element which currently hasn't been expanded yet. But, why exactly we have to make an adjustment of the header element to follow the width size of outer wrapper? Okay, the answer is as follow.

As you can see on the picture above, you will notice that, the width size of header element hasn't been expanded yet, so the header looks very small compared to the body layout (outer-wrapper). And in the preview, if we want to see how our blog looks like, we will get a very small header on center position. Take a look at the picture below!

8. Find the code that defines the header element 

The next step is, we have to find where is the CSS that defines the header element of our blogger layouts. Now press Ctrl + F and find the CSS below :

/* Header 
-----------------------------------------------*/

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

So, in order to expand the size of the header element, we have to adjust the value from 660pxinto the new adjustment size of the new body layout. Now change the value 660px to the 1000px.

/* Header
-----------------------------------------------*/

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

9. Save the change

Now press the Save Templates button and go to the Page Element once again.

10. Adjust the width size of post content element (main wrapper)

Now, we are close in finishing this article. After making an adjustment of your body layout along with the header element, the last part that we need to do is, we have to make an adjustment of the main wrapper or the element that holds all of your articles/post.

11. Find the code that defines the post content element

Press Ctrl + F and find this CSS :

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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 */

12. Change the values of main-wrapper and sidebar-wrapper

Now, before we go further in changing the values of main-wrapper and sidebar-wrapper, you all must know that, in expanding the size of main-wrapper and sidebar-wrapper, we cannot put any random number to this elements. Okay, let me explain it to you more thoroughly.

Main-wrapper is placed on the same position with the sidebar-wrapper (horizontally), so if we expand the width size of main wrapper with a random/oversize number (for example : 700px), it will drag down the sidebar element to the bottom position of the template. Take a look at the picture below!

So if we don't want that problem happens to us, this is what we are gonna do. Now change the value of main-wrapper from 410px to the 600px and then change the value of sidebar-wrapper from 220px to the 300px.

#main-wrapper {
width: 600px;
float: $startSide;
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: 320px;
float: $endSide;
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 */

As the final result, now you have perfectly expanded the template layout of your blog.

Blog Posts element and Sidebar element fit perfectly on the layout

Okay, enough with this expanding blogger layouts tutorial. I think i need to rest my arms guys because i am so exhausted typing these 1300 words article. So see you at my next posts. Oh yeah, i almost forget to tell you something. Anyway, if you have some question regarding this topic, you can just shout out on my comment box below and let me hear your voice, and we can talk about it further.

I'm Out...

Diambil Daripada http://www.whatmakesblog.com