Memperbaiki Tata Letak Blog Yang Berjejer ke Bawah

Memperbaiki Tata Letak Blog Yang Berjejer ke Bawah - Bagi para blogger yang sudah lama berkecimpung di dunia blogger permasalahan ini mungkin sudah sering dialami tapi bagi para pemula hal ini bisa saja belum pernah dialami dan jika mengalami ini sudah pasti mencari tahu solusinya baik itu bertanya pada bloger lain maupun dengan cara browsing.
Tata Letak yang berjejer kebawah sangat membingungkan karena kita tidak akan tahu bagian dari elemen tersebut dan permasalahan ini biasanya terjadi setelah melakukan validasi css3 namun demikian sebenarnya permasalahan ini tidak berpengaruh pada tampilan halaman hanya pada menu Tata Letak saja yang acak-acakan. Pada dasarnya permasalahan terjadi pada saat kita menonaktifkan CSS Reset yang tidak berfungsi setelah melakukan validasi css3

Disini saya akan mencoba berbagi kepada Anda yang masih pemula (newbie) untuk mengatasi permasalahan ini

Cara Memperbaiki Tata Letak Blog Yang Berjejer ke Bawah
1. Temukan Komponen Utama Blog
Nama dari Komponen Utama pada tiap blog berbeda-beda tergantung dari pembuat template tapi jika template tersebut bawaan blogger, sudah jelas komponen utamanya yaitu #outer-wrapper #header-wrapper #main-wrapper dan lain-lain.

2. Catat ukuran serta posisi komponen utama
Catat CSS pada komponen utama pada notepad seperti ukuran dan lain sebagainya, sebagai contoh:

#header-wrapper{width:1000px}
#outer-wrapper{width:1000px}
#footer-wrapper{width:1000px}
#header-left {width:300px;float:left}
#header-right {width:800px;float:right}
#main-wrapper {width:700px;float:left}
#sidebar-wrapper {width:350px;float:right}
.footer {width:350px;float:left}

3. Langkah selanjutnya copy dan paste kode di atas diantara kode yang berguna untuk menon-aktifkan CSS Reset.
Contoh:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[ Paste Kode Disini */]]></b:skin>

4. Sehingga perubahannya akan seperti dibawah ini:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[ #header-wrapper{width:1000px} #outer-wrapper{width:1000px} #footer-wrapper{width:1000px} #header-left {width:300px;float:left} #header-right {width:800px;float:right} #main-wrapper {width:700px;float:left} #sidebar-wrapper {width:350px;float:right} .footer {width:350px;float:left} */]]></b:skin>

Teliti kembali sebelum letak dari komponen tersebut dan jika sudah selesai silahkan simpan template.

Mudah-mudahan dengan cara ini apa yang menjadi permasalahan akan teratasi.

Tweet