Berlangganan Artikel Via Email

Posting Terbaru

Kursus Kilat Rombak Minima (Bab 2)

|

Kursus Kilat Rombak Minima (Bab 2) - Kursus Kilat Rombak MinimaSelesai dengan bagian header di Kursus Kilat Rombak Minima (Bab 1) dan Kursus Kilat Rombak Minima (Bab 1.Lanj), sekarang kita masuk ke Kursus Kilat Rombak Minima (Bab 2) yang akan membahas bagian bodi utama dari blog. Elemen body utama pada template minima adalah elemen post dan elemen sidebar. Kita masih tetap bermain2 dengan CSS template serta desain elemen untuk optimasi adsense.

Sebelumnya kita harus menentukan dahulu warna yang akan digunakan pada template yang di desain. Saya menggunakan warna dasar template dengan warna hitam(dapat diubah langsung dibagian "Fonts and Colors" -> "Page Background Color") dan outernya berwarna putih.

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
background: #fff;
}


Perubahan pada lebar outer-wrapper adalah sebesar 900px. nah, sekarang kita lakukan penyesuaian lebar pada #main-wrapper dan #sidebar-wrapper. perhatikan perubahan yang saya lakukan CSS berikut
#main-wrapper {
width: 530px;
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;
padding:0 10px;
text-align:justify;
}

#sidebar-wrapper {
width: 330px;
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-right:10px;
}

Lihat hasilnya.

Untuk mempermanis tampilan, kita akan memberi background pada judul sidebar dan main post. Berikut kode CSS yang diubah sekaligus perubahan yang saya lakukan

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
background:#000 url(http://i530.photobucket.com/albums/dd341/herrolim/mainnav-bg-1.gif) repeat-x center;
padding:5px;
}

.post h3 {
margin:.25em 0 0;
padding:10px 0 10px 5px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:#000 url(http://i530.photobucket.com/albums/dd341/herrolim/mainnav-bg-1.gif) repeat-x center;
}


Sekarang kita akan mengoptimasi template ini dengan menambahkan elemen khusus untuk menempatkan iklan adsense. Seperti yang dikatakan oleh para master adsense, "Penempatan posisi iklan sangat menentukan apakan iklan akan diklik atau tidak. Intinya posisi iklan dan penempatannya harus terlihat menonjol dibanding bagian lainnya.

Tambahkan kode CSS berikut diatas kode ]]>
#adsense-top {
width:100%;
padding:5px 0 5px;
text-align:center;
background:#000;
}
#adsense-side {
width: 340px;
float: $endSide;
background: #000;
margin-top:18px;
}


Cari kode
dan letakkan kode berikut tepat diatasnya




Cari kode

19 komentar:

Post a Comment