01.20
Chocolicious
Jika anda baru mulai membuat sebuah blog, anda bisa dengan leluasa memilih templates untuk blog anda. bisa memilih dua kolom atau templates 3 kolom. Tapi bagi yang sudah terlanjur memilih templates 2 kolom dan ingin membuatnya menjadi templates tiga kolom, hal itu bukan hal mustahil diwujudkan. Anda bisa merubah templates dua kolom anda menjadi 3 kolom dengan membuat kolom tambahan pada templates dua kolom anda.
Pada artikel ini saya menggunakan templates standar blogspot yaitu dots 2 kolom yang coba saya tambahkan menjadi templates 3 kolom. Ok langsung ajah, Anda harus login dulu ke account Blogger anda, kemudian klik Layout > Edit html. Jangan lupa centang Expand Widget Template. Lalu cari kode-kode dibawah ini
#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 in 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 -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
Kemudian ganti dan tambahkan pada baris2 tersebut, sesuai dengan yg bertanda merah dibawah ini
#outer-wrapper {
background:url(“http://www.blogblog.com/dots/bg_3dots.gif”) no-repeat 275px
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 in 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 -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right: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 */
}
#newsidebar {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
50px;
Dots Dark Template
Pengguna Dots Dark template akan menemukan baris2 dibawah ini :
#outer-wrapper {
background:url(“http://www.blogblog.com/dots_dark/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 in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.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_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
Ganti atau tambahkan baris2 diatas jadi seperti ini ( yang bertanda merah )
#outer-wrapper {
background:url(“http://www.blogblog.com/dots_dark/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 in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.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_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right: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 */
}
#newsidebar {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
Dots dan Dots Dark Template
Modifikasi2 berikut ini berlaku untuk kedua templates diatas,
terus turun kebawah, kita akan menemukan baris2 kode berikut ini
/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar, body#layout #sidebar-wrapper {
padding: 0;
width: 240px;
}
ganti baris diatas dengan baris2 ini :
/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
width: 750px;
padding: 0px;
}
body#layout #main-wrapper,
body#layout #main {
width: 400px;
padding: 0px;
margin: 0px;
}
body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper,
body#layout #sidebar,
body#layout #newsidebar {
width: 150px;
padding: 0px;
}
Kemudian, terus kebawah, cari baris2 seperti dibawah ini,
dan ganti/tambahkan dengan kode-kode berikut, warna hijau brarti ganti, warna merah brarti tambahkan
Sekarang coba preview template anda, anda akan melihat sidebar baru di sebelah kanan blog anda dengan isi profile anda (jika anda men-nonaktifkan sharing profil anda, aktifkan sementara)
Jika anda sudah puas dengan tampilan baru blog anda, klik Save Template,
Posted in: Blogger Widgets
0 komentar:
Posting Komentar