Cara Memperlebar Halaman Blog Di Template BroSense

BroSense Adalah template responsive fast yang di bikin oleh mas sugeng, namun pada template ini ada sedikit kesalahan yang bisa membuat pembaca tidak nyaman, oleh karena itu saya akan memberi cara untuk mengatasi masalah tersebut, tetapi terlebih dahulu kita harus mengenal elemen-elemen yang ada pada blog, lanjut saja tanpa basa basi lanjut saja di simak.

1. Body elemen/area yang ada di paling belakang yang mencakup keseluruhan template.
2. Outer Wrapper elemen ini letaknya di depan body yang berisi elemen-elemen seperti header, main, sidebar, dan footer.
3. Header karena namanya header yang berarti kepala artinya tem dapat yang areanya di atas template yang berisi judul blog dan deskripsi blog.
4. Main elemen yang satu ini isinya tentang artikel yang kita tulis atau post dan kotak komentar.
5. Sidebar yang satu ini berisi widget-widet yang biasanya seperti entri populer, mengenai saya, total pengunjung, dan masih banyak lagi.
6. Footer elemen ini letaknya ada di paling bawah template yang berguna untuk meletakan widget atau yang lain.

Cara Memperlebar Halaman Blog Di Template BroSense

1. Buka akun blogger

2. Pilih menu 'template' dan klik edit HTML

3. Cari kode Wrapper Seperti di bawah ini

/* WRAPPER */

#wrapper {

background:$(wrapper.background.color);

max-width:764px;

margin:0 auto;

padding:0;

box-shadow:0px 0px 5px rgba(30, 30, 30, 0.52);

    Yang sudah saya kasih tanda merah di ganti ke 920
4. Lalu cari .header {

.header {

float:left;

max-width:250px;

width:100%;

margin:0 0;

    Yang sudah saya beri tanda merah ganti menjadi 400
5. Kemudian cari /* MENU NAVIGATION */

/* MENU NAVIGATION */

#nav {

font:$(navigation.menu.font);

background:$(menu.background.color);

border-top: 1px solid $(menu.border.top.color);

border-bottom:1px solid $(menu.border.bottom.color);

margin:0 auto;

padding:0 0;

text-transform:uppercase;

display:inline-block;

max-width:764px;

width:100%;

    Yang sudah saya beri tanda merah ganti ke 920
6. Cari '.banner728 .widget-content {

.banner728 .widget-content {

margin:6px 0 0;

max-width:728px;

overflow:hidden;

    Yang sudah saya kasih tanda ganti ke 920
7. Selanjutnya Cari Main Wrapper / Post Wrapper

/* POST WRAPPER */

#post-wrapper {

float:left;

width:100%;

margin:12px -160px 12px 0

    Yang sudah saya kasih tanda merah di ubah ke 750px
8. Kemudian cari * SIDEBAR WRAPPER *

/* SIDEBAR WRAPPER */

#sidebar-wrapper {

float:right;

width:160px;

margin:12px 0;

    Yang sudah saya kasih tanda di ganti ke 250
9. Jika sudah semua tinggal klik simpan.
10. Lihat hasilnya.

Kalau masih gagal silahkan berkomentar, Selamat mencoba semoga berhasil :)

Posted by muhammad shofian

Tweet