Selasa, 26 Juni 2012

Cara Menambah Dan Merubah Lebar Postingan Blog

21 komentar
Tutorane - Cara Menambah Dan Merubah Lebar Postingan Blog, Postingan ane kali ini tentang menambah/mengurang lebar posting, ukuran header, Outer dan lain-lain. Ane sudah mencobakan tutorial ini pada blog berita dan informasi ane dan tutorial ini 100% berhasil, jadi untuk sobat yang ingin mencoba atau sekedar menambah ilmu mari langsung saja akan ane share Cara Menambah Dan Merubah Lebar Postingan Blog :


 

Berikut penjelasan dari gambar diatas :

  • Outer-wrapper   - Maksudnya  adalah lebar/ukuran template secara keseluruhan dimana didalam outer-wrapper ini terdapat bagian header, posting, sidebar dan footer. Pada template kamu ditandai dengan kode CSS #outer-wrapper,#outer-wrap atau juga bisa #outer.
  • Header-wrapper - Pada template kamu ditandai dengan kode CSS #header-wrapper, #header-wrap atau #header. Untuk yang templatenya memiliki 2 header atau lebih maka kode CSS nya akan ada 2 atau sesuai header yang ada pada template kamu. Misalnya terdapat 2 header dalam template kamu, maka kode CSS nya juga ada 2 yaitu #header dan #header2. Yang membedakannya hanya float right dan float left. Ukuran lebar menu navigasi yang ada dibawah atau diatas header biasanya jsama
  • Content-wrapper - Ditandai dengan kode CSS #content-wrapper, #content-wrap atau #content pada template kamu, jika tidak terdapat kode CSS ini, berarti berarti untuk area posting dan sidebar pengaturan CSS nya ada pada bagian /* -----   MAIN   -----  */.
  • Main-wrapper - Ditandai dengan kode CSS #main-wrapper, #main-wrap atau #main. Area posting berada pada main-wrapper ini.
  • Sidebar-wrapper - Ditandai dengan kode CSS #sidebar-wrapper, #sidebar-wrap atau #sidebar.  Terkadang di beberapa template tertentu, terdapat kode yang seperti ini lebih dari 1, jadi sah-sah saja jika didalam template kamu  ada beberapa kode sidebar yang ditulis secara urut seperti #sidebar-wrapper, #sidebar1-wrapper atau #sidebar1 dan #sidebar2.
  • Footer-wrapper - Ditandai dengan kode CSS #footer-wrapper atau biasanya juga terdapat dibawah kode /* -----Footer Content----- */ atau /* -----Footer Wrapper----- */. 
 Ok, nah itulah penjelasan singkat nya dari ane, sekarang kita masuk ke bagian mengubah Menambah Lebar Header, Posting, Sidebar dan Footer. 
 
Untuk mengubah Menambah Lebar Header, Posting, Sidebar dan Footer caranya tidaklah sulit, kamu tinggal pengaturan stylish CSS atau declaration yang ada didalam elemen wrapper yaitu pada bagian width atau height. Contohnya untuk bagian header, posting dan sidebar

/* Header
----------------------------------------------- */
.idheadpic{width:100%;margin:0 auto;padding:0px 0px 0px 0px;}
#idhead {
  background:#fff;filter:alpha(opacity=90);opacity:0.9;
  width:990px;padding:5px 0 5px 0;
  margin:0 auto;
  border:0px solid $bordercolor;
  }
#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
#header {background:transparant;
  float:left;
  width: 179px;
  margin-left: 10px; text-align: left;
  color:#f2f2f2;
}
#header2 {float:right;
  margin-right:9px;margin-top:4px;padding-bottom:4;
  width:730px;text-align: right;
  background:transparant; height:90px;
}
Untuk kode diatas, terdapat 2 header, Lebar total bagian header ini adalah 990px, dimana terdiri dari header-left (posisinya di  heder: float-left) dengan lebar 179px dan header-right dengan lebar 730px. Jika kita jumlahkan lebar header1 + header2 + margin + padding = lebar total header. Kemudian cara membaca margin dan padding prinsipnya sama yaitu dari atas dan berputar searah jarum jam. Misalkan padding: 6px 8px 6px 6px;  maka yang dimaksud adalah padding-top 6px, padding-right 8px, padding-bottom 6px dan padding-left 6px. Padding adalah jarak antara teks atau image ke tepi batas elemen wrapper. Sedangkan Margin biasanya jarak antara 2 wrapper misalnya antara area posting dan sidebar dipisahkan oleh margin

