MEMBUAT TEMPLATE 3 KOLOM

>> 19 February 2010

Template yang akan pakde bahas kali ini adalah template untuk blogger. Secara default template blogger hanya 2 kolom. Saking baik hatinya blogger, walaupun gratisan pengguna diijinkan mengutak-atik template yang ada atau bahkan membuat template sendiri sesuai selera. Bagaimana mengubah template 2 kolom menjadi 3 kolom ? Ikuti langkah berikut :

Di sini adalah contoh mengubah template minima 2 kolom menjadi 3 kolom.
  • Silahkan login menggunakan akun sobat.
  • Pada dashbor blogger plihlah Layout, selanjutnya pilih template
  • Kemudian pilih Edit HTML. Pilih full download terlebih dahulu untuk memback-up template sobat, jika nanti ada masalah dengan template yang baru.
  • Jangan lupa klik Expand widget. Selanjutnya cari kode template yang di cetak tebal di bawah ini :

</div>#main-wrapper {
width: 410px;
float: left;
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: 220px;
float: right;
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 */
}

  • Copy dan paste di baris paling bawah sehingga menjadi :

#main-wrapper {

width: 410px;
float: left;
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: 220px;
float: right;
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: 150px;
float: left;
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 */
}


  • Gantilah width :150 px dan float : left atau sobat bisa memberikan nilai width sesuai selera asalkan diperhitungkan dengan lebar keseluruhan template.
  • Berikutnya adalah mengubah layout editor. Carilah kode berikut :

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

  • Tambahkan dibawahnya kode berikut ini :

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

  • Sehingga susunannya menjadi seperti berikut ini :
Page structure tweaks for layout editor wireframe */
body#layout #header {

margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

  • Jika sobat benar akan diperoleh layout editor 3 kolom seperti berikut ini :
  • Selesai semoga berhasil.



Artikel Terkait:

0 komentar:

Post a Comment

Klik banner berikut untuk mendapatkan webhosting gratis 100 % Web hosting

Followers :

  © Blogger templates Shiny by Ourblogtemplates.com 2013

KEMBALI KE ATAS