-->

Cara Mengatur Ukuran Header, Halaman Posting dan Sidebar

Cara Mengatur Ukuran Header, Halaman Posting dan Sidebar - Jika kita belum bisa membuat HTML blog, kadang mencari template yang kita inginkan sangatlah sulit, baik dari tampilan header, sidebar, Halaman Posting artikel, maupun footer.  Mungkin juga kita ingin memiliki template blog yang tidak terlalu lebar,  namun tak kunjung ditemukan. Nah, Jika sobat ingin mengatur ukuran halaman blog sobat, baik mengecilkan ataupun melebarkannya, caranya tidaklah terlalu sulit. Sobat tinggal ikuti langkah-langkahnya dibawah ini :

1. Login ke Blogger sobat.
2. Pilih Menu Rancangan --> Edit HTML --> Centang Expand Widget template
3. Cari kode yang mau diganti dengan cara menekan Ctrl+F 
4. Ubah ukuran Header dengan mencari kode berikut :
#header-wrapper{width:850px;margin:0 auto 0;height:60px;padding:34px 0px 34px 0px;overflow:hidden;}
Ukuran 850px adalah lebar header dan 60px adalah panjang headernya yang bisa sobat ganti sesuai dengan keinginan sobat


5.  Ubah ukuran lebar halaman dengan mencari kode berikut :
#outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:url(……..)
Ubah ukuran 850px harus sesuai dengan lebar Header yang kita buat.

6.  Ubah ukuran Halaman Posting artikel dengan mencari kode seperti ini :
#main-wrapper{width:470px;padding-top:10px;padding-left:0px;padding-right:0px;float:left;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
Ubah Ukuran 470px dengan lebar halaman postingan blog sobat

7.  Langkah selanjutnya adalah mengubah Ukuran Sidebar blog dengan cara mencari kode berikut :
#lsidebar-wrapper{width:160px;float:left;padding-left:10px;margin-top:10px;margin-left:0px;margin-right:10px;word-wrap:break-word;
Ubah Ukuran  160px dengan ukuran sidebarnya

Sama seperti langkah diatas, ubah juga ukuran sidebar sesuai keperluan sobat dan jika pada blog anda terdapat 2 sidebar, maka bagi ukuran sidebar jadi dua. Misalkan ukuran sidebar yang sobat buat adalah 300px, maka anda bisa membagi sama persis 150px-150px atau bisa juga berbeda.

Jika anda mengubah ukuran blog sobat, sedangkan sobat sudah memposting gambar yang ukurannya lebih besar dari Main-Wrapper (Halaman Posting) maka sobat juga harus mengecilkan ukuran gambar tersebut agar terlihat lebih menarik dan tidak melewati Halaman posting sobat.

Keterangan :
#header-wrapper     : Lebar Header Blog
#outer-wrapper        : Lebar Halaman Blog
#main-wrapper        :  Lebar Tempat posting
#sidebar wrapper    :  Lebar Sidebar

Nah di atas sobat telah membaca bagaimana tutorial langkah-langkah mengatur ukuran header, halaman posting dan sidebar blog. Apabila sobat ingin lebih tahu lagi Belajar HTML secara lengkap dan terperinci, silahkan kunjungi laman berikut >> https://www.niagahoster.co.id/blog/belajar-html/. Di laman tersebut sobat bisa mempelajari bagaimana cara membangun web secara sistematis mulai dari cara membuat judul, memasukkan gambar, membuat link, sampai membuat kontak form.

25 Responses to "Cara Mengatur Ukuran Header, Halaman Posting dan Sidebar"

  1. z http://reader-download.googlecode.com/svn/trunk/images/emo/rolled.gif

    ReplyDelete
  2. mantap gan.. makasih ya punyaku berhasil. :)

    ReplyDelete
  3. Tips yang Mantap Sob,, Makasih atas Infonta..

    ReplyDelete
  4. Mantabs mas informasinya, izin untuk mempelajarinya yach.

    ReplyDelete
  5. thanks gan infonya. .
    sukses truz. . :-bd

    ReplyDelete
  6. lebar halaman dengan lebar laman itu sama ga mas? maksudnya saya mau merubah lebar menu-menu/ kategori yang ada dibawah header diatas postingan...kayak yang di blog mas., yang ada HOME|INFORMASI| TUTORIAL|BLOGGER | TOOLS dst

    ReplyDelete
  7. berhasil...
    terima kasih atas 'cara mengatur ukurannya'

    ReplyDelete
  8. menarik seklai gan .....kok bisa begitu ya

    ReplyDelete
  9. Trims gan atas infonya, sangat menarik :)

    ReplyDelete
  10. punya ku engka ketemu gan, tolong gan cek di blog saya http://www.prediksibola888.blogspot.com/

    ReplyDelete
  11. Tutorialnya sangat membantu, baru tau ternyata jurusnya seperti ini agar bisa merubah lebar dan tinggi setiap element, thanks ya gan ilmunya.....

    ReplyDelete
  12. Keren gan.
    Komen balik gan.
    Gpangky.blogspot.com

    ReplyDelete
  13. Membantu banget gan artikelnya,saya lagi utak atik template ni.thanks y

    ReplyDelete
  14. Gan template saya nggak ada kode : #header-wrapper, #outer-wrapper , #main-wrapper, dan #sidebar wrapper .
    Tolong bantu ane gan !

    ReplyDelete
  15. Thanx Gan, artikel nya sangat membantu...

    ReplyDelete
  16. singkat padat mudah dimengerti, trims ilmu nya om

    ReplyDelete
  17. Mntap mas...sangat membntu untuk blog pemula seperti saya

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel