cara Membuat template blog menjadi 3 kolom
Tutorialnya ada di sini dalam bahasa inggris. atau ikuti cara cara di bawah ini.
1) Masuk tutorial 3 Coloum Templates: Step-by-Step Guides.
2) Pilih template yang diinginkan. Nah, karena sebelumnya aku memilih minima lefty strech, maka untuk template yang tiga kolom ku pilih Minima Lefty with Left and Right Sidebar. Kalian bisa pilih yang lain lho.
3) Nah masuk ke tata letak>Edit HTML
4) Tambahkan css berikut untuk mengganti #sidebar-wrapper sebelumnya.
#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for long ... float */
}
#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... float */
}
5) Tambahkan lagu div elemen yang baru sebagai bagian dari content-wrapper, yang akan ditempatkan di sidebar yang kedua. Lihat yang warna merah!
3) Expand the width of the other wrappers to accommodate the new sidebar
4) Do necessary adjustments to margins, padding etc
5) Adjust the max width of the header description to center it in the new expanded header
Note: Step 6 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where the Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.
6) Modify the CSS rules for the wire frame layouts editor.
cara Membuat template blog menjadi 3 kolom
4 Komentar | Baca lengkap...
Tutorialnya ada di sini dalam bahasa inggris. atau ikuti cara cara di bawah ini.
1) Masuk tutorial 3 Coloum Templates: Step-by-Step Guides.
2) Pilih template yang diinginkan. Nah, karena sebelumnya aku memilih minima lefty strech, maka untuk template yang tiga kolom ku pilih Minima Lefty with Left and Right Sidebar. Kalian bisa pilih yang lain lho.
3) Nah masuk ke tata letak>Edit HTML
4) Tambahkan css berikut untuk mengganti #sidebar-wrapper sebelumnya.
#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for long ... float */
}
#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... float */
}
5) Tambahkan lagu div elemen yang baru sebagai bagian dari content-wrapper, yang akan ditempatkan di sidebar yang kedua. Lihat yang warna merah!
3) Expand the width of the other wrappers to accommodate the new sidebar
- Locate the CSS sections called #outer-wrapper, #header-wrapper and #footer
- Change their width property to 880 pixels
width: 880px;
margin: 0 auto;
...
}
margin: 0 auto;
...
}
#header-wrapper {
width: 880px;
margin: 0 auto 10px;
...
}
width: 880px;
margin: 0 auto 10px;
...
}
#footer {
width: 880px;
clear: both;
margin: 0 auto;
...
}
width: 880px;
clear: both;
margin: 0 auto;
...
}
4) Do necessary adjustments to margins, padding etc
- Locate the #main-wrapper section
- Insert a right margin of 12 pixels.
#main-wrapper {
width: 410px;
margin-right:12px;
float: $endSide;
...
}
width: 410px;
margin-right:12px;
float: $endSide;
...
}
5) Adjust the max width of the header description to center it in the new expanded header
- Locate the #header .description section
- Change the max-width property to 880 pixels.
#header .description {
...
padding:0 20px 15px;
max-width:880px;
...
}
...
padding:0 20px 15px;
max-width:880px;
...
}
Note: Step 6 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where the Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.
6) Modify the CSS rules for the wire frame layouts editor.
- Locate the end of the skin denoted by "]]>"
- Add the following code shown in red, above that line.
/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}
body#layout #main-wrapper {
width:400px;
}
body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width:150px;
}
Save the template. Switch to Page Elements view and enjoy your 3 column template!body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}
body#layout #main-wrapper {
width:400px;
}
body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width:150px;
}
