Mengatasi Tata Letak Yang Bejejer ke Bawah Pada Dashboard

Mengatasi Layout Blog Yang Bejejer ke Bawah - Mungkin sobat pernah mengalami tata letak / page element / widget editor tidak seperti sebelumnya, akan tetapi berjejer kebawah, tidak jelas mana sidebar dan mana footer. Hal ini juga saya alami beberapa hari kebelakang setelah melakukan validasi CSS3.

Sebagian sobat banyak yang mengatakan dashboard error, padahal bukan error itu terjadi karena ada CSS yang hilang. CSS yang hilang diakibatkan karena menyembunyikan / menonaktifkan CSS Stylesheet Blogger, yang biasanya dilakukan untuk validasi CSS3 atau HTML5. Tidak jadi masalah ketika sobat sudah terbiasa dengan tampilan berjejer, saya pribadi lebih enak tampilan seperti biasa, lebih mudah memisahkan mana sidebar dan mana footer.

Intinya, tampilan widget editor / tata letak yang berjejer kebawah karena Menonaktifkan CSS Reset Stylesheet Blogger. Dan saat ini saya akan berbagi tutorial bagaimana mengembalikan tataletak widget editor seperti semula.

Cara Mengembalikan Tata Letak Yang Berjejer ke Bawah

LANGKAH 1 : Fahami ukuran komponen utama blog sobat

Biasanya, ukuran komponen utama sudah ada pada CSS blog, seperti #outer-wrapper #header-wrapper #main-wrapper dst. Untuk lebih memahami komponen utama blog sobat, saya contoh kan sepeti gambar di bawah ini :


LANGKAH 2 : Tulis kembali ukuran dan posisi komponen utama blog sobat.

Copy dari CSS yang ada, ukuran komponen utama blog. Sobat bisa menulisnya di notepad terlebih dahulu. Dari contoh gambar diatas, untuk penulisannya seperti ini :

#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:728px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}

LANGKAH 3 : Simpan kode diatas, diantara kode menon-aktifkan CSS Reset. Perhatikan posisi penyimpanannya!

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[ simpan kode CSS tadi di sini */]]></b:skin>

hasil akhirnya seperti ini :

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:729px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}
*/]]></b:skin>

Simpan template.

Selamat mencoba.. silahkan laporan di sini apabila masih ada kendala    :)