Kursus Kilat Rombak Minima (Bab 3)

By Admin di 3/27/2009 |

Kursus Kilat Rombak Minima (Bab 3) - Setelah pelajaran dari contoh2 sebelumnya pada Kursus Kilat Rombak Minima BAB 1, BAB 1.lanj, dan BAB 2(KLIK DISINI jika belum membaca). Sekarang yang tersisa hanya mempercantik footer dan variasi kolom pada tampilan halaman utama. Semua yang saya tulis hanyalah sekedar contoh saja. Saya harap para blogger yang mempelajarinya dapat mendesain sebuah template dengan stylenya masing2.

Pada blog contoh, saya kembali memberi navigation bar dibagian bawah. Anda tidak perlu menambah kode CSS seperti yang tertera pada BAB 1.lanj. Yang diperlukan hanya kode HTMLnya saja. Kecuali jika ingin memberi bentuk navigasi yang berbeda dengan navigasi yang diatas.
Caranya :

Cari kode <!-- end outer-wrapper --> dan letakkan kode HTML navigasinya(kode RECORD1 DI BAB 1.lanj) tepat dibawah kode tersebut.

Kemudian memberi ruang kredit dibagian paling bawah

Cari CSS footer kemudian diubah sesuai selera. Saya hanya mengubah seperti ini

#footer {
width:100%;
clear:both;
margin:10px auto;
padding:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background:#fff;
}

Cari kode ini lalu hapus

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Letakkan kode berikut dibawah kode HTML navigasi yang baru ditambahkan diatas

<div id='footer'>
LETAKKAN TULISAN ATAU CREDIT LINK ANDA DISINI
</div>

Selesai sudah dengan Footernya.

Sekarang kita membuat variasi tampilan ala Theme Wordpress Revolution. Berikut Trik yang dibutuhkan untuk membuat tampilan seperti Revolution. Saya tidak membahas/menulis trik ini karena sudah ada artikelnya walaupun mungkin nanti akan sedikit berbeda dengan yang saya buat. Silahkan membaca tutorial yang sudah ada dan saya rekomendasikan.
1. Trik Read more...(BELUM TAU?? KLIK DISINI)
2. Trik Recent Post + Image (BELUM TAU?? KLIK DISINI)
3. Trik Feature Content (BELUM TAU?? KLIK DISINI)
4. Trik Hidden Element ((BELUM TAU?? KLIK DISINI)

Oke, kita akan membuat elemen baru lagi untuk menempatkan trik 2 dan trik 3.

Letakkan kode CSS berikut diatas kode ]]></b:skin>

#maincontainer-wrapper {
width: 550px;
float: $startSide;
overflow: hidden;
background: #fff;
margin-top:10px;
margin-bottom:10px;
}

#maintop-wrapper {
width: 530px;
height:200px;
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 */
background: #fff;
text-align:justify;
padding:0 10px 0;
}
#mainbottom-wrapper {
width: 530px;
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 */
background: #fff;
padding:0 10px 0 0;
}
#mainbottom1 {
width: 260px;
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 */
background: #fff;
}
#mainbottom2 {
width: 260px;
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 */
background: #fff;
}

Cari kode HTML berwarna hitam lalu tambahkan kode HTML berwarna merah

<div id='maincontainer-wrapper'>
<div id='maintop-wrapper'>
<b:section class='maintop' id='maintop'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='mainbottom-wrapper'>
<b:section class='mainbottom1' id='mainbottom1'/>
<b:section class='mainbottom2' id='mainbottom2'/>
</div>
</div>

Save.

Lihat hasilnya di http://minimahack.blogspot.com/

Selesai sampai disini "Kursus Kilat Rombak Minima". Selebihnya anda harus membiasakan diri untuk bermain-main dengan width, color, padding, margin, background, dan menambah elemen baru. Karena kunci dari sebuah desain template sangat bergantung pada 6 hal tersebut.

Related Posts by Categories