Latest News
» » Cara Merubah Lebar Halaman Dan Kolom Blog

Cara Merubah Lebar Halaman Dan Kolom Blog

Be
Add Comment
Tutorial Blog
Friday, July 20, 2018

Merubah lebar halaman dan kolom blog yang paling gampang akan terasakan ketika desain blog yang kita rubah tanpa memakai background image, menyerupai halnya Template Minima bawaan Blogger atau template-template yang lain dimana background image yang dipakai tidak harus dirubah baik tinggi (height) ataupun lebarnya (width) ketika semua belahan kolom dirubah ukurannya. Meskipun demikian, janganlah mengendorkan semangat kita apabila perubahan desain blog mengharuskan kita juga harus menciptakan background image yang gres guna diubahsuaikan dengan perubahan yang kita lakukan. Percayalah bahwa tuntutan dan keharusan menciptakan background image yang gres tersebut akan semakin meningkatkan pemahaman kita baik terhadap desain sebuah blog maupun pengetahuan kita akan desain gambar/image sebab secara otomatis kita akan termotivasi untuk berguru ihwal desain background image dengan mempelajari cara membuatnya memakai software yang sebelumnya tidak pernah kita sentuh, menyerupai Adobe Photoshop ataupun software yang lain.

Untuk melangkah lebih jauh pada belahan ini sebaiknya anda di sini !. Pada posting tersebut kita dapat berguru ihwal dasar merubah kolom blog pada Template Minima yang akan menjadi dasar untuk lebih memahami cara merubah lebar kolom dan lebar halaman blog pada template bawaan blogger yang lain.

Sebelum mencoba melaksanakan perubahan pada template silahkan untuk mengikuti mekanisme di bawah ini :

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. KLIK TataLetak (Layout).
4. KLIK Edit HTML.
5. Amankan template. Lihat caranya di sini !.
6. Untuk mempercepat kerja, cari setiap KODE HTML memakai Ctrl+F. Untuk mengetahui lebih lanjut silahkan lihat di sini !.
7. KLIK Simpan Template pada setiap final proses (SAVE Template).
8. Lihat balasannya dengan membuka blog.

I. Template Denim


KODE CSS yang harus di rubah :
#header {       width: 760px;        margin: 0 auto;       background-color: #336699;       border: 1px solid #336699;       color: #ffffff;       padding: 0;       font: normal normal 210% Verdana, Arial, Sans-serif;;       } #content-wrapper {       width: 760px;        margin: 0 auto;       padding: 0 0 15px;       text-align: left;       background-color: #ffffff;       border: 1px solid #cccccc;       border-top: 0;       } #main-wrapper {       margin-left: 14px;       width: 464px;        float: left;       background-color: #ffffff;       display: inline; /* fix for doubling margin in IE */       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 {       margin-right: 14px;       width: 240px;        float: right;       background-color: #ffffff;       display: inline; /* fix for doubling margin in IE */       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 */       }

Kunci Perubahan :


#header (width) = #content-wrapper (width) = A ,#main-wrapper (width) = B, #sidebar-wrapper (width) = C

A = B + C + 56px

Keterangan : Setiap perubahan pada B atau C atau ke dua-duanya, maka width pada #header dan #content-wrapper anda tinggal menjumlahkan keduanya kemudian ditambah 56px.

II. Template Rounders


