Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger

Dalam edit template sobat, perlu kita ketahui berapa ukuran atau lebar elemen-elemen yang ada di blog. Untuk mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger sejuta trik blogger ingin sharing ke teman-teman. Sharing dalam posting ini mudah-mudahan bisa membantu mengedit blog sahabat semua. Yuk mulai saja.
Landscaping company
1. Mengetahui Ukuran / Lebar header

#header-wrapper{
background: #ffffff;
width: 900px;
height: 160px;
font-size: 12px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

2. Mengetahui Ukuran / Lebar halaman Posting

#main-wrapper{
float:left;
width:590px;
margin:0px 0px 5px 0px;
padding:13px 10px 0px 10px;
overflow: hidden;
}

3. Mengetahui Ukuran / Lebar sidebar

#sidebar-wrapper{
float:left;
width:320px;
margin:13px 0px 5px 0px;
padding:0px;
line-height:19px;
display: inline;
}

Update : Banyak sekali kode sidebar yang bisa dipakai misal #rsidebar-wrapper{ atau #right-sidebar-wrapper{ dll, jadi disesuaikan saja.
4. Mengethui Ukuran / Lebar Footer
/* Footer
----------------------------------------------- */
#footer {
  width:950px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}



a. Untuk mengedit ukuran/lebar Halaman Blog
Cari kode di bawah ini:

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

b. Untuk mengedit ukuran/lebar 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 */
}

c. Untuk mengedit ukuran/lebar Sidebar Blog
Cari Code 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 */
}


d. Untuk mengedit ukuran Header Blog,
Cari Code di bawah ini:

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


e. Untuk mengedit 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;
}

Jika sahabat tidak menemukan kode seperti di atas, untuk mengetahui element seperti header, posting, sidebar dan lebar blogger, cukup mencari kode yang mirip dan ditunjukkan dengan width: (LEBAR) dan height:(TINGGI)

Dengan Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger tentunya akan memudahkan sahabat mengganti dan mengedit blog dengan menyenangkan seperti slogan blog ini.
Happy Blogging! by. Sejuta Trik Blogger

