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:

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

    BalasHapus
  2. kalo soal templet nyerah aku kang

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

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

    BalasHapus
  5. Sip...BOS

    Langsung praktek
    mau coba dulu ke TKP

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

    ditunggu sambungannya

    BalasHapus
  7. Anonim10:52

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

    BalasHapus
  8. Anonim09:47

    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

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

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

    BalasHapus

Mockup Hijab Adobe Photoshop Tutorial - FREE FILE PSD

  Mockup Hijab Adobe Photoshop adalah tutorial tentang bagaimana cara merubah warna hijab maupun coraknya. Jika anda ingin mendownload file ...