#header-wrapper {       /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #outer-wrapper, background asli --> W=740px   H=8px  */       background:#445566 url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;       margin-top:22px;       margin-right:0;       margin-bottom:0;       margin-left:0;       padding-top:8px;       padding-right:0;       padding-bottom:0;       padding-left:0;       color:#ffffff;       } /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #outer-wrapper yang baru, background asli --> W=740px   H=8px  */ #header {       background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;       padding:0 15px 8px;       } /* #outer-wrapper (width) = A */  #outer-wrapper {       width: 740px;       margin:0 auto;       text-align:left;       font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;       } /* #main-wrap1 (width) = B */ /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #main-wrap1 yang baru, background asli --> W=485px   H=50px  */ #main-wrap1 {       width:485px;       float:left;        background:#ffffff url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;       margin:15px 0 0;       padding:0 0 10px;       color:#333333;       font-size:97%;       line-height:1.5em;                 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 */       } /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #main-wrap1 yang baru, background asli --> W=485px   H=50px  */ #main-wrap2 {       float:left;       width:100%;        background:url("http://www1.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;       padding:10px 0 0;       }  /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #main yang baru, background asli --> W=485px   H=10px  */ /* #main (width) = C */ #main {       background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y left;       padding:0;       width:485px;       } /* #sidebar-wrap (width) = D */ #sidebar-wrap {       width:240px;       float:right;       margin:15px 0 0;       font-size:97%;       line-height:1.5em;       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 */       }  /* .main .widget (width) = E */  .main .widget {       margin-top: 4px;       width: 468px;       padding: 0 13px;       }  /* .main-blog (width) = F */  .main .Blog {       margin: 0;       padding: 0;       width: 484px;       }  /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #sidebar-wrap yang baru, background asli --> W=240px   H=8px  */  #sidebartop-wrap {       background:#ccddcc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom;       margin:0px 0px 15px;       padding:0px 0px 10px;       color:#334455;       }  /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #sidebar-wrap yang baru, background asli --> W=240px   H=8px  */ #sidebartop-wrap2 {       background:url("http://www2.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top;       padding: 10px 0 0;       margin:0;       border-width:0;       }  /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #sidebar-wrap yang baru, background asli --> W=240px   H=30px  */ #sidebarbottom-wrap1 {       background:#ffffff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;       margin:0 0 15px;       padding:10px 0 0;       color: #333333;       }  /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #sidebar-wrap yang baru, background asli --> W=240px   H=30px  */ #sidebarbottom-wrap2 {       background:url("http://www1.blogblog.com/rounders/corners_side_bot.gif") no-  repeat left bottom;       padding:0 0 8px;       }  /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #outer-wrapper yang baru, background asli --> W=740px   H=8px  */ #footer-wrap2 {       background:#445566 url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;       color:#ffffff;       }  /* background image di bawah ini harus di rubah dengan menciptakan background image gres sesuai width pada #outer-wrapper yang baru, background asli --> W=740px   H=8px  */ #footer {       background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;       padding:8px 15px;       }

Kunci Perubahan Width (lebar):



1. #outer-wrapper (width) = A
2. #main-wrap1 (width) = B
3. #main (width) = C
4. #sidebar-wrap (width) = D
5. .main .widget (width) = E
6. .main-blog (width) = F

A = B + D + 15px, atau A = C + D + 15px

E = B - 17px, atau E = C - 17px

F = B - 1px, atau F = C - 1px

Kunci Perubahan Background Image:



1. Background Image pada syntax #main-wrap1, lebarnya diubahsuaikan dengan lebar pada syntax #main-wrap1 yang gres (B).
2. Background Image pada syntax #main-wrap2, lebarnya diubahsuaikan dengan lebar pada syntax #main-wrap1 yang gres (B).
3. Background Image pada syntax #main, lebarnya diubahsuaikan dengan lebar pada syntax #main yang gres (C).
4. Background Image pada syntax #header-wrapper dan syntax #footer-wrap1 (background sama), lebarnya diubahsuaikan dengan lebar pada syntax #outer-wrapper yang gres (A).
5. Background Image pada syntax #footer, lebarnya diubahsuaikan dengan lebar pada syntax #outer-wrapper yang gres (A).

Untuk sementara cukup dua template terlebih dahulu agar nggak tambah pusing (karena saya juga jadi pusing dikala nyusun postingnya ! Habis panjang juga, sih ...).
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Selamat Mencoba


0 Response to "Cara Merubah Lebar Halaman Dan Kolom Blog"

Subscribe to: Post Comments (Atom)