Kamis, 23 Oktober 2014

Menambahkan lebar postingan Pada Blog

Ok sob ini merupakn kendala yg pernah saya alami. Maka dari itu saya akan cuba cuba memPOSkan Menambahkan lebar postingan Pada Blog. Agar para nubie seprti saya tidak terjebak .
ok langsung:


- AWAL MASALH
NAH INI DIA SIAP SIAP BOTAK DEH... WKWKWKKW

Menurut salah satu yg saya googling dan hampir semua
nieee...!!
Caranya mudah saja, anda tinggal memperhatikan pengaturan stylish CSS atau declaration yang ada didalam elemen wrapper yaitu pada bagian width atau height. Misalnya saya contohkan 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;
}

Pada kode header diatas memperlihatkan bahwa header terbagi menjadi 2. Lebar total bagian header ini adalah 990px, dimana terdiri dari header-left (perhatikan kode penempatan/posisi 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;
}

Akhirnya nemu juga nih kode template yang bisa mewakili apa yang ingin saya jelaskan ! 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 ngga 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. Kalau sobat masih bingung copy atau bookmark aja tulisan ini biar bisa dibaca lagi karena saya sudah berusaha menuliskan sejelas mungkin


Read more: http://www.rayhanzhampiet.com/2012/05/menambah-mengubah-lebar-posting.html#ixzz3H06ftuLj



 Berbeda dengan saya cukup
- Sign ke akun blog masing masing
- Bla Bla dst
sampai
lanjut


trus gan

aakhirnya

OK DAH SELESAI POSTINGAN ANCURKU INI TRIMS AND OJO LALI KOMENT DAN LIKE NYA KLW BERMANFAAT .



Tidak ada komentar:

Posting Komentar