Cara Mengubah Ukuran Template Dan Elemen Blog

 

 

 

 

 

 

 

 

 

 

 

 

 

Bagaimana Cara Mengubah Ukuran Template Dan Elemen Blog?

 

Perhatian:

Jika lebar salah satu dari (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi keserasian elemen yang lain. Oleh karena itu, jika sobat ingin mengubah lebar salah satu elemen, maka sobat juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog sobat akan menjadi kacau, sobat tidak mau kan kalau tujuan sobat yang mulanya ingin menyesuaikan tampilan blog sobat sesuai keinginan dan selera sobat malah justru merusak blog sobat sendiri. Seperti yang sudah saya bilang diatas, jangan langsung di save melainkan di pratinjau terlebih dahulu, jika sudah sesuai dengan keinginan sobat barulah sobat save.

 

Tahap pertama :

* Login ke Blog sobat
* Klik Tata Letak
* Klik Edit HTML
* Copy dulu template sobat (rekomendasi).

UNTUK MENGUBAH UKURAN HALAMAN BLOG
Cari kode di bawah ini:

Spoiler:

 

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Halaman Blog, sobat cukup mengubah angka pada width sesuai dengan keinginan sobat

UNTUK MENGUBAH UKURAN HALAMAN POSTING
Cari kode di bawah ini:

Spoiler:

 

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

 

UNTUK MENGUBAH UKURAN SIDEBAR BLOG
Cari kode di bawah ini:

Spoiler:

 

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

UNTUK MENGUBAH UKURAN HEADER BLOG
Cari kode di bawah ini:

Spoiler:

 

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

UNTUK MENGUBAH UKURAN FOOTER BLOG
Cari Code di bawah ini:

Spoiler:

 

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

Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F untuk  mengubah semua ukuran yang di atas, sobat cukup mengubah angka pada width sesuai keinginan sobat.
 

Sobat  sekarang sedang membaca artikel tentang cara mengubah ukuran template dan elemen blog, semoga bermanfaat.