Berlangganan Artikel Via Email

Posting Terbaru

Kursus Kilat Rombak Minima (Bab 3)

|

Kursus Kilat Rombak Minima (Bab 3) - Kursus Kilat Rombak MinimaSetelah 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 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



Letakkan kode berikut dibawah kode HTML navigasi yang baru ditambahkan diatas



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

#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
















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.

14 komentar:

Post a Comment