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.
Sebagai pengenalan awal , anda harus mengenal dulu elemen dalam susunan CSS template yang disebut dengan wrapper.
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 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 CSS nya ada pada bagian /* ----- MAIN ----- */.
4. Main-wrapper : pada template ditandai dengan kode CSS #main-wrapper , #main-wrap atau #main , 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.
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.
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.
Jika anda masih bingung , silahkan copy atau bookmark saja tulisan ini biar bisa anda baca lagi karena saya sudah berusaha menuliskan sejelas mungkin.
Dari apa yang saya jelaskan tentang Cara Mengubah Menambah Lebar Header , Posting , Sidebar dan Footer di Blogspot ini mudah-mudahan bisa memberikan pemahaman untuk 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 ehingga blog anda tambah siiiiipppppppppp tampilannya.
Semoga bermanfaat...!!!
Sebagai pengenalan awal , anda harus mengenal dulu elemen dalam susunan CSS template yang disebut dengan wrapper.
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 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 CSS nya ada pada bagian /* ----- MAIN ----- */.
4. Main-wrapper : pada template ditandai dengan kode CSS #main-wrapper , #main-wrap atau #main , 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;
}
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.
Jika anda masih bingung , silahkan copy atau bookmark saja tulisan ini biar bisa anda baca lagi karena saya sudah berusaha menuliskan sejelas mungkin.
Dari apa yang saya jelaskan tentang Cara Mengubah Menambah Lebar Header , Posting , Sidebar dan Footer di Blogspot ini mudah-mudahan bisa memberikan pemahaman untuk 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 ehingga blog anda tambah siiiiipppppppppp tampilannya.
Semoga bermanfaat...!!!
My Facebook
Kirim SMS Gratis
Download Gratis
Contact on Email
Follow this blog
RSS