Mengubah Template Dots Putih Menjadi Tiga Kolom

Jika kita telah mengetahui bagaimana cara untuk merubah template Dots Hitam menjadi tiga kolom, bagaiman dengan yang putih? Apa kalian ingin juga dapat merubah template tersebut menjadi tiga kolom? Jika ya, ikuti Trik Hack berikut ini:

Pertama kita harus menuju ke Blogger Dashboard, jika kita belum memilih template dots, jadi pilihlah sekarang lewat Layout > Selec New Template > Dots. Tapi jika kita sudah menggunakan template dots sebelumnya, langsung saja menuju ke Edit HTML. Sebelumnya backup dahulu template kita, dengan begitu jika menemukan kesalahan, kita bisa memakai template yang di backup tadi.

Selanjutnya, cari code yang berwarna hitam berikut:

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float ing IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}

#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -150px;
padding:40px 10px 15px;
width/* */:/**/10px;
width: /**/10px;
}

Jika sudah, ganti code di atas yang berwarna hitam dengan code yang berwarna hitam di bawah ini, atau ubahlah menjadi seperti berikut:

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
word-wrap: break-word; /* fix for long text breaking sidebar float ing IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}

#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -150px;
padding:40px 10px 15px;
width/* */:/**/10px;
width: /**/10px;
}

#newsidebar-wrapper {
width:200px;
float:right;
font-size:80%;
padding-bottom:20px;
margin-right:25px;
word-wrapper: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar {
background:url("http://blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Sudah selesah, mudah kan ?

Ternyata Halaman Yang Ini Bagus Juga Untuk Di Cetak: Cetak Halaman Ini

Masukkan Email Kalian Untuk Mendapatkan Artikel-Artikel Seperti Di Atas:

Delivered by FeedBurner