Cara Mengubah Ukuran Template Dan Elemen Blog

Cara Mengubah Ukuran Template Dan Elemen Blog

Jika sahabat yang membaca artikel ini adalah orang yang memiliki sebuah Blog dan sedang mencari sebuah artikel yang membahas tentang cara mengatur ukuran konten yang terdapat pada blog shabat mungkin itu meliputi Mengubah Ukuran Halaman Blog, Mengubah Halaman Posting, Mengubah Ukuran Header, Mengubah Ukuran Sidebar, atau Mengubah Ukuran Footer. Tenang saya akan membahas semuanya sekaligus ^_^. Mungkin Sahabat sulit menemukan Template Blog yang cocok dengan selera sahabat dan utamanya bahwa Template Blog diibaratkan seperti sebuah tampilan rumah yang indah, bagus, dan mempesona agar banyak orang yang ingin berkunjung di Blog sahabat.


Tapi bukan hanya tampilan saja yang digunakan melainkan tata letak dan ukuran setiap konten haruslah sesuai dengan isi dari blog itu sendiri, mungkin juga sahabat ingin mengedit ukuran inilah itulah agar semua terlihat seperti keigninan sahabat. Ok kita langsung saja ke TKP, saya akan memberikan caranya walau ini hanya ilmu yang sangat mudah tapi cukup membantu dikala sahabat sedang membutuhkannya.

Langkah awal :
- Login ke Blog sahabat
- Klik Tata Letak
- Klik Edit HTML

- Saya sarankan sebelum Mengedit HTML di Blog sahabat, silahkan sahabat BackUp Template sahabat  terlebih dahulu agar nantinya jika terjadi sesuatu yang tidak di inginkan sahabat bisa memasang template semula yang belum sahabat Edit HTML nya. (dan setelah di Edit jangan langsung di save, cukup di Pratinjau lebih dahulu, bila sudah sesuai dengan keinginan sahabat barulah sahabat save hasil Editan tadi).

Untuk mengubah ukuran Halaman Blog

Cari kode di bawah ini:


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

Keterangan:

Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F

Untuk mengubah ukuran lebar Halaman Blog, sahabat cukup mengubah angka pada width sesuai dengan keinginan sahabat.

Untuk mengubah ukuran Halaman Posting

Cari kode 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 */
}

Keterangan :

Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F

Untuk mengubah ukuran lebar Halaman Posting, sahabat cukup mengubah angka pada width sesuai dengan keinginan sahabat.

Untuk mengubah ukuran Sidebar Blog

Cari kode di bawah ini:

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

Keterangan :

Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F

Untuk mengubah ukuran lebar Sidebar Blog, sahabat cukup mengubah angka pada width sesuai dengan keinginan sahabat.

Untuk mengubah ukuran Header Blog

Cari kode di bawah ini:

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

Keterangan :

Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F

Untuk mengubah ukuran lebar Header Blog, sahabat cukup mengubah angka pada width sesuai dengan keinginan sahabat.

Untuk mengubah ukuran Footer Blog

Cari Code di bawah ini:

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

Keterangan :

Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F

Untuk mengubah ukuran lebar Footer Blog, sahabat cukup mengubah angka pada width sesuai dengan keinginan sahabat.

Perhatian:

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