BLoG Li - MeLeBaRKaN RuaNG BLoG

Assalamualaikum..

Hari ini, li nak kongsi dengan rakan-rakan, bagaimana hendak mengubahsuai dengan memperbesarkan ruangan blog agar berpadanan dengan ruangan yang telah diberikan. Cakap banyak pun memeningkan, elok rasanya li mulakan penerangan dengan bantuan gambarajah.

(Laman Utama Blogger)

Seperti biasa, daftar pada blogger.

# Klik menu Layout.

# Klik menu Edit HTML.

Cari kod seperti di bawah ini:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

gantikan nilai 660px dengan nilai yang lebih besar, sebagai contoh 770px seperti contoh di bawah:

#header-wrapper {

width:770px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Jika rakan-rakan menggantikan dengan nilai 950px, hasilnya adalah seperti berikut:

(header-wrapper:660px)

(header-wrapper:770px)

(header-wrapper:950px)

-------------------------------------------------------------------------------------------------

Cari kod seperti di bawah ini:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

gantikan nilai 660px dengan nilai yang lebih besar, sebagai contoh 770px seperti contoh di bawah:

#outer-wrapper {

width: 770px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

(outer-wrapper:770px)

Tujuannya adalah untuk mengimbangkan kelebaran utama tajuk blog (blog title), oleh itu, nilai header-wrapper dengan outer-wrapper hendaklah sama.

-------------------------------------------------------------------------------------------------

Cari kod seperti di bawah ini:

#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 */

}

gantikan nilai 410px dengan nilai yang lebih besar, sebagai contoh 510px seperti contoh di bawah:

#main-wrapper {

width: 520px;

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 */

}

Tujuannya adalah untuk menyesuaikan kelebaran catatan blog (Configure Blog Posts) agar bersesuaian dengan perubahan yang telah dilakukan seperti bawah.

(main-wrapperr:410px)

(main-wrapperr:520px)

-------------------------------------------------------------------------------------------------

Cari kod seperti di bawah ini pula:

#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

gantikan nilai 660px dengan nilai yang sama dengan di atas, sebagai contoh 770px seperti contoh di bawah:

#footer {

width:770px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Tujuannya adalah untuk mengimbangkan kedudukan footer di bahagian bawah, agar berada di bahagian yang bersesuaian dengan perubahan yang telah dilakukan.

(footer:660px)

(footer:770px)

Akhir sekali klik pada Save Template.

Begitulah sedikit sebanyak melebarkan blog secara manual. Bagi rakan-rakan yang mahu membuat 3 kolum pada blog, sila layari blog bersama Cikgu Anaiz.

Bertemu lagi. Wassalam.