Entri Populer

Arsip Blog

Diberdayakan oleh Blogger.

ShoutMix chat widget
</div>
Selasa, 20 Mei 2014

Cara Menambah Dan Merubah Lebar Postingan Blog

18.50 | Diposting oleh | | Edit Entri

  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.