B 007 : Cara Menambah Lebar Tampilan Template Blogger Kesayangan Anda
Sebelumnya anda sudah mengenal bagian-bagian template blogger. Sekarang adalah bagaimana menambah lebar dari bagian-bagian template tersebut, dan untuk menambah lebarnya, anda harus memiliki rumusnya.
Body
Body | |||||||||||||
Perhatikan skema di atas, untuk mengubah lebar, rumusnya adalah seperti ini :
Wrapper = Header + Header Ads = Sidebar + Main Wrapper = Footer
atau
Wrapper > Header + Header Ads = Sidebar + Main Wrapper = Footer
(Beberapa template blog biasanya mendukung, namun kadang kelihatan tidak rapi di beberapa template blogger yang lain jika menggunakan rumus ini, disebabkan lebar Wrapper tidak sama panjang dengan lebar yang lainnya)
Format size yang digunakan adalah px dan %. Jika lebar Wrapper atau Outer-Wrapper adalah 1300px, maka Header dan Header Ads yang bisa dirancang adalah Header = 300px dan Header Ads = 1000px.
Selain itu anda juga bisa menggunakan skala ukuran persen, sehingga biarkan skala ukuran itu yang menentukan secara otomatis dari lebar seluruhnya. Misalnya lebar seluruhnya adalah selebar Wrapper = 1300px, lalu untuk Header + Header Ads = 100% = 1300px, dan anda bisa memberikan bagian untuk Header adalah 25% dari 1300px dan bagian untuk Header Ads adalah 75% dari 1300px, dan hitungan otomatis pun untuk lebar Header dan Header Ads akan diterapkan.
Hal yang serupa juga bisa dilakukan untuk menentukan lebar Sidebar dan Main Wrapper, begitu juga dengan Footer.
Setelah mengetahui rumusnya, selanjutnya adalah membuka Editor HTML blogger anda, dan cari kode yang mirip dengan kode di bawah ini :
1. Wrapper atau Outer-Wrapper
#wrapper{
background:#33FF33;
width:1300px;
overflow:hidden;
margin:0 auto;
padding:10px;
}
2. Header dan Header Ads
#header-wrapper{color:#fff;text-align:left;background:#006600;width:100%;overflow:hidden;}
#header{width:25%;overflow:hidden;float:left;}
#header-ads{width:75%;overflow:hidden;float:right;}
3. Menu Bar
.menupic{width:100%;margin:0 auto;padding:0 auto;}
.menuhorisontal{background:#e9e9e9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv62CH7Hi2Tc0q3zjBToXTnP-u-TSQlUgIRFz4Bq-d1U-GSP7tNJwhUICjYFsNYEXqTsNcEcqlZqwi0UqUyMXOHtb9vEc60RK_5bG9TeGyhTE8Lw8rT8oFuvQVKmixf7glL2LJK06MnhU/s1600/bg_menu.gif) repeat-x bottom left;width:100%;height:30px;margin:0 auto; padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;border-top:solid 1px $bordercolor;}
4. Artikel Wrapper atau Main Wrapper
#artikel-wrapper{background:#fff;float:right;width:75%;overflow:hidden}
5. Sidebar
#sidebar-wrapper{background:#fff;float:left;width:25%;overflow:hidden}
6. Footer
#footer-wrapper{width:100%;clear:both}
Teks yang berwarna merah adalah ukuran lebar dari template anda, ini hanyalah contoh dan anda bisa menerapkannya di template anda. Contoh ini hanya untuk satu Sidebar, dan bagi anda yang templatenya memiliki lebih dari satu, anda bisa membagi-bagi berapa lebar untuk masing-masing Sidebar template anda. Sidebar utama biasanya berkodekan #sidebar-wrapper, dan Sidebar lainnya biasanya berkodekan #sidebarright-wrapper dan #sidebarleft-wrapper.
0 Response to "B 007 : Cara Menambah Lebar Tampilan Template Blogger Kesayangan Anda"
Post a Comment