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

       , , , ,     46 comments
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

46 comments:

  1. ANTI BIASA.COMNovember 18, 2011

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

    ReplyDelete
  2. Sejuta Trik BloggerNovember 18, 2011

    # Anti Biasa Dot Com
    Laksanakan Ndan!

    ReplyDelete
  3. AnonymousNovember 25, 2011

    Template Blog ente bikin sakit mata Gan,

    ReplyDelete
  4. Ahmad MaryukiNovember 25, 2011

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

    ReplyDelete
  5. HHKJanuary 26, 2012

    Sangat Membantu Saya :)
    Thanks Gan!!

    ReplyDelete
  6. Fandy WahanaputraFebruary 07, 2012

    mantap gan.thanks ilmunya !!

    ReplyDelete
  7. Ahmad MaryukiFebruary 07, 2012

    # 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
  8. kios herbalFebruary 16, 2012

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

    ReplyDelete
  9. FirdausTech.comMarch 16, 2012

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

    ReplyDelete
  10. Ahmad MaryukiMarch 16, 2012

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

    ReplyDelete
  11. UnknownMarch 17, 2012

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

    ReplyDelete
  12. UnknownMarch 21, 2012

    ALus!!

    ReplyDelete
  13. GO-LeMApril 16, 2012

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

    ReplyDelete
  14. IkhsanApril 29, 2012

    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
  15. Ahmad MaryukiApril 30, 2012

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

    ReplyDelete
  16. iniboiMay 27, 2012

    saya ijin copas ya, makasih sebelumnya

    ReplyDelete
  17. Sejuta Trik BloggerMay 27, 2012

    # Putra Jogja
    Silahkan sob. thanks kunjungannya

    ReplyDelete
  18. Darmawan SaputraJune 18, 2012

    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
  19. 90animaxJune 26, 2012

    thanks infonya bermanfaat baget gan :)

    ReplyDelete
  20. bramantyoSeptember 05, 2012

    sangat berguna dan terimakasih

    ReplyDelete
  21. Komunitas Blogger Kalimantan SelatanSeptember 26, 2012

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

    ReplyDelete
  22. Let it flow ...October 06, 2012

    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
  23. UnknownOctober 25, 2012

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

    ReplyDelete
  24. ikalotusOctober 27, 2012

    gabung..... bloger lubuklinggau izin gabung

    ReplyDelete
  25. UnknownOctober 31, 2012

    makasi gan

    ReplyDelete
  26. Lintas HarianDecember 08, 2012

    wah sangat bermanfaat Sobat :)

    ReplyDelete
  27. Info TerbaruDecember 08, 2012

    thanks infonya mas
    ^_^

    ReplyDelete
  28. Jobskoe | Lowongan Kerja TerbaruDecember 18, 2012

    wah manteebb nih , thanks infonya mas :D

    ReplyDelete
  29. rumah faqihDecember 21, 2012

    maturnuwun, mas.akhirnya bisa ganti juga.

    ReplyDelete
  30. UnknownJanuary 07, 2013

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

    ReplyDelete
  31. didy amzaJanuary 24, 2013

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

    ReplyDelete
  32. MalmainanJanuary 26, 2013

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

    ReplyDelete
  33. SACRED 99th GroundJanuary 29, 2013

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

    ReplyDelete
  34. New_era.im6gresikJanuary 30, 2013

    thanks mas atas infonya...newbi ..heheheh

    ReplyDelete
  35. UnknownFebruary 01, 2013

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

    ReplyDelete
  36. UnknownFebruary 05, 2013

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

    ReplyDelete
  37. Tips Trik BloggerFebruary 09, 2013

    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
  38. Bangka Belitung TourFebruary 19, 2013

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

    ReplyDelete
  39. lulus utamiFebruary 23, 2013

    Wah lengkap sekali gan informasinya.

    ReplyDelete
  40. semua ada disiniFebruary 28, 2013

    bermanfaat sekali infonya sob,,,

    ReplyDelete
  41. Poetrafoto Wedding Photographer IndonesiaMarch 06, 2013

    Mantab ini. sangat bermanfaat buat kami yang sedang belajar.

    ReplyDelete
  42. Payz0March 11, 2013

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

    ReplyDelete
  43. Service Laptop GratisMarch 21, 2013

    Mantap informasinya, makasih bos...........

    ReplyDelete
  44. UnknownMarch 23, 2013

    Thanks gan..

    like blog ane gan

    www.andro-black.blogspot.com

    ReplyDelete
  45. Poetra SaktiApril 08, 2013

    tetep belum mudeng tentang blogspot gan...

    ReplyDelete
  46. UnknownMay 02, 2013

    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!