MEMPERLEBAR HALAMAN PADA BLOG

-->

Sumber Gambar: services-center.blogspot.com

Sobat.. mau bahas masalah, bagaimana mamperlebar blog. Ini ada sedikit langkah - langkah buat memperlebar blog sobat. Kalau sobat kira - kira membutuhkan ruang lebih lebar diblognya, sobat bisa ikuti langkah/trik Sbb :

1. Klik tata letak lalu edit html
2. Ingat tidak usah memberikan tanda centang pada kolom expand template widget
3. Cari kode css seperti ini:
#outer-wrapper
4. Tekan ctrl+f lalu copy paste kode diatas
5. Kalau sudah ketemu, maka akan tampak kode seperti berikut :

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

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

Penjelasan :
#outer-wrapper --> kode untuk lebar halaman blog.
#main-wrapper --> kode untuk lebar postingan blog
#sidebar-wrapper --> kode untuk lebar sidebar blog.

Untuk merubah lebar halaman blog, Sobat tinggal mengganti angka – angka yang terdapat pada setiap kode css diatas. Semakin besar angkanya, maka halaman blog pun semakin lebar. Contoh : Misalnya, sobat ingin mengganti lebar halaman blog menjadi 950 pixel. Maka silahkan ganti jumlah angka pada tag width untuk kode css #outer-wrapper menjadi --> 950px; Sehingga hasilnya seperti dibawah ini :

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

Nah…setelah mengganti kode #outer-wrapper, jangan lupa untuk mengganti kode tag width pada #main-wrapper dan #sidebar-wrapper juga. Karena jika tidak diganti maka jarak antara halaman posting dan sidebar blog akan sangat lebar. Untuk mengantisipasinya, rubah juga angka pada tag width #main-wrapper dan #sidebar-wrapper menjadi 500px untuk #main-wrapper dan 400px untuk #sidebar-wrapper. Sehingga menjadi:

#main-wrapper {
width: 500px;
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: 400px;
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 merubah lebar kolom pada #main-wrapper dan #sidebar-wrapper, harus sesuai dengan lebar kolom pada #outer-wrapper. Misalnya, lebar halaman blog 950px maka jumlah dari lebar postingan dan sidebar blog harus kurang dari 950px. Hal ini dikarenakan supaya postingan blog dan sidebar blog tidak berdempetan dan mempunyai jarak antara keduanya. Jarak antara postingan dan sidebar bisa disesuaikan dari 30px s.d 50px.

Nah…setelah merubah lebar bagian blog diatas, ada satu bagian lagi yang harus dirubah yaitu bagian bawah blog. Sobat tinggal mencari kode #footer-wrapper dan rubah angka pada tag width-nya menjadi sama dengan lebar halaman blog (#outer-wrapper).

Jika semua bagian telah mengalami perubahan, maka sebelum nge-save template lebih baik melihat dulu hasil perubahan dengan mengklik pratinjau. Jika memang sudah sesuai baru di save. Jika belum sobat tinggal klik bersihkan edit / clear edit untuk mengembalikan perubahan-perubahan yang telah terjadi pada template.
Ok….selamat mencoba.

____________________________________________________________________________________

____________________________________________________________________________________

EXPAND PAGE TO BLOG

widen my friend .. to discuss the problem, how mamperlebar blog. Here is some steps - steps for widening blog buddies. If my friend think - think need diblognya wider space, my friend can follow the steps / tricks as follows:

1. Click the layout and edit html

2. Remember do not give a check mark in column template widget

3 expand. Search css code like this:

#outer-wrapper

4. Press ctrl f and then copy and paste the code diatas

5. If you've met, it will look like the following code:

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

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

Explanation:

#outer-wrapper --> code for blog page width.
#main-wrapper --> code for wide blog posting.
#sidebar-wrapper --> code for blog sidebar width.

To change the width of the page blog, my friend lives changed numbers - numbers that are available at the above css code. The greater the number, the blog pages even more broadly. Example: For example, my friend wants to replace the blog page width to 950 pixels. So please change the number on the tag number to the code width css #outer-wrapper a -> 950px; As a result as below:

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
} Well ... after changing the code #outer-wrapper, do not forget to change the code on the tag width #main-wrapper and #sidebar-wrapper south. Because if not replaced then the distance between the page and sidebar blog post will be very wide. To anticipate, the fox is also the number of tag width #main-wrapper and #sidebar-wrapper be 500px for #main-wrapper and 400px for #sidebar-wrapper. Thus becomes:
#main-wrapper {
width: 500px;
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: 400px;
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 */
}
To change the column width #main-wrapper and #sidebar-wrapper, should match the width of columns in #outer-wrapper. For example, the width of your blog then 950px wide number of job postings and sidebar blog should be less than 950px. This is due to posting blogs and blog sidebar and have not berdempetan distance between them. Distance between job postings and sidebar can be adjusted from 30px to 50px.
Well ... after a big change on the blog, there was one part left to change the bottom of the blog. Pal now looking for a code #footer-wrapper and fox numbers on his tag width becomes equal to the width of the page blog (#outer-wrapper).
If all parts have been amended, so before nge-save the template better preview of the changes by clicking the preview. If it's a new match in the save. If you have not cleaned my friend can click on the edit / clear edit to restore the changes that have occurred in template.
Ok .... Good luck.


By: Lagaknya