UJOCOBA 2

Masih ingat tampilan awal kita?

Setelah posting pertama kita, maka blog akan menjadi seperti ini :

Pada bagian merah akan otomatis terisi dengan tulisan terbaru kita. Bentuknya terdiri dari 2 kolom (kiri-kanan), dan jumlah barisnya sesuai dengan jumlah posting halaman depan yang mau kita tampilkan. kamu bisa merubah jumlahnya dengan melalui pengaturan blog.

Sekarang kita lihat pada bagian Rancangan > Edit HTML, perhatikan pada bagian edit template. Mulai saat ini kita akan bermain2 di bagian tersebut untuk mengubah kode xml bagi yang mau mengganti banner dll. Lebih bagus kamu sudah mengedit dulu xml nya sebelum di upload dengan notepad/notepad++. Kalo tidak mau ganti banner sih gapapa.

Pertama kita akan mengganti banner utama, posisi pada tampilan blog kita tentu diatas dong.

Upload file head.jpg ke file hosting. Situs apa saja bisa. Tapi lebih baik kamu menyimpan gambarnya melalui posting blog > tambah gambar. kalau pake image hosting kaya imageshack atau yg lain, biasanya pake bandwidth. Klo quota kita abis, gambar header kita gak bisa kelihatan loh jadinya. Kamu bisa bikin head.jpg sendiri dengan melihat ukuran gambar dan membuatnya pakai sotoshop atau korel draw, atau apalah yang kamu suka.

Pada kolom edit template, cari kode :

#top {

height:158px;

margin:auto;

background:#f5f3f3 url(Ganti-tulisan-ini-dengan-alamat-link-gambar-head.jpg);

background-repeat:no-repeat;

}

Ganti dah tuh di tempat yang sudah diberitahukan diatas dengan link gambar kita.

Terus klo mau ganti featured (merah), tv (kuning), dan top5 of the week (hijau), Lihat masing-masing kodenya. Saya tidak mengubah sponsor-about-dan random news (ungu).

featured (gtop.jpg) silahkan cari kode:

#top {

height:158px;

margin:auto;

background:#f5f3f3 url(hGanti-tulisan-ini-dengan-alamat-link-gambar-gtop.jpg);

background-repeat:no-repeat;

}

TV (feathead.jpg) silahkan cari kode:

#fideohead{

height:35px;

background:#000 url(Ganti-tulisan-ini-dengan-alamat-link-gambar-feathead.jpg) no-repeat;

width:325px;

margin:2px 0 0px 0;

}

Top5 (top5.jpg) silahkan cari kode :

.highlight{

margin-top:4px;

height:36px;

background:#232628 url(Ganti-tulisan-ini-dengan-alamat-link-gambar-top5.jpg) ;

width:325px;

float:left;

}

Seperti yg sudah saya bilang, saya tidak ganti sponsor, about us, dan random news. Mengenai pengisian sponsor, about us, dan random news bisa dilihat di pdf yg saya lampirkan di paket, atau membaca tutorial singkat pada tulisan ke-[4]. Tulisan berikutnya akan memberitahukan cara memasang javascript dinamis.

Share this article :

Share on FB Tweet Share on G+ Submit to Digg