Home » » Cara Mengatasi Tata Letak Blog Yang Berantakan

Cara Mengatasi Tata Letak Blog Yang Berantakan

Mengatur Tata Letak Elemn Blog, Mengedit Tata Letak Blog.

Pernahkan teman mengalami tata letak yang berantakan seperti gambar di sebelah ini..? Tata letak yang kelihatan seperti di gambar membuat kita merasa tidak puas dengan hasil blog yang sudah kita buat dengan susah payah. Tata letak yang berantakan diakibatkan kita sering bongkar pasang widget, dan edit templat.

Perlu kita ketahui bahwa pada kode perbaikan tata letak pada setiap template adalah berbeda, namun elemen pada  setiap template pada dasarnya adalah :
1. Outer-Wrapper.
2. Header-Wrapper.
3. Main-Wrapper.
4. Sedebar-Wrapper.
5. Footer-Wrapper.


Untuk Template yang seperti Miniblogger28 ini, mempunyai 2 header, yaitu header left dan header right. Untuk memperbaiki tata letak di miniblogger28 ini admin menggunakan petunjuk dari Kang Ismet. Hal ini sudah saya coba dan berhasil.
1. Ketahui dulu ukuran komponen yang ada di blog yang dimiliki.
2. Silakan tulis kembali ukuran dan posisi komponen blog yang kita miliki dengan cara mengcopy paste kode di bawah ini pada notepad dan lakukan perubahan-perubahan sesuai dengan uuran dan posisi template.

#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}

3. Setelah melakukan perubahan pada ukuran komponen template, lakukan penyimpanan kode di atas diantara kode menonaktifkan CSS Reset. Perhatikan tempat penyimpanan di bawah ini.

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

Hingga akhir penyimpanannya seperti di bawah 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>

Kode di atas artikel dari Kang Ismet dan telah saya coba pada blog yang saya punya. Ini mungkin karena sesuai dengan model template Miniblogger28 yang kebetulan mempunyai 2 header.

Bagi yang ingin mencoba silakan mencoba. Semoga berhasil.

Sumber : Kang Ismet

0 komentar:

Post a Comment

* Komentarlah yang sopan dan tidak mengandung sarah.
* Jangan gunakan Kotak Komentar dengan promosi produk serta usaha yang anda miliki. Silakan gunakan sarana Review Produk dan Jasa di blog ini. Maaf, akan dihapus.
* Terima kasih atas kunjungan, komentar dan partisipasi yang diberikan.

.