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:
display: none;
}
Atau:
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-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 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 .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 <
Terimakasih telah membaca di Aopok.com, semoga bermanfaat mulai lah buat iklan gratis di Iklans.com dan lihat juga di situs berkualitas dan paling populer Piool.com, peluang bisnis online Topbisnisonline.com dan join di komunitas Topoin.com.