/* Main containers */
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 630px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;    
}
#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
/* Post */
.post{
width: 600px;
padding: 15px;
border: 1px solid #E0E0DE;
background: #FFF;
font-family: Helvetica, sans-serif;
margin-bottom: 20px;
}

Perhatikan susunan CSS diatas karena sudah merangkum bagian outer-wrapper, main-wrapper (posting) dan sidebar-wrapper. Pada outer-wrapper disebutkan lebarnya 950px, sedangkan pada main-wrapper dan sidebar-wrapper lebarnya masing-masing adalah 630px dan 300px. Kalau dijumlahkan jumlah keduanya adalah 930px. Sisa 20px dapat disimpulkan adalah margin kiri main-wrapper+margin antara main-wrapper dan sidebar-wrapper+margin kanan sidebar wrapper, sehingga jumlahnya 20px dan total menjadi 950px. Pada susunan CSS diatas disetting auto sehingga kita tidak mengetahui persis berapa nilai tiap margin namun yang pasti ada 3 jarak margin yang diperhitungkan. Sambil membaca penjelasan ini lihat lagi gambar ilustrasi elemen wrapper diatas ya biar tidak bingung. Kemudian perhatikan lagi bagian posting (post). Pada kode CSS nilai lebarnya 600px, ini sudah merupakan lebar teks atau artikel yang kita tulis. Padding 15px berlaku untuk top, right, bottom dan left. Sehingga jumlah post width 600px + padding left 15px + padding right 15px = lebar main-wrapper 630px.
 Itulah penjelasan singkat dan padat dari ane tentang Cara Menambah Dan Merubah Lebar Postingan Blog. Sekian dulu ya, udah malam nih, ane juga mau tidur :D wkwk.

Ditulis Oleh : Ikhbal Gusri

Artikel Cara Menambah Dan Merubah Lebar Postingan Blog ini ditulis oleh Ikhbal Gusri pada hari Selasa, 26 Juni 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Menambah Dan Merubah Lebar Postingan Blog dapat Anda sampaikan melalui kotak komentar dibawah ini.

:: Dapatkan Widget Ini ! ::

21 Responses so far

  1. ini yang sedang saya cari. terimakasih share nya. salam

  2. Ezer says:

    Makasih infonya

  3. Mas, kalau main wrapper kita kecilkan, apakah secara otomatis sidebar menyesuaikan? atau perlu setting manual? TQ infonya

  4. terima ksih gan, ane lagi butuh info ini

  5. Amir says:

    Sorry nich om, Bisa kunjungin Blog saya ga? Tolong diliatin dah, pada kotak KOMENTAR, ko' garis kotak yg kanan hilang, ga sama ma kotak postingannya, knapa yach? bisa kasih petujuk ga, terima kasih bgt klo komen sy di respon,

  6. TataCinta says:

    untuk wordpress ada gak gan???

  7. terima kasih GGGGGGWKWWKWKK

  8. template baru blogger sudah tidak sama lagi gan, kita juga sudah tidak menemukan kata wrapper... saya juga masih pelajari lebih jauh

  9. Thanks bermanfaat gan.

  10. keren saya terapkan di blog saya dan sukses,,tanks

  11. wahyudi says:

    kalo tampilan di mobile agak melebar , gmn solusinya ?

  12. Indria says:

    lebih susah bagi saya untuk mencari kode di wordpress. soal kode masih asing

  13. jony says:

    terimakasih infonya,,

  14. copas punya orng ,,anjing

  15. waduh malah puyeng mas,,,maklum pemula....

  16. Pusing mas penjelasannya. Tapi thanks ud mau berbagi.

    Mampir juga ke blog ane
    Https://blog-inspiratiff.blogspot.co.id

  17. S1B febry says:

    top gan, sangat membantu.
    tolong bantu cek ya https://febrycell80.blogspot.com kritik dan sarannya di tunggu. trims

  18. S1B febry says:

    siap gan, mampir jga ke kedai ane y https://febrycell80.blogspot.com

  19. Gara2 hapus kolom gambar yang selalu ikut dipostingan,bagian artikelnya jadi gak melebar ke kiri mengisi bekas kolom gambar. Ini kalau diubah kacau gak ya gan

Leave a Reply

Berkomentar dengan menggunakan bahasa yang baik dan santun,dilarang menautkan link hidup dan komentar yang admin anggap SPAM akan dihapus.