4 Cara Merapikan Layout Blog Yang Berantakan

4 Cara Merapikan Layout Blog yang Berantakan

Salah satu penyebab mengapa tata letak layout blog menjadi berantakan atau tidak rapi dikarenakan adanya aktifitas validasi HTML5 di dalam template blogger.

Selebihnya saya kurang tahu ya.

Yang pasti, itu memang ada kesalahan di dalam template blogger sehingga terjadinya error.

Contoh layout blog yang berantakan ibarat adanya bullets, - atau titik-titik hitam di layout blog, widget yang saling menghalangi (tertimpa), widget yang tidak pada kawasan semestinya dan semua error di layout blog lainnya.

Yang saya tahu, penyebab titik-titik hitam lingkaran (Bullets) di layout blog itu sebab validasi HTML5 dibagian Menu Horizontal pada aba-aba "Li" dan "uL" (Dropdown, Naik Turun).

Bingung? Lihat saja gambar dibawah ini. Nah... begitu tuh!

Sebenarnya layout blog yang awut-awutan ibarat pada gambar diatas tidak mensugesti kualitas SEO. Masalahnya itu hanya kurang lezat dipandang.

Kalau soal pemandangan di Homepage, gimana? Nggak ada yang salah kok, tidak ngaruh sama sekali. Tampilan blog tetap ibarat sediakala, masalahnya cuma error di tata letak blogger blogspot.

Apalagi jikalau mau mengedit, mengubah atau menyeret widget kesana-kemari, tentunya itu sulit.

4 Cara Merapikan Layout Blog yang Berantakan

"Kenapa sih caranya ada begitu banyak?" Diberbagai template blog, umumnya kode-kode yang terpasang itu berbeda-beda.

Ya meski pun template-nya bergaya simple, bukan berarti isi kodenya sama dengan template bergaya simple lainnya. Begitu juga kasusnya dengan template blogger bergaya gosip atau majalah online.

#1. Cara Mengatur Layout Blog yang Berantakan

1. Template > Cari aba-aba ]]></b:skin>
2. Copy aba-aba dibawah ini:

body#layout ul {
   display: none;
}

Atau:

#layout ul {
   display: none;
}

3. Paste (Tempel) diatas kode ]]></b:skin>
4. Simpan template

Apabila tidak menemukan aba-aba yang saya maksudkan diatas (]]></b:skin>), coba deh cari aba-aba </b:skin> saja tanpa ]]>.

#2. Mengatasi dan Memperbaiki Widget Blog yang Berjejer ke Bawah

Kalau situasi dan kondisinya widget blog di tata letak saling berjejer ke bawah, maka caranya ialah:

1. Cari kode */]]></b:skin>
2. Copy aba-aba dibawah ini:

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

3. Paste (tempel) diatas kode */]]></b:skin>

Apabila tidak menemukan aba-aba yang saya maksudkan diatas (]]></b:skin>), coba deh cari kode </b:skin> saja tanpa ]]>.

#3. Cara Mengatasi Layout Blog yang Berantakan

Kalau cara pertama diatas tidak mau, coba gunakan aba-aba dibawah 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%}

Atau gunakan aba-aba dibawah ini:

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:200px;float:left}
body#layout ul {display: none}

Kedua aba-aba diatas diletakkan TEPAT dibawah aba-aba <b:skin><![CDATA[.

Apabila tidak menemukan aba-aba yang saya maksudkan diatas (]]></b:skin>), coba deh cari kode </b:skin> saja tanpa ]]> atau <![CDATA[ tanpa <b:skin>.

#4. Cara Memperbaiki Widget Blog di Layout Blog yang Saling Bertumpuk (Menindih)

Kalau cara ini agak sedikit rumit ya, Guys. Singkatnya, kita harus memperbaikinya pribadi di dalam template blogger.

Setiap element di dalam blog, harus kita pasangkan aba-aba "Class Clear". Contohnya ibarat ini:

bla...bla...bla...
<div class='clear'/>
<nav id='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Tentang Saya</a></li>
<li><a href='#'>Dislcaimer</a></li>
<li><a href='#'>Layanan Kontak</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</nav>
<div class='clear'/>
<div class='content-wrapper'>
bla...bla...bla...
<div class='clear'/>
Bagian Sidebar disini...
<div class='clear'/>

Dan seterusnya hingga dikira layout blog tidak rusak lagi. Dicoba saja pelan-pelan ya :)

Nggak dapat juga? Hmm... keterlaluan nih! Coba baca artikel ini, Cara Menghilangkan Titik Hitam (Bullets) di Layout Blog.

Kalau tetep nggak dapat juga, nggak ada cara lain selain dengan cara manual. Masuk ke layout blog, INSPECT HALAMAN. Sumpah, ini tidak mengecewakan ribet. Haha...

Apabila ke semua cara diatas tidak berhasil dilakukan, ada 2 hal yang dapat Anda pilih sebagai jalan keluar. Membiarkannya ibarat itu; atau mengganti dengan template blogger lainnya.

Singkatnya ibarat ini, layout blog yang berantakan ibarat pada gambar itu tidak menjadi problem bagi kita maupun SEO. Sing penting, YAKIN...!!!*