Beberapa situs menawarkan templates 3 kolom untuk anda download, jika anda baru memulai membuat blog, anda bisa mencari di situs2 tersebut, dan memanfaatkan templates 3 kolom yg mereka sediakan. Akan tetapi bila anda telah mempunyai blog, dan ingin menambah jumlah kolom menjadi 3, tips ini akan sangat berguna, yg kami lakukan adalah bagaimana memanfaatkan tmplates standar dari blogspot dan menambahkan satu sidebar lagi di bagian kanan blog anda.
Dots dan Dots Dark Template
Kecuali satu hal, cara untuk menambah sidebar pada kedua template ini sama persis
pada Dots template akan tampak seperti ini
dan pada Dots Dark template akan tampak seperti ini
Sebelum memulai memodifikasi, anda sangat disarankan untuk memback-up template lama anda, Silahkan klik Template -> Edit HTML, kemudian klik link “Download Full Template” untuk memback-up template lama anda
Dots Template
pada pengguna Dots template dapet melakukan hal dibawah ini, bagi pengguna Dots Dark, silahkan lewati bagian ini terlebih dahulu. setelah memback-up template lama anda, pada halaman yang sama, scroll kebawah sampai anda menemukan baris2 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 Templates
Modifikasi2 berikut ini berlaku untuk kedua templates diatas
terus turun kebawah, kita akan menemukan baris2 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
(catatan : tambahkan tanda [<] pada setiap awal baris dibawah ini)
div id=’sidebar-wrapper’> b:section class=’sidebar’ id=’sidebar’ preferred=’yes’> /b:section> /div>
div id=’main-wrapper’>
b:section class=’main’ id=’main’ showaddelement=’no’>
b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
/b:section>
/div>
div id=’newsidebar-wrapper’>
b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>
b:widget id=’NewProfile’ locked=’false’ title=’About Me’ type=’Profile’/>
/b:section>
/div>
Sekarang preview template anda, anda akan melihat sidebar baru di sebelah kanan blog anda dengan si profile anda (jika anda men-nonaktifkan sharing profil anda, aktifkan sementara)
Jika anda sudah puas dengan tampilan baru blog anda, klik Save Template,
semoga bermanfaat
I dunno what the hell my son is talking about…
but hell..i’m PROUD as his mom having this kid!
ahahhaa…u go son..!