BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Menambah Kolom di New Blogger

Iseng-iseng liat extremetracking ternyata ada empat orang lebih  yang nyasar ke blog ini nyari cara bikin atau nambah kolom template na menjadi ( 3 ) tiga kolom. Sebab itu sekalian saja saya bikin postingan tentang bagaimana caranya menambah kolom di template new blogger.

Baiklah untuk menambah layout menjadi ( 3 ) tiga kolom, saya lebih suka mengunakan sistem persen ( % )dari pada mengunakan sistem angka. Bukan apa-apa sih, kalau mengunakan angka terkadang menjadi ribet dalam menentukan margin-nya, lagi pula ketika saya buka di Template Tab Elemen Halaman posisinya sering berantakan seperti ini.

" Perlu di Ingat kunci perubahan lebar akibat penambahan kolom terletak pada nilai Outer-wrapper nya. "

Template yang saya pake template minima .-  jadi yg ingin mengikuti tutor ini mesti di istallkan dulu template minima-nya , juga biar seragam kita merubah OUTER-WRAPPER-nya menjadi 80%. 

1. MENAMBAH KOLOM POSISI MAIN CONTENYA DI TENGAH.

 Seperti biasa untuk mengedit layout buka tulisan atau TAB EDIT  HTML

Dan untuk kasus ini biarkan  saja Expand Template Widget dalam ke adaan kosong ( tidak di tandai ).

oke sekarang cari kode ini.

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
      </div>

Setelah itu masukan di atasnya kode berikut ini.

<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section></div>

Sekarang scroll mouse ke atas ke bagian kode Css-nya. temukan kode ini.

#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 */
}

di bawah-nya masukan kode ini.

#newsidebar-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 */
}


Tugas kita sekarang merubah nilai lebar, margin dan float-nya.
yang pertama rubah nilai WIDTH dari OUTER-WRAPPER -nya menjadi WIDTH : 80%; ( selalu ingat di tutup dengan titik koma.) 

#outer-wrapper {
width: 80%;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}


Yang Kedua rubah  nilai WIDTH dari MAIN-WRAPPER -nya menjadi WIDHT : 55%; dan tambahkan pula sintax Margin left  nilainya sekitar  2% cukup. yaitu : Margin-left: 2%;
jadi bila di bandinghkan dengan kode asli-nya kode  perubahannya seperti di bawah ini.

#main-wrapper {
width: 55%;
margin-left:2%;
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 */
}

" Sekarang tinggal tersisa 45% lagi, yang dibagikan untuk kedua sidebar. terserah mau nilai sidebarnya sama atau berbeda, yang jelas mesti ada sisa buat nilai marginnya. Jadi kalau mau sidebar keduanya sama berarti nilainya  sekitar 20%. dan sisanya yang 5% untuk nilai margin"
lanjut
Yang ketiga merubah nilai WIDHT dan menambah Margin left  dari SIDEBAR-WRAPPER menjadi seperti di bawah ini.

#sidebar-wrapper {
width: 20%;
margin-left:2%;
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 */
}

Yang ke empat NEW SIDEBAR-WRAPPER atau Sidebar Baru. Sidebar ini  yang mesti dirubahnya adalah  nilai WIDHT dan juga merubah nilai FLOAT nya menjadi Left. jadi WIDHT:20%; , Float:Left;  Seperti di bawah ini.

#newsidebar-wrapper {
width: 20%;
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 */
}

Pekerjaan terakhir ialah merubah bagian HEADER-WRAPPER -nya menjadi WIDTH :100%;

#header-wrapper {
width:100%;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Dan begitu juga bagian FOOTER -nya sama WIDTH:100%.

#footer {
width:100%;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

 

Kenapa mesti 100% ( seratus persen ) ? ... ingat ! Outer-Wrapper merupakann wadah atau bungkus dari header, content ( main dan sidebar ) juga Footer -nya. ( dan mengunakan 100 % untuk kasus Template Minima )

