Tuesday, March 25, 2008

Modifikasi Template, 3 Column Minima Blogger

Bagi yang suka utak-atik template, mau belajar memodifikasi template blogger, saya akan menulis tentang modifikasi template minima blogger yang sidebarnya di kanan, minima right sidebar. Aselinya, minima hanya mempunyai dua kolom, di kiri atau di kanan, dengan lebar kolom 220px.

Langsung tanpa basa-basi, to the point aja. Kita akan memulai dengan menambah satu buah kolom/ sidebar dengan lebar 160px. Ini cocok untuk menempatkan iklan adsense yang skycrapper.

Pertama:
Buka layout --> edit html --> back up dulu script aseli blog anda.
Buatlah style css (tentu di antara [c: data ....
buat properties berikut:

#sidebar1-wrapper
{ width:160px;
float:$startSide;
margin-$startSide:10px;
word-wrap:break-word;
overflow:hidden;
}

-Keterangan: $startside nama elemen untu kiri/ left.
- word-wrap:break-word :> untuk memecah kata yang terlalu panjang (IE) sehingga tidak menggeser lebar sidebar.
-overflow:hidden:> menyembunyikan kata yang melebihi lebar sidebar (Firefox).

Selesai membuat calon sidebar.

Dengan membuat satu sidebar maka kita harus menambah ukuran lebar untuk outer-wrapper dan header-wrapper. Berapa px lebarnya? Kita sudah membuat calon kolom dengan lebar 160px di tambah margin kiri: 10px, jadi space buat kolom baru: 170px.

ini yang harus diubah:

cari: #header-wrapper { width:660px; }
lebar semula --width:660px, ganti menjadi 660 + 170 = 830px;
cari: #outer-wrapper :> sama dengan di atas.

Selesai membuat CSS nya. sekarang kita pasang pada HTML-nya.

setelah #main-wrapper dan sebelum #sidebar-wrapper tuliskan yang sudah kita buat tadi.


<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' />
</div>


untuk memasang widget secara manual, tinggal paste code dari template sebelumnya [b:widget ....

ubah susunan section menjadi:
[b:section clas="" ...]
[b:widget ......../]
[/b:section]

SELESAI. Lihat pada Page elemen. Tambahkan elemen halaman yang anda mau. Untuk menempatkan elemen yang sudah ada dari template sebelumnya tinggal tuliskan: [b:widget .....
contoh display:http://picture-indonesia.blogspot.com/
Download juga bisa: template.azimat.net
SELAMAT MENCOBA.


tambahan: untuk sidebar-wrapper (sidebar asli) sebaiknya ganti properties float menjadi right/ $endSite.

32 comments:

kaitokid724 said...

Artikel di blog ini sangat menarik & bagus. Untuk lebih mempopulerkan artikel (berita/video/ foto) ini, Anda bisa mempromosikan di infoGue.com yang akan berguna bagi semua pembaca di tanah air. Nantikan segera plugin / widget kirim artikel & vote yang ter-integrasi untuk Blogspot dan Wordpress dengan instalasi mudah & singkat. Salam Blogger!
http://www.infogue.com/design/modifikasi_template_3_column_minima_blogger/

Anonymous said...

apakah 3 kolom lebih bagus daripada 2 kolom untuk google adsense ? dan kenapa ?

meds said...

saya kira bagus atau tidak itu relative. untuk 3 kolom, kita bisa meletakkan iklan dan lain-lain di 2 sidebar, jadi tidak terlalu panjang ke bawah. isi yang penting, taruh di sidebar dalam.

Anonymous said...

Wah kreative banget
Layak dicuba nih...
Teriam-kasih mazz..

Anonymous said...

informsi ini sangat membantu,lihat blog saya:
http://elektropik.blogspot.com/
atau
http://infoze.blogspot.com/

kangbeyes said...

kang aku suka template anda dan gimana kok di azimat ngak bisa di download please,tolong untuk dikirimi html kodenya di kangbeyes@gmail.com

meds said...

terimaksih sdr beyez, terima kasih konfirmasinya tentang azimat yang tidak bisa download. sekarang anda bisa download langsung dari template.azimat.net

Anonymous said...

wah ini membantu sekali, top markotop..

Awal Kaz Syam said...

Mas..... saya juga buat satu 3 kolom yg udah di Mod. ulang di Internet........

oh yah mas minta tips gmana caranya nambah ruang di main page sementara di bagian Post, dan Widget tidak tertutup. karena waktu saya ujicoba di blog jadinya malah kepotong alias gak rapi......

jadi bisa buat tutorialnya tidak????

Anonymous said...

u awaludin,
untuk menambah section, harus diperhatikan adalah pengaturan properties classnya. ini berhubungan dengan peruntukan section tsb utk apa. untuk list aturlah properties ul dan li, untuk paragrap atur tag p, untuk gambar img dll.

tapi mohon maaf, saya kurang jelas dengan pertanyaan anda.

zigot said...

Terimakasih tutorialnya mas...ahirnya blog aku bisa jadi 3 column. kunjungi juga blog aku di http://jogjacafe33.blogspot.com

Thanks

Anonymous said...

thanks untuk petunjuk-petunjuknya,bisa nambah wawasan saya

menujugelap said...

wah, browsing sana-sini nyari template dengan 3 kolom, akhirnya ketemu juga. Tapi mesti susah payah edit HTML (masih bingung bahasa mesin nih).
Tapi harus terus semangat untuk belajar supaya jadi lebih baik.

menujugelap said...

Blog punya ku kalo dimodif pasti keluar info error ada galat.
gimana solusinya? padahal aku dah coba clear cookies, upgrade browser, pake google chrome. tetep aja nongol info error galat.
sekarang masih pake template bawaan, padahal pengen pake template 3 kolom biar gak kepanjangan sidebar-nya.
help me plissss....

Anonymous said...

u menuju gelap, coba reset template dan kembali ke template default dulu, mungkin waktu menganti template ada code yang hilang. (mengembalikan semua editan ke semula).

setelah kembali ke kode default (asli), pilih minima white. baru lakukan edit template.

kalau itu masih eror, buat blog baru saja.

Cari uang lewat blog said...

wah belum mudeng maklum masih pemula tapi harus tetep belajar hehehe

Anonymous said...

halo...
bagus info-nya.. tapi belum mudheng... bisanya cuma download templates aja...
ni tadi sbenere mo cari template.. e...malah mampir...
gapapa lah...
bagus c blognya..!!
BANZAI..!!!

Semar Badranaya said...

mantav infonya sobat, kalau mau bikin footer apakah tinggal diganti sidebar jadi footer atau gimana ?

Salam kenal dari Berkata Bebas

Anonymous said...

u Ki Semar, untuk nambah footer bisa dengan dua macam, dengan menyisipkan kode html langsung, jadi kalau mau mengubah lewat edit code, atau dengan widget. tentu ini butuh pengetahuan tentang template blogspot dan html.

Anonymous said...

Makasih atas bagi-bagi ilmunya... Sangat MANTAP...! Thank's banget ya sekali lagi. Lagi pengin edit-edit template blog nih...

Anonymous said...

tutorial paling gak jelas yang pernah aku temui!!

meds said...

uanonymous, karena anda malas berpikir. menggunakan template ya harus belajar juga, karena pasti membutuhkan modifikasi di sana -sini, menyesuaikan dengan elemn di blog kita.

melihat script yg banyak memang bikin pusing. tapi itulah yang dilakukan para pembuat themes yang canggih.

Anonymous said...

buat style css itu gmana mksudnya ya ?

meds said...

u radzt, css itu untuk mengatur tampilan huruf-huruf/ halaman. itu berupa kode seperti, misal: #wrapper , pemakaian: div id="wrapper".

perletakannya kalau dalam blogger berada dalam head, atas. letaknya diantara: [c:data...], ada banyak kode kan? untuk menambah seperti tutorial ini, tinggal tambahkan saja css style itu.

radzt said...

[c:data] itu munculnya mesti expand widget template dulu gak mas ?

trus meletakkan #sidebar1-wrapper setelah [c:data] ya ?

meds said...

u radzt,

cdata itu langsung muncul, itu untuk pembatas css/style kalau dalam xtml. semua properties css masuk di antara tag c:data.

lihat dari paling atas.

mletakkannya, barengkan saja dengan properties css yang lainnnya. untuk peletakan di body, lakukan seperti dalam tutorial.

machfud14 said...

Q jg ingn membuat template untuk blog Q dan disesuaikan dngn blog Q yaitu bertema Naruto
Q blh mnt bantuannya G' mhn pembuatan template di perjelas lg cozada kata2 yg tdk Q phmimaklum Q seorng pemula dlm dunia blogger jd belum trlalu phm...
Mhn bantuannya!!!!!!!!!

chugy said...

mlm bos. post komen-y kren ni bleh tw gm cr bkinnya 'thanks

ganjar said...

seperti biasa bermain ke blog om sumedi ^_^

mataharimagic said...

klo buat footer gmana? soalnya mo naruh iklan di footer blogger di mataharimagic.blogspot.com

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

Salam kenal ya.., klu template minima emang kdnya dah pas tapi klu template dari desain template blogger kodenya ga cocok., gimana cara buat sidebar baru template desain blogger?, tlong kasi tau ya.., sebelumnya makasih boanyak., moga ilmunya selalu nambah n membawa berkah. Amin. Yuk mampir di innah blog