Membuat Sidebar Dan Main Wrapper Pindah Posisi

Teman mungkin pingin mengedit template blognya agar sidebar berpindah dalam posisinya... Seperti blog saya ini kalau posisi Homepage (Home) posisi sidebar ada di sisi kiri dan kanan dan posisi main wrappernya (data postingan) ada di posisi tengah. Tapi jika posisi page type posisi sidebar ada di kanan semua dan main wrappernya ada di kiri... Mau tahu rahasia di baliknya! Mari kita buktikan bersama.
Pertama teman login dulu ke blog teman terus "edit tata letak" lanjut lagi ke "edit html" pertama teman cari dulu script seperti ini

<div id='main-wrap1'>
<div id='main-wrap2'>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section>
</div></div>

nah yang berwarna biru itu adalah ID css dari main wrapper / data postingan. Yang berwarna merah saya cuma menunjukan saja agar teman tidak keliru, yang paling penting si teman perhatikan yang berwarna biru saja. Main wrapper saya di lindungi dua ID css yang satu <div id='main-wrap1'>
dan yang satu lagi <div id='main-wrap2'>
kenapa kamu saya sarankan memperhatikan div-div ini, karena setiap template pasti tidak ada yang sama bisa saja template teman dengan <div id='main-wrapper'>
nah jika bisa memahami kita ke sidebarnya

<div id='sidebarright'>

<b:section class='sidebar' id='rightmiddle'>
<b:widget id='HTML6' locked='false' title='Lirik Lagu' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Info Blog' type='HTML'/>
</b:section>
</div>

nah script sidebar di atas menunjukan ID dengan "sidebarright" sekarang kita ambil css ke duanya.

#main-wrap1{width:460px;float:left; margin-top:10px}

#main-wrap2{float:left;width:474px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmMVez6VRjZUdbvkQZQtWNNLXoTLtx-X1uGIJwMwUpx-YNErva-hOYthQtuUTgpuXN9iKrG7P6IEg0E_yMerM2oEG5pCLXauf0crL-QmL_-05HE23BQRQbOIpca_M_LDTrCjK3af081s/s1600/bg-kiri-kanan-tengah.png); border:1px solid #323232}

#sidebarright{width:200px;float:right;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmMVez6VRjZUdbvkQZQtWNNLXoTLtx-X1uGIJwMwUpx-YNErva-hOYthQtuUTgpuXN9iKrG7P6IEg0E_yMerM2oEG5pCLXauf0crL-QmL_-05HE23BQRQbOIpca_M_LDTrCjK3af081s/s1600/bg-kiri-kanan-tengah.png); border:1px solid #323232}

Perhatikan lagi yang berwarna biru. Masing-masing css itu di posisi default main wrapper ada di posisi kiri (float:left) dan sidebar ada di posisi kanan (float:right)
sekarang kita buat kopiannya seperti ini

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmMVez6VRjZUdbvkQZQtWNNLXoTLtx-X1uGIJwMwUpx-YNErva-hOYthQtuUTgpuXN9iKrG7P6IEg0E_yMerM2oEG5pCLXauf0crL-QmL_-05HE23BQRQbOIpca_M_LDTrCjK3af081s/s1600/bg-kiri-kanan-tengah.png); border:1px solid #323232}

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmMVez6VRjZUdbvkQZQtWNNLXoTLtx-X1uGIJwMwUpx-YNErva-hOYthQtuUTgpuXN9iKrG7P6IEg0E_yMerM2oEG5pCLXauf0crL-QmL_-05HE23BQRQbOIpca_M_LDTrCjK3af081s/s1600/bg-kiri-kanan-tengah.png); border:1px solid #323232}

Perhatikan lagi yang berwarna biru di atas sekarang kita sudah mengganti posisi masing-masing. Jika sudah di kopi dan di ganti posisi masing-masing. Teman tinggal menambahkan script seperti ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>                           </b:if>

Jadi Contohnya seperti ini dan jangan lupa juga selipkan tag <style>

<b:if cond='data:blog.pageType == &quot;item&quot;'><style>#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmMVez6VRjZUdbvkQZQtWNNLXoTLtx-X1uGIJwMwUpx-YNErva-hOYthQtuUTgpuXN9iKrG7P6IEg0E_yMerM2oEG5pCLXauf0crL-QmL_-05HE23BQRQbOIpca_M_LDTrCjK3af081s/s1600/bg-kiri-kanan-tengah.png); border:1px solid #323232}

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmMVez6VRjZUdbvkQZQtWNNLXoTLtx-X1uGIJwMwUpx-YNErva-hOYthQtuUTgpuXN9iKrG7P6IEg0E_yMerM2oEG5pCLXauf0crL-QmL_-05HE23BQRQbOIpca_M_LDTrCjK3af081s/s1600/bg-kiri-kanan-tengah.png); border:1px solid #323232}</style>

</b:if>

nah letakkan script nya tepat di atas kode </head> Akhir kata Semoga bermanfaat...