Mengetahui ukuran lebar header, posting, sidebar, footer atau lebar template secara keseluruhan penting untuk diketahui. Sehingga saat anda ingin mengedit template, mengubah atau menambah lebar bagian-bagian template tadi, anda sudah mengetahui dibagian mana yang harus anda rubah/edit. Nah sebagai pengenalan awal, sobat harus mengenal dulu elemen dalam susunan CSS template yang disebut dengan wrapper. Artikel ini sekaligus menjawab email yang saya terima dari seorang sobat blogger yang menanyakan bagaimana cara menambah/mengubah lebar posting.
Nah dari gambar diatas saya jelaskan dulu satu-satu maksudnya :
1. Outer-wrapper : pada template ditandai dengan kode CSS #outer-wrapper, #outer-wrap atau #outer. Maksudnya adalah lebar/ukuran template secara keseluruhan dimana didalam outer-wrapper ini terdapat bagian header, posting, sidebar dan footer.
2. Header-wrapper : pada template ditandai dengan kode CSS #header-wrapper, #header-wrap atau #header. Pada beberapa template bagian header ini ada juga yang terbagi dari 2 seperti pada template saya ini, maka kode CSSnya juga ada 2 seperti ini #header dan #header2. Yang membedakan posisinya adalah float right dan float left. Ukuran lebar menu navigasi yang ada dibawah atau diatas header juga biasanya sama.
3. Content-wrapper : pada template ditandai dengan kode CSS #content-wrapper, #content-wrap atau #content. Jika pada template anda tidak terdapat kode ini, berarti untuk area posting dan sidebar pengaturan CSSnya ada pada bagian /* ----- MAIN ----- */.
4. Main-wrapper : pada template ditandai dengan kode CSS #main-wrapper, #main-wrap atau #main. Nah pada bagian main-wrapper inilah area posting anda berada.
5. Sidebar-wrapper : pada template ditandai dengan kode CSS #sidebar-wrapper, #sidebar-wrap atau #sidebar. Pada template tertentu sidebar terkadang juga ada lebih dari 1. Jadi boleh jadi dalam template ada beberapa kode sidebar yang ditulis secara urut seperti #sidebar-wrapper, #sidebar1-wrapper atau #sidebar1 dan #sidebar2.
6. Footer-wrapper : pada template ditandai dengan kode CSS #footer-wrapper atau biasanya juga terdapat dibawah kode /* -----Footer Content----- */ atau /* -----Footer Wrapper----- */.
Cara Mengubah Menambah Lebar Header, Posting, Sidebar dan Footer
Setelah mengenal elemen wrapper seperti saya jelaskan diatas, berikutnya kita dapat mengubah atau mengedit lebar dari masing-masing elemen wrapper tersebut. 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.
Dari apa yang saya jelaskan tentang Cara Menambah Mengubar Lebar Postingan di Blogspot ini mudah-mudahan bisa memberikan pemahaman buat anda bagaimana cara mengatur atau mengetahui lebar area header, posting, sidebar dan footer. Baca juga Tips Lengkap Cara Mempercantik Tampilan Blog untuk menambahkan widget-widget keren pilihan sehingga blog sobat tambah siiiiipp tampilannya. Selamat mencoba !
Related Post:
Widget by [ Iptek-4u ]
0 comments:
Post a Comment