Prosedur Modifikasi MINIMA ( Bag. I )

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 :

#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>

<div class='clear'> </div>

</div>

Selanjutnya kita preview, apabila masih tidak teratur cobalah rubah ukuran M & P-nya. Bila sudah berhasil silahkan save

Sumber

Prosedur Modifikasi MINIMA ( Bag. I )

0 komentar:

Posting Komentar