Mengatasi Tata Letak Blogger yang Acak-Acakan

Baca Juga

BERIKUT ini tips cara mengatasi masalah Layout (Tata Letak) Template Blog di Dashboard yang bertumpuk, tidak tapi, error, bermasalah, ada titik-titik, terhalang satu sama lain, pokoe kacow lah!

"Dapur" blog kita untuk mengatur widget/gadget itu pun jadinya gak enak dipandang, meski cuma kita sebagai admin yang bisa ngeliatnya!

Have a look the contohnya:

"Kekacauan" itu terjadi biasanya setelah melakukan modifikasi template.

Setelah Googling, maka ditemukan solusinya, yaitu dengan membuat dan menambahkan kode CSS tertentu ke dalam template, guna mengatur tampilan layout blog agar rapi.

Saya masukkan kode sebagai berikut di bawah kode <b:skin><![CDATA[

body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:300px;float:left;margin-top:30px}
body#layout #header2 {width:500px;float:right}
body#layout .main-wrapper {width:550px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right}
body#layout #footer {width:970px}
.footer {width:215px;float:left}
body#layout ul {display: none}

Hasilnya, alhamdulillah wasyukurillah... layout blogger jadi rapi ahmad brow!

Kode mengatasi layot blogger yang acak-acakan di atas, belum tentu cocok dengan template blog Anda. Soalnya, kode template 'kan kadang suka beda-beda.

Intinya sih, kode atau elemen utama template terdiri dari:
1. Outer-Wrapper
2. Header-Wrapper
3. Main-Wrapper
4. Sidebar-Wrapper
5. Footer-Wrapper

Nah, sesuaikan saja dengan nama-nama itu. Cari yang mirip-mirip, juga soal tanda di depannya, titik (.) apa pagar (#).

SUMBER KODE
Ini dia sumber-sumber kode yang saya gunakan untuk merapikan layout blogger di atas.

Jika widget/gadget berjejer ke bawah semua, gunakan tips dari Kang Ismet ini.

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

Simpan (Copas) di posisi ini:

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

EXAMPLE:

&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>

Jika di tata letak blog ada titik-tiki doang, seperti gambar pertama di atas, maka gunakan kode ini:

body#layout ul {display: none;}

Copy dan paste di atas kode ]]></b:skin>

CARA LAIN
Jika cara-cara di atas masih gagal, maka coba tips dari  PBT berikut ini:

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout #outer-wrapper{overflow:visible;width:1000px}
body#layout #header{float:left;width:240px}
body#layout #header2{float:right;width:240px}
body#layout .add_widget{width:240px}
body#layout div.widget{width:240px}
body#layout #sidebar-wrapper{overflow:visible;width:240px}
body#layout #lsidebar-wrapper {overflow:visible;float:left;width:240px;margin-right:50px;} body#layout #main-wrapper{overflow:visible;float:left;width:240px}
body#layout #rsidebar-wrapper{overflow:visible;float:right;width:240px}
body#layout #myGallery{display:none}
body#layout .featuredposts {display:none}
body#layout .fp-slider{display:none}
body#layout #navcontainer {display:none}
body#layout .menu-secondary-wrap{display:none}
body#layout .menu-secondary-container{display:none}
body#layout #skiplinks{display:none}
body#layout .feedtwitter{display:none}
body#layout div.section{font-family:sans-serif;margin:0 auto 2px;padding:0 0 10px 0;position:relative;overflow:visible}
body#layout .section-columns{margin:0} .section{width:100%}

Simpan kode tersebut di bawah kode seperti ini:

/*
Blogger Template Style
Name
Author st
*/


atau di atas

/* Variable Definitions
bla bla.....
*/

BERTUMPOK DOANG?
Jika cuma  bertumpuk, ada yang saling menghalangi, maka coba gunakan kode "pemisah" antar-elemen berikut ini:

<div class='clear'/>

Ini contoh pemasangannya:

<div id="header">
.......................
.......................
</div>

<div class='clear'/>


<nav id='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Privacy Policy</a></li>
</ul>
</nav>

<div class='clear'/>

<div class='content-wrapper'>

Itu dia Cara Mengatasi Tata Letak Blogger yang Acak-Acakan. Bukan untuk newbie memang, tapi coba saja. Kalau pusing dan gagal, ganti template saja!