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 seperti adanya bullets, - atau titik-titik hitam di layout blog, widget yang saling menghalangi (tertimpa), widget yang tidak pada tempat semestinya dan semua error di layout blog lainnya.

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

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

Sebenarnya layout blog yang acak-acakan seperti pada gambar diatas tidak mempengaruhi kualitas SEO. Masalahnya itu hanya kurang enak dipandang.

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

Apalagi kalau 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 berita atau majalah online.

#1. Cara Mengatur Layout Blog yang Berantakan

1. Template > Cari kode ]]></b:skin>
2. Copy kode 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 kode yang saya maksudkan diatas (]]></b:skin>), coba deh cari kode </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 kode 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 kode 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 kode 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 kode 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 kode diatas diletakkan TEPAT dibawah kode <b:skin><![CDATA[.

Apabila tidak menemukan kode 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 langsung di dalam template blogger.

Setiap element di dalam blog, harus kita pasangkan kode "Class Clear". Contohnya seperti 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 sampai dikira layout blog tidak rusak lagi. Dicoba saja pelan-pelan ya :)

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

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

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

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