23 Januari 2009

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 != &quot;item&quot;'>
#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 != &quot;item&quot;'>
<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 != &quot;item&quot;'>
<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'>&#160;</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..............

10 komentar:

CIN_TA mengatakan...

akan saya coba langsung mas. mudah mudahan berhasil. makasih. tapi kapan nih sambunganya?

Tony mengatakan...

kalo soal templet nyerah aku kang

subagya mengatakan...

hmmm trik yang snagt simple mas... di tunggu kelanjutannya

Harry Seenthings mengatakan...

wow mantabbb nih kang, semakin giat nih nguliknya, buatin aku dong......

Baka Kelana mengatakan...

Sip...BOS

Langsung praktek
mau coba dulu ke TKP

Baka Kelana mengatakan...

Udach saya coba...ok
tapi postingannya di kiri semua

ditunggu sambungannya

bcom mengatakan...

To Baka Kelana

Memang 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....

bunda mengatakan...

jadi ikut penasaran utak atik template, ikut belajar dari sini bang Udin, boleh ya.
hanya saja agak lamban, karena dikerjakan pada waktu yg masih tersisa.
salam

dien mengatakan...

ini yang aku cari boss, biar belum diprakteiin yang penting seneng dulu dapet infonya, atur nuwun ya boss, semoga berhasil!

dien mengatakan...

kok modifikasi main wrapperku gagal terus ya kang? tulungin dong, pleeeeease!

Posting Komentar

 
Foto saya
Ketidaktahuan anda adalah kepedulianku untuk selalu memberikan informasi, meski hanya sekedar hilangkan rasa ingin tahu saja.