Update 09 April 2011: Terima kasih telah berkunjung ke blog saya,maaf untuk ketidak nyamanannya karena blog dalam masa pembangunan. mohon dukungan dan motivasinya ya.... ^_^, salam: aziz imammudin rhamadhan.
Adsense Indonesia ads Internet Marketing - Online ads ads
Bookmark and Share
Saya tebak kalian yang membaca artikel ini adalah orang yang memiliki sebuah Blog dan sedang mencari sebuah artikel yang membahas tentang cara mengatur ukuran konten yang terdapat pada blog kalian mungkin itu meliputi Mengubah Ukuran Halaman Blog, Mengubah Halaman Posting, Mengubah Ukuran Header, Mengubah Ukuran Sidebar, atau Mengubah Ukuran Footer. Tenang saya akan membahas semuanya sekaligus (all in one gitu lohhh) hehehe. Mungkin kalian sulit menemukan Template Blog yang cocok dengan selera kalian dan utamanya bahwa Template Blog di ibaratkan seperti sebuah tampilan rumah yang indah, bagus, dan mempesona agar banyak orang yang ingin berkunjung di Blog kalian. tapi bukan hanya tampilan saja yang digunakan melainkan tata letak dan ukuran setiap konten haruslah sesuai dengan isi dari blog itu sendiri, mungkin juga kalian ingin mengedit ukuran inilah itulah agar semua terlihat seperti keigninan kalian. tidak usah berlama-lama langsung saja saya akan memberikan caranya walau ini hanya ilmu yang sangat mudah tapi cukup membantu dikala kalian sedang membutuhkannya.



Langkah awal :
- Login ke Blog Kalian
- Klik Tata Letak
- Klik Edit HTML
- Saya sarankan sebelum Mengedit HTML di Blog kalian, silahkan kalian BackUp Template kalian terlebih dahulu agar nantinya jika terjadi sesuatu yang tidak di inginkan kalian bisa memasang template semula yang belum kalian Edit HTML nya. (dan setelah di Edit jangan langsung di save, cukup di Pratinjau lebih dahulu, bila sudah sesuai dengan keinginan kalian barulah kalian save hasil Editan kalian tadi).


Untuk mengubah ukuran Halaman Blog
Cari kode di bawah ini:


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

Keterangan:
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Halaman Blog, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.



Untuk mengubah ukuran Halaman Posting
Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Halaman Posting, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.


Untuk mengubah ukuran Sidebar Blog
Cari kode di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Sidebar Blog, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.



Untuk mengubah ukuran Header Blog
Cari kode di bawah ini:

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

Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Header Blog, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.



Untuk mengubah ukuran Footer Blog
Cari Code di bawah ini:

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

Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Footer Blog, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.




