Adding a second sidebar to your new template
The Challenge
Sekarang anda telah belajar tentang section. Ini adalah postingan yang akan membahas bagaimana mudahnya menambahkan sebuah sidebar ke template anda. dan kabar lebih baiknya, anda bisa mengaturnya sidebar ini di Page Element Layout.
How it works
New template menggunanan tag <div> untuk “wrappers” atau pembungkus di setiap sectionya.
Header berada dalam “header-wrapper”, sidebar berada dalam “sidebar-wrapper”, main section berada dalam “main-wrapper” dan footer berada dalam “footer-wapper”. Main-wrapper dan sidebar-wrapper berada dalam content-wrapper. Header, content dan footer semuanya berada dalam outer-wrapper.
Codenya seperti berikut :
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section id='header' class='header' ....>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section id='main' class='main' ....>
</div>
<div id='sidebar-wrapper'>
<b:section id='sidebar' class='sidebar' ....>
</div>
</div>
<div id='footer-wrapper'>
<b:section id='footer' class='footer' ....>
</div>
</div>
Anda pastinya akan gampang mengenali struktur dan template anda.
Ada 3 langkah mudah yang harus dilakukan untuk menambahkan sidebar:
Tambahkan sebuah “wrapper” sidebar ke blog anda, ini berada di dalam content-wrapper dan di atas main-wrapper.
Tambahkan sebuah section di dalam “wrapper” ini, beri sebuah unique ID ( contohnya leftsidebar) dan set class nya menjadi ‘sidebar’.Ini codenya :
<div id='leftsidebar-wrapper'>
<b:section id='leftsidebar' class='sidebar' preferred='yes'/>
</div>
pada css anda ( yang terletak diantara <head> dan </head> ) tambahkan sebuah #leftsidebar-wrapper, dan set ke float left.
Atur lebar sidebar andam dan main-wrapper anda.
Editing your new sidebar
Sekarang masuklah ke layout editor, dana anda akan melihat sebuah sidebar baru, dana anda bisa menambahkan page element di sidebar tersebut.
Sekarang anda telah belajar tentang section. Ini adalah postingan yang akan membahas bagaimana mudahnya menambahkan sebuah sidebar ke template anda. dan kabar lebih baiknya, anda bisa mengaturnya sidebar ini di Page Element Layout.
How it works
New template menggunanan tag <div> untuk “wrappers” atau pembungkus di setiap sectionya.
Header berada dalam “header-wrapper”, sidebar berada dalam “sidebar-wrapper”, main section berada dalam “main-wrapper” dan footer berada dalam “footer-wapper”. Main-wrapper dan sidebar-wrapper berada dalam content-wrapper. Header, content dan footer semuanya berada dalam outer-wrapper.
Codenya seperti berikut :
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section id='header' class='header' ....>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section id='main' class='main' ....>
</div>
<div id='sidebar-wrapper'>
<b:section id='sidebar' class='sidebar' ....>
</div>
</div>
<div id='footer-wrapper'>
<b:section id='footer' class='footer' ....>
</div>
</div>
Anda pastinya akan gampang mengenali struktur dan template anda.
Ada 3 langkah mudah yang harus dilakukan untuk menambahkan sidebar:
Tambahkan sebuah “wrapper” sidebar ke blog anda, ini berada di dalam content-wrapper dan di atas main-wrapper.
Tambahkan sebuah section di dalam “wrapper” ini, beri sebuah unique ID ( contohnya leftsidebar) dan set class nya menjadi ‘sidebar’.Ini codenya :
<div id='leftsidebar-wrapper'>
<b:section id='leftsidebar' class='sidebar' preferred='yes'/>
</div>
pada css anda ( yang terletak diantara <head> dan </head> ) tambahkan sebuah #leftsidebar-wrapper, dan set ke float left.
Atur lebar sidebar andam dan main-wrapper anda.
Editing your new sidebar
Sekarang masuklah ke layout editor, dana anda akan melihat sebuah sidebar baru, dana anda bisa menambahkan page element di sidebar tersebut.
Komentar