Setelah beres semuanya, jika kita tekan PRATINJAU ngga terjadi apa-apa ? .. tenang saja jangan panik !!! itu karena memang kita belum menambah widget apapun di sidebar barunya ( kamu harus percaya )... jadi kita tekan saja tulisan SIMPAN TEMPALTE  dan buka tulisan atau  TAB ELEMEN HALAMAN
bravo kita sukses sekarang menambah sebuah kolom baru !!.
coba tambahkan di sidebar baru sebuah WIDGET POLLING , karena kita akan melanjutkan tentang menambah kolom di new blogger ini ,yaitu bagaimana menambah kolom kalau  posisi kedua sidebarnya sisi kanan atau sisi kiri ( seperti layout blog ini ).- itu juga kalau ngga malas  nulisnya .
Yes jadi tambahkan sekarang widget polling.. ( hanya sebagai alat untuk acuan  saja ).

 
tunggu saja sambungannya.

del.icio.us tags: ,
Page views this post: reader

33 komentar:

youlieuse said...

MANTAPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP

maksih bos

Unknown said...

okeeeee bossssss....

tutorial nya bagussssss........

ibnu2muhammad said...

apa template yang gw pake di http://ibnu2muhammad.blogspot.com bisa di ubah??? thakns atas bantuannya

Jaloee said...

ya bisalah.. cuman karena blog na pake gambar.. jadi ukuran gambarnya mesti di edit juga... kecuali kalau yang sebelah na lagi.. polos ngga pake gambar...thanks atas kunjungannya

andreanov said...

wew nice bgt bos.. ditunggu karya selanjutnya..

Unknown said...

Boss...makasi elmu na ya...

bersulang

Jaloee said...

to : balicheckin

thanks juga bro atas kunjungan-nya :)

putri perdana said...

mas,ak mo tanya,kalo template HARBOR punya nya DOUGLAS BOWMAN ,apa juga bisa di tambah kolom ???MAKASIH . . . .

bamb said...
This comment has been removed by the author.
bamb said...

mas, kalo templatenya selain minima gimn ??

Jaloee said...

buat bamb :

selain minima bisa.. logikanya sama seh.. cuman kalau yg pake gambar mesti di edit lagi gambarnya.. ya rada2 ribet juga seh

Anonymous said...

Om, aku punya template Ed Merritt, kok agak susah nemuin kode-kode itu ya. Ada tips lain? Trims

Cumie said...

susahnya.. udah selesai dah bagus elemen widgetnya jg agak kacau an deh wwkwk

The Power of Love said...

terima kasih ^^

postingannya berguna banget :)

admin said...

Assalamualaikum. wr wb.
Alhamdulillah akhirnya bisa juga. Makasih nih infonya. Berguna bangetz

Jaloee said...

@ Aki tirem

sama2 mas

Orang Benai said...
This comment has been removed by the author.
Anonymous said...

mantap beneeeerrrr bang.... blog sy brhasil di edit


makasih bang

Jaloee said...

@ AL

sama makasih jg atas kunjuganya

cakcaknaplok said...

mas gimana caranya supaya jadi kaya "Skill And Inspiration Design" menjadi dua kolom thx...

cakcaknaplok said...

saya dah coba biki jadi dua kolom trs dah jadi tapi pas mau di tambah gadet malah error
(Maafkan kami, tapi kami tidak dapat menyelesaikan permintaan Anda.)

cakcaknaplok said...

heheh ternyata udah ada tutornya.... di
http://catalog-tutorial.blogspot.com/2008/10/triks-css-list-dua-kolom.html makasih mas...

Silver Hand said...

Sipp,..terimakasihh. mantap

wildan vai said...

mksh bgt pakdhe,...dari sekian artikel yang ak dapatkan,..hanya artikelmu yang berhasil ak praktekkan,...

Aan said...

Pa mau tanya !!!!
Kolom post dan kolom gadget nya jadi sempit, harus rubah lebar tapi yang mana yach ?
Tolong email dong ke aan@dwiperkasa.co.id

tx banget ya

masbow said...

wah tipsnya ok.. dicobain nih...

Cak Daus said...

nyimak dulu nih...mau di coba...

naura said...

sip. mo dicoba pak. tengkyu

Edward Diki said...

Terimakasih bro...postingan bgs.

Anonymous said...

waaaaaaaaaaaaaaaaaaaa
blogku jadi tampil beda....hahahahaha....
makasih ya.....
www.akatsukiryuki.blogspot.com

Shaymin Forevo said...

Gagal Total Boss.... Klw pake template tic tac blueberry gimana ya????

Nizar N Milanta said...

Berhasil Bos terimakasih banyak.. sukses selalu untuk anda

http://najwa-online.blogspot.com

M.Salman Al Farisi said...

.thank's, ,good article!! ;)

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial