Cari Artikel Blog Ini

Total Tayangan Laman

MENGUBAH LEBAR SIDEBAR

Pada postingan sebelumnya kita membahas cara menambah sidebar. Postingan kali ini akan memaparkan cara-cara untuk mengubah kolom pada templat (header wrapper, outer wrapper, main wrapper, sidebar wrapper dan sidebar baru wrapper)
Caranya tidak sulit, anda hanya tinggal mengganti angka-angka pada kolom template yang ingin diubah lebarnya.
Kita langsung ke kode HTML untuk mengubah angka-angka pada kolom teplate. Sebagai contoh, dibawah ini merupakan ukuran kolom template yang digunakan dalam Blog EPG Studio. Silahkan anda simak.
  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Edit HTML
  3. Cari kode seperti dibawah ini
  4. Ingat kode contoh yang ditampilkan merupakan kode dari Template Tata Letak. Jadi kalau kode yang anda cari tidak ketemu berarti templatenya berbeda
    /* Header
    -----------------------------------------------
    */

    #header-wrapper {
    width:990px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
    #outer-wrapper {
    width: 990px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }
    #main-wrapper {
    width: 480px;
    float:$startSide;background:#C3D9FF;border:0pxsolid $bordercolor;#0066cc;padding:15px 15px .25em;
    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 */
    }
    #sidebar-wrapper {
    width: 260px;
    float: $endSide;background:#0066CC; border:0px solid $bordercolor;white; padding:5px 5px .25em;
    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 */
    }
    #sidebarbaru-wrapper {
    width: 200px;
    float: left;background:#0066CC; border:0px solid $bordercolor;white; padding:5px 5px .25em;
    psdding-right:5px;
    word-wrap: break-word;
    overflow: hidden;
    }


Dalam pengaturan ukuran kolom template,lebarnya harus disesuaikan dengan dengan lebar header wrapper/outer wrapper (dalam px=pixel) dari contoh diatas memiliki lebar 990px. Dalam pengaturan berikutnya jumlah dari lebar : main wrapper, sidebar wrapper dan sidebar baru wrapper harus berjumlah 990px (sama dengan lebar header wrapper/outer wrapper)
Untuk lebih jelasnya kita lihat perinciannya :
  1. Lebar Main wrapper = 480px, padding = 15px+15px=30px, jumlah 510px
  2. Lebar Sidebar wrapper = 260px, padding = 5px+5px=10px, jumlah = 270px
  3. Lebar sidebar baru wrapper = 200px, padding = 5px+5px=10px, jumlah = 210px
  4. Lebar Main wrapper + sidebar wrapper + sidebar baru wrapper = 510px + 270px + 210px = 990px

Setelah selesai mengotak-atik angka pada kolom template, klik Simpan Template
Lihat Blog anda yang baru...!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
7 Comments

7 komentar :

Ikwan S.,S.Pd mengatakan...

Bagussss

Penaku mengatakan...

Thanx infonya, muanntap..

aria mengatakan...

:c: Top Markotop.....tks ilmunya om.

LutFiiy Lavhalitya mengatakan...

makasih :)

Download Free Games mengatakan...

siip Gan, nanti aku coba....
trimakasih...

Bagas Rangga Syahputra mengatakan...

makasih banget gan.. akhirnya saya bisa juga edit template

GUNUNG MAS PONSE mengatakan...

SUPER PROMO DI GUNUNG MAS PONSEL TEMPAT BELANJA ONLINE AMAN DAN TERPERCAYA. 100% BEBAS PENIPUAN MINAT PIN BB: 7C22D79F HUB/SMS:0851-4515-5828 klik web resmi kami di http://gunungmas-phone.blogspot.com/
Ready Stock! Samsung Galaxy A8 Rp.2.900.000
Ready Stock! oppo R5 Rp.3.000.000
Ready Stock! Apple iPhone 5 32GB Rp.2.500.000
Ready Stock! Apple iPhone 5S 32GB Rp.3.000.000
Ready Stock! Samsung Galaxy A3 A300H Rp.1.500.000
Ready Stock! Samsung Galaxy A5 A500F Rp.2.000.000
Ready Stock! Samsung Galaxy E5 E500H Rp.1.500.000
Ready Stock! Samsung Galaxy Grand Prime SM-530H Rp.800.000.
Ready Stock! Asus Zenfone 2 ZE551ML RAM 4GB Rp.2.000.000

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!