Cara Mengatur Lebar Template Blogspot

Dalam mengatur ukuran suatu template blog ada beberapa kode yang harus sobat ketahui, diantaranya kode untuk bagian ukuran lebar postingan, sidebar, header dan footer.

Okeh langsung ke tutorial

1. Login ke akun Blogger Backup terlebih dahulu template blog sobat untuk berjaga-jaga
2. Pilih menu Template Edit HTML

Kemudian cari kode-kode berikut yang berwarna Biru, untuk mengatur ukuran lebar kolom dalam template blog. (Tekan CTRL+F untuk mempercepat pencarian kode dalam Edit HTML Template)


1. #header-wrapper

#header-wrapper adalah kode untuk ukuran lebar header suatu template blog, Header bagian atas meliputi kolom Judul atau nama blog. Biasanya ada dua kolom kanan dan kiri.
Contoh:

#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Keterangan:

    Warna Biru adalah Kode Header dalam template blog.
    Warna Merah adalah Ukuran lebar Header dalam template blog.

Catatan:
Bila Header dalam template blog memiliki dua kolom kanan dan kiri, pastikan kedua ukurannya disesuaikan dengan ukuran #header-wrapper diatas.

Contoh Kode Kolom Header Bagian Kiri:

#header{
margin:0;border:0 solid $bordercolor;
color:$pagetitlecolor;
float:left;
width:179px;
overflow:hidden}

Keterangan:

    #header adalah kode Header sebelah kiri, biasanya kolom untuk tempat Judul blog.
    float:left; adalah posisi kolom berada dibagian kiri.
    width:179px; adalah ukuran lebar kolom. Ganti nilainya agar sesuai dengan keinginan sobat dan ukuran template blog sobat.

Contoh Kode Kolom Header Bagian Kanan:

#header2{
float:right;
width:728px;
margin-right:0px;
padding-right:0px;
overflow:hidden}

Keterangan:

    #header2 adalah kode Header sebelah kanan, biasanya kolom untuk tempat iklan atau sponsor blog.
    float:right; adalah posisi kolom berada dibagian kanan.
    width:728px; adalah ukuran lebar kolom. Ganti nilainya agar sesuai dengan keinginan sobat dan ukuran template blog sobat.

2. #outer-wrapper

#outer-wrapper adalah kode bagian untuk semua ukuran lebar suatu template blog, biasanya memiliki ukuran yang sama dengan ukuran pada #header-wrapper diatas. Karena ukuran #outer-wrapper didalamnya biasanya berisi ukuran #main-wrapper (Kolom postingan), #sidebar-wrapper (Kolom Sidebar).

Contoh Kode:

#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Keterangan:

    #outer-wrapper adalah Kode untuk mengatur keseluruhan lebar template blog.
    width: 1000px; adalah ukuran lebar keseluruhan template blog, ganti nilainya sesuai dengan ukuran template blog yang sobat inginkan.

3. #main-wrapper

#main-wrapper adalah kode template bagian kolom postingan blog. Sobat bisa mengatur ukuran lebarnya sesuai dengan keinginan sobat, namun sesuaikan dengan ukuran #outer-wrapper yang dibagi untuk kolom postingan dan juga sidebar.

Contoh Kode:

#main-wrapper {
width: 655px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

Keterangan:

    #main-wrapper adalah Kode bagian Postingan dalam template blog.
    width: 655px; adalah ukuran lebar kolom postingan blog, Ganti dan tentukan nilainya sesuai dengan keinginan sobat.
    float: left; adalah letak posisi kolom postingan blog berada dibagian kiri dalam template blog.

4. #sidebar-wrapper

#sidebar-wrapper adalah kode bagian Sidebar dalam template blog, yang biasanya dalam kolom di isi dengan widget-widget yang diterapkan. Sidebar bisa berada dibagian posisi kanan dan kiri atau salah satunya.

Contoh Kode:

#sidebar-wrapper {
width: 310px;
float: right;
}

Keterangan:

    #sidebar-wrapper adalah kode bagian Sidebar dalam template blog.
    width: 310px; adalah ukuran lebar kolom sidebar blog, Ganti dan tentukan nilainya sesuai dengan keinginan sobat.
    float: right; adalah letak posisi kolom sidebar blog berada dibagian kanan dalam template blog.

Catatan:
Bila dalam template blog sobat memiliki dua sidebar yang berada dibagian kanan dan kiri, maka penentuan ukuran lebar yang meliputi kolom postingan, sidebar kanan dan kiri harus sesuai dengan ukuran lebar #outer-wrapper yang dibagi menjadi tiga kolom.

Contoh membagi ukuran kolom dalam template agar tepat dan sesuai dengan ukuran #outer-wrapper.

#outer-wrapper = 1000px
#main-wrapper = 450px
#sidebar-wrapper = 300px
#newsidebar-wrapper = 200px

Demikianlah cara mengatur lebar template Blogspot, semoga sobat terbantu.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Cara Mengatur Lebar Template Blogspot. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.https://kampung-bodoh.blogspot.com/2014/10/cara-mengatur-lebar-template-blogspot_40.html

• Share
• Share
• Share
• Share
• Share

✚

Related Post