Merubah template 2 kolom menjadi 3 kolom - Jika agan mempunyai blog dengan 2 kolom tetapi kekurangan kolom, Fadli Blog punya solusinya. Yaph dengan menambahkan satu kolom lagi berarti jumlahnya 3 kolom dong hahah.. Pasti sudah cukup bukan punya template dengan 3 kolom??? Jika agan ingin merubah template yang semula 2 kolom menjadi 3 kolom, ikuti cara berikut :
1. Login ke akun blogger agan.
2. Klik Template > Klik Edit HTML.
3. Untuk berjaga-jaga sebaiknya agan mendownload template terdahulu agar bila terjadi kesalahan bisa membackupnya kembali > Klik Download Template Lengkap.
4. Cari kode yang mirip seperti berikut karena setiap template berbeda-beda htmlnya. #outer-wrapper (tekan Ctrl+F untuk lebih mudah mencarinya)
--------------------------------
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
--------------------------------
5. Silahkan agan ganti angka yang berwarna biru 660 menjadi 950.
6. Selanjutnya sobat cari kode yang mirip seperti di bawah ini. #sidebar-wrapper (tekan Ctrl+F untuk lebih mudah mencarinya)
--------------------------------
#sidebar-wrapper {
width: 220px;
float: $enSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}
--------------------------------
7. Silahkan agan ganti angka yang berwarna biru 220 menjadi 250.
8. Selanjutnya copy kode dibawah ini dan pastekan di bawah kode (Kode No.6)
--------------------------------
#second-sidebar-wrapper {
width: 250px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}
--------------------------------
Sehingga kodenya menjadi seperti ini :
--------------------------------
#sidebar-wrapper {
width: 250px;
float: $enSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}
#second-sidebar-wrapper {
width: 250px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}
--------------------------------
9. Kemudian cari kode dibawah ini.
--------------------------------
<div id="'main-wrapper'">
<b:section class="'main'" id="'main" showaddelement="'no'">
<b:widget id="'Blog1'" locked="'true" title="'Blog" type="'Blog'/">
</b:widget>
</b:section></div>
<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="Profile2" locked="false" title="About Me" type="Profile">
<b:widget id="BlogArchive2" locked="false" title="blog Archive" type="BlogArchive2">
<b:widget id="followers2" locked="false" title="Followers" type="Followers">
</b:widget>
</b:widget></b:widget></b:section></div>
--------------------------------
Copy kode dibawah ini tepat dibawahnya :
--------------------------------
<div id='second-sidebar-wrapper'>
<b:section class='sidebar' id='second-sidebar' preferred='yes'/>
</div>
--------------------------------
Sehingga kodenya menjadi seperti ini :
--------------------------------
<div id="'main-wrapper'">
<b:section class="'main'" id="'main" showaddelement="'no'">
<b:widget id="'Blog1'" locked="'true" title="'Blog" type="'Blog'/">
</b:widget>
</b:section></div>
<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="Profile2" locked="false" title="About Me" type="Profile">
<b:widget id="BlogArchive2" locked="false" title="blog Archive" type="BlogArchive2">
<b:widget id="followers2" locked="false" title="Followers" type="Followers">
</b:widget>
</b:widget></b:widget></b:section></div>
<div id='second-sidebar-wrapper'>
<b:section class='sidebar' id='second-sidebar' preferred='yes'/>
</div>
--------------------------------
10. Simpan Template.
Semoga Sukses..
Subscribe to:
Post Comments (Atom)
siang gan
ReplyDelete@Rolli putra : siang ..
ReplyDelete