Membuat Blog Anda menjadi 3 Kolom

May 28, 2008 I Blog, Tips.


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
dots%2B001 Membuat Blog Anda menjadi 3 Kolom

dan pada Dots Dark template akan tampak seperti ini
dots%2Bdark%2B001 Membuat Blog Anda menjadi 3 Kolom

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
backuptemplate+001n Membuat Blog Anda menjadi 3 Kolom

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
<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

Related Posts


5 responses so far, say something?

  1. Rosa Scheck (1 comments) Says:

    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..!

    [Reply]

    May 28, 2008, 6:04 pm
  2. Indosoul (2 comments) Says:

    kalo templatenya bukan yg dots bisa nggak ya ?

    Indosouls last blog post..Japanlish

    [Reply]

    May 28, 2008, 8:10 am
  3. buyay (1 comments) Says:

    Om, aku pakai template Ed Merritt by Blogcrowds. Aku bingung mo nambah kolom seperti saran di atas. Aku gak nemuin kode Outer Wrapper itu. Tolong dong kasih tips-nya.
    Trims.

    buyays last blog post..Undur-Undur Ditelan, Diabetes Hilang

    [Reply]

    May 28, 2008, 6:03 am
  4. gadis rantau (37 comments) Says:

    saya lagi memperhatikan ini html.punya saya diganti gini gak ya?he..he..

    gadis rantaus last blog post..Lagi, BMI Diperkosa Majikan

    [Reply]

    May 28, 2008, 8:44 am
  5. kakekukeko (1 comments) Says:

    kang, pertama saya masuk ke blog ini ada tags yg bikin saya tertarik. ketik saya mengarahkan panah texs di dalam tags ehh.. ternyata bisa berputar, luar biasa. ini pertama x saya liat. kalo boleh tau cara buat tags nya gimana kang? makasih sebelumnya dan kalo boleh cara2 kirim yh ke email saya.

    [Reply]

    May 28, 2008, 6:23 pm

Leave a Reply


Comments links could be nofollow free.