Perhatian:
Jika lebar salah satu dari kelima elemen di atas (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi keserasian elemen yang lain. Oleh karena itu, jika kalian ingin mengubah lebar salah satu elemen, maka kalian juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog kalian akan menjadi kacau, kalian tidak mau kan kalau tujuan kalian yang mulanya ingin menyesuaikan tampilan blog kalian sesuai keinginan dan selera kalian malah justru merusak blog kalian sendiri. Seperti yang sudah saya bilang diatas, jangan langsung di save melainkan di pratinjau terlebih dahulu, jika sudah sesuai dengan keinginan kalian barulah kalian save.

Semoga bermanfaat dan kreasikanlah blog kalian sesuai keinginan kalian..



Silahkan klik tulisan "Poskan komentar" untuk berkomentar. saya menggunakan menu komentar dengan form pop-up agar tidak mengganggu aktifitas membaca kalian. terima kasih

17 comments:

Wahyu Kurniawan mengatakan...

ok..bisa dicoba...

aziz imammudin rhamadhan mengatakan...

selamat mencoba, terima kasih telah berkunjung.

A-liong mengatakan...

kalau buat footer sebelah kiri dan kanan..gimana caranya? kirim email dong atau buat posting tentang itu...email: soegiantosoegi@gmail.com

thk's much

aziz imammudin rhamadhan mengatakan...

maaf saya kurang jelas untuk pertanyaannya...!!!! mungkin yang anda maksud adalah footer 2 kolom, tapi itu bisa dibuat hanya utuk widget manual.

Yudi mengatakan...

penjelasan yang cukup jelas dan bagus isinya untuk pembuat blog. makasih tip dan triknya. saya punya kendala dalam pengubahan ukuran template (header, body dan footer}, saya udah nyoba sesuai yang disarankan, tapi yang mau berubah ukuranya hanya bagian body saja, sedangkan untuk header dan footer mgak berubah walaupun angka ukuran sudah di rubah kenapa ya??? saya mencoba mengubah template "inove" dari deluxe template. mohon bantuanya ya. terimakasih.

capsulx3@gmail.com

aziz imammudin rhamadhan mengatakan...

maaf sebelumnya karena saya terlalu lama tidak menjawab pesan dari anda, oh ya langsung saja ke topik nya. untuk deluxe atau inove saya kurang mengerti tapi artikel diatas bisa dan sudah berhasil saya praktekan dan semua berjalan lancar, dan mungkin anda bisa melihat pada bagian html nya karena ada perbedaan pada tag header, body, dan yang lain, untuk body anda berhasil karena anda meletakan kode tersebut pada tag yang tepat. terima kaish telah berkunjung.

Innah mengatakan...

Salam sahabat.., klu template minima mungkin kode itu yg di pake, tp template dari desain template blogger kdnya ga sprti itu, gimana kdnya klu templ dr desain blogger? aq mo gnti templ tp ga tau kdnya.., tlng kasi tau ya..moga ilmunya slalu nambah dan membawa berkah.., thanks, mampir yuk di innah blog

aziz imammudin rhamadhan mengatakan...

@innah: iya mungkin setting template blog nya sudah di atur pada desain edit template jadi secara default ukurannya pun akan berubah sesuai dengan yang disetting pada desain template tersebut, tapi masih ada cara lain untuk mengatasinya dengan sedikit ngoprek html templatenya. terima kasih.

Ladang-Hijau mengatakan...

mas kodenya ga ada, yang ada cuman #footer { trs saya coba edit height nya tapi kox gak ada perubahan ya? gmana tu? mohon bantuannya?

aziz imammudin rhamadhan mengatakan...

mungkin ukuran yang anda masukan terlalu besar jadi tidak bisa di submit oleh templatenya. ada alternatif lain dengan mengubah kke templat minima dan anda bisa mendesainnya lebih mudah. kalau templat sekarang sudah banyak menggunakan css dan xhtml yg rumit dan susah di edit ulang. semoga membantu.

angga mengatakan...

makasih boz tipsnya,, berguna bwt newbie sperti aku.. salam kenal..

aziz imammudin rhamadhan mengatakan...

iya terima kasih kembali. ^_^ salam kenal juga.

urukira treasure mengatakan...

mas saya ingin tanya bagaimana tampilkan sesuatu dibawah seperti ini.seperti join chat,galeri,terjemahkan,cari,video,online dan bagikan??
tolong kirim ke email saya jawabannya
kevin_or_urukira@yahoo.com
terima kasih mohon bantuannya hehe

pulsa elektrik mengatakan...

saya udah coba,tapi malah jadi jelek ya tampilannya,kayaknya mending ganti template aja ya sob

aziz imammudin rhamadhan mengatakan...

@anggal: sudah saya kirimkan dan maaf terlambat.
@pulsa eletrik: mungkin ukuran yang tidak sesuai sehingga membuat templat blog nya menjadi tidak karuan. mungkin dapat dicoba untuk mensetting ukurannya.!!! semoga membantu.

abu tentarakecil mengatakan...

berkunjung ke http://tentarakecilku.blogspot.com

Rhizkie-Share mengatakan...

wihh ni dy postingan yang w gutuhkan, makasih ya...

Selamat Datang Disitus Aziz

Selamat datang di situs saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya yang sangat sederhana ini. mohon maaf jika informasi yang disediakan sangat minim, dikarenakan kemampuan saya yang masih kurang, mari saling berbagi. semoga blogger indonesia bisa bersaing dengan blogger internasional lainnya. sukses slalu untuk semua.

Sekilas tentang penulis

Nama saya Aziz Imammudin Rhamadhan, saya seorang mahasiswa yang masih menuntut ilmu di salah satu perguruan tinggi di Bandung, salam kenal.

Aziz