Mengetahui ukuran dan kode Css dari header, Main Post, Sidebar dan footer serta bagian blog lainnya sangatlah penting jika ingin merubah template blog. Sebab untuk merubah template, langkah awalnya adalah harus tahu terlebih dahulu kode - kode Css dan Html yang dipakai oleh template tersebut.
Jika kode Css dan Html dari bagian blog yang ingin dirubah sudah diketahui, dengan pedoman kode - kode tersebut tinggal menganti, mengedit atau merubahnya.
Untuk mengetahui ukuran dan kode Css serta kode Html blog, dapat memakai fasilitas Inspect Element yang disediakan oleh browser Chrome, Mozilla maupun Explorer. Dalam hal ini saya contohkan memakai browser Mozilla Firefox untuk mengetahui ukuran, kode css dan html sidebar Widget kanan.
Langkah 1:
Buka Browser Mozilla Firefox, kemudian ketikkan di addres browser alamat blog yang ingin diketahui kode css dan html nya.
Langkah 2:
Arahkan Mouse / pointer ke bagian blog yang ingin dituju (contoh: Bagian Sidebar). Klik kanan dan pilih Inspect Element Lihat . Layar monitor akan terbelah menjadi 2 bagian. Bagian bawah layar adalah kode Html dan Css. Lihat
Langkah 3:
Bagian blog yang dituju akan ditunjukkan dengan garis putus - putus. Bila bagian blog yang dituju belum sesuai dengan yang diinginkan, geserlah ke atas dan ke bawah pada kode - kode html yang ada, bukalah tanda segitiga hitam yang ada dengan cara meng klik nya.
Jika bagian blog yang dituju sudah ketemu, kemudian klik Rules yang ada pada belahan layar bagian kanan. Maka di bawahnya akan muncul kode - kode css terkait dengan Sidebar Widget. Dalam contoh kode css nya adalah:
Artinya: Sidebar tersebut menerapkan Padding / Jarak Batas keluar sebesar 0 px untuk batas atas dan bawah dan 15 px untuk batas kiri dan kanan.
Sebelum mengganti atau merubah template sebaiknya baca juga bagaimana cara merubah template yang aman.
Jika kode Css dan Html dari bagian blog yang ingin dirubah sudah diketahui, dengan pedoman kode - kode tersebut tinggal menganti, mengedit atau merubahnya.
Untuk mengetahui ukuran dan kode Css serta kode Html blog, dapat memakai fasilitas Inspect Element yang disediakan oleh browser Chrome, Mozilla maupun Explorer. Dalam hal ini saya contohkan memakai browser Mozilla Firefox untuk mengetahui ukuran, kode css dan html sidebar Widget kanan.
Langkah 1:
Buka Browser Mozilla Firefox, kemudian ketikkan di addres browser alamat blog yang ingin diketahui kode css dan html nya.
Langkah 2:
Arahkan Mouse / pointer ke bagian blog yang ingin dituju (contoh: Bagian Sidebar). Klik kanan dan pilih Inspect Element Lihat . Layar monitor akan terbelah menjadi 2 bagian. Bagian bawah layar adalah kode Html dan Css. Lihat
Langkah 3:
Bagian blog yang dituju akan ditunjukkan dengan garis putus - putus. Bila bagian blog yang dituju belum sesuai dengan yang diinginkan, geserlah ke atas dan ke bawah pada kode - kode html yang ada, bukalah tanda segitiga hitam yang ada dengan cara meng klik nya.
Jika bagian blog yang dituju sudah ketemu, kemudian klik Rules yang ada pada belahan layar bagian kanan. Maka di bawahnya akan muncul kode - kode css terkait dengan Sidebar Widget. Dalam contoh kode css nya adalah:
.main-inner .column-right-inner {
padding: 0px 15px;
}
padding: 0px 15px;
}
Artinya: Sidebar tersebut menerapkan Padding / Jarak Batas keluar sebesar 0 px untuk batas atas dan bawah dan 15 px untuk batas kiri dan kanan.
Yang paling penting dalam hal ini adalah: jika ingin merubah bagian tertentu pada sidebar widget gunakanlah kode:
.main-inner .column-right-inner {.........}
.
Contoh merubah kode Css Sidebar Widget (coba letakkan kode css di bawah ini diatas </b:skin> lalu lihat hasilnya):
Langkah 4:
Klik Computed utk melihat kode css sidebar dan kode umum dari body blog. Font untuk melihat jenis huruf yang berlaku saat ini. Box Model untuk melihat ukuran bidang yang dituju Lebar X Tinggi dalam satuan pixel. Secara berurutan (dari tengah) angka - angka tersebut menunjukkan Ukuran Bidang Tujuan - Padding dan Margin.
Lebih jelasnya silahkan lihat ilustrasi gambar berikut:
.main-inner .column-right-inner {
padding: 0px 10px;
font-family: forte;
font-size: 11px;
background: #900;
}
padding: 0px 10px;
font-family: forte;
font-size: 11px;
background: #900;
}
Langkah 4:
Klik Computed utk melihat kode css sidebar dan kode umum dari body blog. Font untuk melihat jenis huruf yang berlaku saat ini. Box Model untuk melihat ukuran bidang yang dituju Lebar X Tinggi dalam satuan pixel. Secara berurutan (dari tengah) angka - angka tersebut menunjukkan Ukuran Bidang Tujuan - Padding dan Margin.
Lebih jelasnya silahkan lihat ilustrasi gambar berikut:
Sebelum mengganti atau merubah template sebaiknya baca juga bagaimana cara merubah template yang aman.
Tidak ada komentar:
Posting Komentar