47 comments:

  1. Sob tolong follow back ke http://www.antibiasa.com/ okok
    Thnk sob

    ReplyDelete
  2. # Anti Biasa Dot Com
    Laksanakan Ndan!

    ReplyDelete
  3. Template Blog ente bikin sakit mata Gan,

    ReplyDelete
  4. # Anonymous
    ok gan, ane mau rencana update tampilan. makasih masukannya.

    ReplyDelete
  5. Sangat Membantu Saya :)
    Thanks Gan!!

    ReplyDelete
  6. # Fandy Wahanaputra
    makasih gan, saya masih kurang puas dengan posting saya di atas, saya mau edit ulang posting tersebut agar lbih mudah dalam pemahamannya. mkasih kunjungannya

    ReplyDelete
  7. makasih banget atas infonya kawan..
    semoga bermanfaat juga buat yang lainnya..

    ReplyDelete
  8. Mas Boleh nanya? cara membuat Commentar seperti ini gimana mas??? Form komentar nya. keren. hehehhe

    ReplyDelete
  9. # Firdaus Tech.com
    udah diposting kok gan, cek aj di menu komentar :D. atau cari di google dengan keyword 'komentar lightbox'

    ReplyDelete
  10. sangat bermanfaat...,biar bisa utak atik blog jadinya..he..he.

    ReplyDelete
  11. info bagus.. segera oprek blog, by the way aq bikin blog yg rada gelap biar konsumsi daya rendah dan gak silau.

    ReplyDelete
  12. Aku Mas yang paling ngak asik ya itu kalo masalah edit HTMl, bikin pala ku pusing 7 keliling.....

    tapi setelah membaca artikel di blog ini kepala saya merasa ringan seperti kapas di tiup angin.

    salam kenal Mas dr muhammad-ikhsan74.bgspot.com, polback balik Mas.. :D

    ReplyDelete
  13. # Ikhsan
    wah bahasa agan mendayu2, ok gan. ini posting yang sering ane buka kok gan, buat oprek template ane. salm kenal juga.

    ReplyDelete
  14. saya ijin copas ya, makasih sebelumnya

    ReplyDelete
  15. # Putra Jogja
    Silahkan sob. thanks kunjungannya

    ReplyDelete
  16. Terima kasih atas artikelnya.

    sepertinya anda berbakat untuk urusan membuat postingan yang ini, jujur saja kamu punya kelebihan tersendiri, dan saya akan berkunjung lagi bila ada waktu.



    #Semoga sehat selalu :D

    ReplyDelete
  17. thanks infonya bermanfaat baget gan :)

    ReplyDelete
  18. sangat berguna dan terimakasih

    ReplyDelete
  19. Saya lagi cari artikel untuk ubah font judul neh ada gak yah?

    ReplyDelete
  20. salam kenal saya dewi and masih baru di dunia blog. sempat download templatenya agan, and masih belajar and belajar sambil baca blognya agan...thank you ya :)
    ternyata lumayan rumit juga ya :p untung ada blog ini

    http://ratuayudewi.blogspot.com

    ReplyDelete
  21. bermanfaat banget gan, jadi bertambah dikit ilmu ane

    http://arminaven.blogspot.com/

    ReplyDelete
  22. infonya sangat berguna gan,,,khususnya bagi saya pemula di blog,
    follow balig ya gan...
    http://accbisnis.blogspot.com/
    terimakasih

    ReplyDelete
  23. gabung..... bloger lubuklinggau izin gabung

    ReplyDelete
  24. wah sangat bermanfaat Sobat :)

    ReplyDelete
  25. wah manteebb nih , thanks infonya mas :D

    ReplyDelete
  26. maturnuwun, mas.akhirnya bisa ganti juga.

    ReplyDelete
  27. Infonya sangat bermanfaat bg aq yg super nubi ini,Thank'u Mas.Pelan2 akan kucoba benahi http://musical-instruments-amazon.blogspot.com/

    ReplyDelete
  28. mantep banget infonya bozz...
    dan membantu sekali buat ane
    makasih ^^

    ReplyDelete
  29. siippp...
    buat pemula kayak aku sangat membantu sekali artikelnya...

    ReplyDelete
  30. masih samar masbro, belum cukup paham dan banyak yang mesti dihafal ya

    ReplyDelete
  31. thanks mas atas infonya...newbi ..heheheh

    ReplyDelete
  32. Tambah semangat... makasihh..
    Mampir ya ..... atonang.blogspot.com

    ReplyDelete
  33. ok gan, mkasih,,
    mampir ya,,
    http://share-akbar.blogspot.com/

    ReplyDelete
  34. kalau ingin membuat iklan di sisi blog kita di ruang yang kosong berarti kita tahunya dengan mengurangi outer wrapper dg main wrapper gitu gan? trs hasilnya dibagi dua? kan kanan kiri space nya

    ReplyDelete
  35. gan, kalau mau ngedit ukuran huruf judul posting caranya gimana ya? saya sdh coba2 tp kok ngk bisa ya . mohon pencerahaannya

    ReplyDelete
  36. Wah lengkap sekali gan informasinya.

    ReplyDelete
  37. bermanfaat sekali infonya sob,,,

    ReplyDelete
  38. Mantab ini. sangat bermanfaat buat kami yang sedang belajar.

    ReplyDelete
  39. nah klo ingin membuat ukuran post berbeda antara halaman utama dgn halaman kedua

    ReplyDelete
  40. Mantap informasinya, makasih bos...........

    ReplyDelete
  41. Thanks gan..

    like blog ane gan

    www.andro-black.blogspot.com

    ReplyDelete
  42. tetep belum mudeng tentang blogspot gan...

    ReplyDelete
  43. ribet ya belajar Kode HTML itu.

    ReplyDelete

Silahkan berkomentar sesuai artikel. Setiap komentar adalah tanggung jawab anda. Komentar spam akan dihapus, baik secara otomatis dengan javascript ataupun manual. Saya sudah menyediakan nama/url jadi link aktif di komentar tidak perlu lagi disertakan. Jadilah blogger Indonesia yang bijak. Anda berkomentar saya berkunjung!