Prosedur modifikasi template MINIMA yang hasilnya menjadi Magazine Blogger "Edel2XMinima" adalah sebagai berikut :
1. Buat blog baru pada blogger, kemudian pilih minima. Dalam proses awal jangan centang kotak Expand. Kemudian cobalah membuat dua postingan sekaligus untuk mengetahui kondisi kolom posting saat kita modifikasi.
2. Langkah awal dalam proses modifikasi adalah, terlebih dahulu fokus kita pada pembagian ruang Main-wrapper & Sidebar . Mengingat pada bagian ini merupakan sasaran yang saya inginkan, sedangkan untuk bagian header dan footer belakangan, setelah kita berhasil dalam membagi ruang antara kolom posting dan sidebar.
3. Kita rubah dulu ukuran Header/footer-nya , coba perhatikan kode asli header & footer MINIMA :
Ganti width:660px; dengan width: 980px
(Selanjutnya akan kita bahas pada modifikasi header MINIMA)
4. Saatnya memodifikasi Outer dan Main-wrapper, Cari kode dibawah ini :
Ganti width : 660px; menjadi width: 980px;
5. Dibawah kode diatas terdapat kode berikut :
Sisa 30px digunakan untuk ukuran Margin & Padding ( selanjutnya disebut M & P )
6. Sekarang kita akan membagi dan memodifikasi kolom Main-wrapper.
Tambahkan kode berikut :
7. Cari kode :
Hapus .main .widget
8. Kemudian cari kode : ]]></b:skin> dan tambahkan kode berikut dibawah kode tersebut.
Kode ini untuk menampilkan kolom kiri pada ruang Main-Wrapper, ukuran 400px berasal dari 640 - 220 - 20 (M+P).
9. Langkah selanjutnya menuju pada bagian <body>, cari kode dibawah ini :
Perhatikan susunan setelah modifikasi :
kode berwarna merah adalah kode modifikasi
Susunan Kode setelah dimodifikasi adalah sebagai berikut :
Selanjutnya kita preview, apabila masih tidak teratur cobalah rubah ukuran M & P-nya. Bila sudah berhasil silahkan save
to bo continued bin bersambung..............
1. Buat blog baru pada blogger, kemudian pilih minima. Dalam proses awal jangan centang kotak Expand. Kemudian cobalah membuat dua postingan sekaligus untuk mengetahui kondisi kolom posting saat kita modifikasi.
2. Langkah awal dalam proses modifikasi adalah, terlebih dahulu fokus kita pada pembagian ruang Main-wrapper & Sidebar . Mengingat pada bagian ini merupakan sasaran yang saya inginkan, sedangkan untuk bagian header dan footer belakangan, setelah kita berhasil dalam membagi ruang antara kolom posting dan sidebar.
3. Kita rubah dulu ukuran Header/footer-nya , coba perhatikan kode asli header & footer MINIMA :
#header-wrapper {
width:660px;
dst...... hingga }
kode footer :
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
dst...... hingga }
Ganti width:660px; dengan width: 980px
(Selanjutnya akan kita bahas pada modifikasi header MINIMA)
4. Saatnya memodifikasi Outer dan Main-wrapper, Cari kode dibawah ini :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Ganti width : 660px; menjadi width: 980px;
5. Dibawah kode diatas terdapat kode berikut :
#main-wrapper {
width: 410px; ( ganti ukurannya menjadi 640px)
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;( ganti ukurannya menjadi 310px)
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 */
}
Sisa 30px digunakan untuk ukuran Margin & Padding ( selanjutnya disebut M & P )
6. Sekarang kita akan membagi dan memodifikasi kolom Main-wrapper.
#main-wrapper {
width: 640px;
border-right:3px solid $bordercolor; ( ini adalah kode tambahan pembatas kanan, ketebalan 3px bisa anda rubah sesuai kemauan )
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 */
}
Tambahkan kode berikut :
#main-left {
width: 640px;
float: left;
margin: 4px 4px 0px 0px;
padding: 0px;
color: #000000;
background: $bgcolor;
border-right:.5px dotted $bordercolor; ( dotted = titik-titik, bisa anda rubah SOLID agar nampak utuh garisnya )
}
#main-left .widget {
margin:0 0 1.5em;
padding:0 1.5em 1.5em .75em;
}
#main-right{
float:right;
margin: 4px 4px 4px 4px;
padding: 0px;
background:$bgcolor;
width:220px; ( ini adalah lebar kolom kanan )
line-height:1.2em
}
#main-right h2{
margin-bottom:5px;
padding-bottom:5px;line-height:1.1em;
font:normal normal Trebuchet, Trebuchet MS, Arial, sans-serif;color:#996600;
}
#main-right img{margin-bottom:4px;border:1px solid #000000}
#main-right .widget {
margin:0 0 1.5em;
padding:0 1.5em 1.5em .75em; }
7. Cari kode :
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Hapus .main .widget
8. Kemudian cari kode : ]]></b:skin> dan tambahkan kode berikut dibawah kode tersebut.
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-left {
width:400px;
}
.post-body img{
width:390px;
}
</b:if>
</style>
Kode ini untuk menampilkan kolom kiri pada ruang Main-Wrapper, ukuran 400px berasal dari 640 - 220 - 20 (M+P).
9. Langkah selanjutnya menuju pada bagian <body>, cari kode dibawah ini :
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
Perhatikan susunan setelah modifikasi :
<div id='main-wrapper'>
<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='main-right'>
<b:if cond='data:blog.pageType != "item"'>
<b:section class='main-right' id='main-right' preferred='yes'/> ( jangan lupa memberi tanda "/" agar tidak error )
</b:if>
</div>
kode berwarna merah adalah kode modifikasi
Susunan Kode setelah dimodifikasi adalah sebagai berikut :
<div id='main-wrapper'>
<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='main-right'>
<b:if cond='data:blog.pageType != "item"'>
<b:section class='main-right' id='main-right' preferred='yes'/>
</b:if>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
Selanjutnya kita preview, apabila masih tidak teratur cobalah rubah ukuran M & P-nya. Bila sudah berhasil silahkan save
to bo continued bin bersambung..............
akan saya coba langsung mas. mudah mudahan berhasil. makasih. tapi kapan nih sambunganya?
BalasHapuskalo soal templet nyerah aku kang
BalasHapushmmm trik yang snagt simple mas... di tunggu kelanjutannya
BalasHapuswow mantabbb nih kang, semakin giat nih nguliknya, buatin aku dong......
BalasHapusSip...BOS
BalasHapusLangsung praktek
mau coba dulu ke TKP
Udach saya coba...ok
BalasHapustapi postingannya di kiri semua
ditunggu sambungannya
To Baka Kelana
BalasHapusMemang untuk kolom kiri adalah postingan, sedangkan kolom kanan adalah sesuai selera anda. Seperti layaknya mengisi bagian sidebar. Untuk bisa mengisi kolom kanan, prosedurnya sama dengan mengisi sidebar....
jadi ikut penasaran utak atik template, ikut belajar dari sini bang Udin, boleh ya.
BalasHapushanya saja agak lamban, karena dikerjakan pada waktu yg masih tersisa.
salam
ini yang aku cari boss, biar belum diprakteiin yang penting seneng dulu dapet infonya, atur nuwun ya boss, semoga berhasil!
BalasHapuskok modifikasi main wrapperku gagal terus ya kang? tulungin dong, pleeeeease!
BalasHapus