Memperbaiki Layout Blogger yang Acak-Acakan.
TAMPILAN Layout (Tata Letak) Blog di Dashboard Blogger, untuk mengatur widget, mestinya normal, rapi, tak acak-acakan, tak ada titik-titik, juga tak menumpuk dan tak rapi, serta widget tak saling menghalangi, melebar ke bawah semua, dan error lainnya
Biasanya, minimal muncul titik-titik sesudah kita mengganti navigasi sajian atau pasang pemanis menu.
Cara Memperbaiki Layout (Tata Letak) Blogger yang Acak-Acakan
#1. Mengatasi Titik-Titik
Cara memperbaiki layout yang berantakan berupa titik-titik saja:
1. Template > Edit HTML
2. Simpan isyarat berikut ini di atas kode ]]</b:skin>
body#layout ul {display:none;}
atau
#layout ul { display: none; }
#2. Mengatasi Layout Bertumpuk
Untuk memperbaiki tata letak widget yang hanya bertumpu dan ada saling menghalangi, maka coba gunakan "kode pemisah" antar-elemen div class atau div id berikut ini, di bawah tiap isyarat penutup </div>
<div class='clear'/>
Contohnya:
Simpan (Copas) di posisi teks warna merah:
Contoh:
Jika di tata letak berantakan hanya ada titik-tiki saja, ibarat gambar di atas, copy isyarat berikut ini dan Simpan di atas kode ]]></b:skin>
<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>
</ul>
</nav>
<div class='clear'/><div class='content-wrapper'>
.......................
.......................
</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>
</ul>
</nav>
<div class='clear'/><div class='content-wrapper'>
#3. Mengatasi Layout Widget Berjejer ke Bawah
Jika widget/gadget berjejer ke bawah semua, gunakan tips ini.
Copy kode:
Jika widget/gadget berjejer ke bawah semua, gunakan tips ini.
Copy kode:
#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}
#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 teks warna merah:
<style type="text/css"><!-- /* <b:skin><![CDATA[ simpan isyarat CSS di sini*/]]></b:skin>
Contoh:
<style type="text/css"><!-- /* <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>
#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 berantakan hanya ada titik-tiki saja, ibarat gambar di atas, copy isyarat berikut ini dan Simpan di atas kode ]]></b:skin>
body#layout ul {display: none;}
CARA LAIN
Dalam “Layout Mode” Broken problem disebutkan, cara memperbaiki layout berantakan merupakan sebagai berikut:
1. Copy (Ctrl+C) Kode Berikut ini:
1. Copy (Ctrl+C) Kode 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%}
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%}
2. Simpan atau Paste (Ctrl+V) di bawah isyarat ibarat ini:
/*
Blogger Template Style
Name
Author st
*/
Blogger Template Style
Name
Author st
*/
atau di atas kode:
/* Variable Definitions
bla bla.....
*/
bla bla.....
*/
Jika isyarat di atas tak cocok, masih belum sanggup mengatasi layout acak-acakan, coba gunakan isyarat berikut ini 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}
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}
Notes!
Kode mengatasi layout blogger yang berantakan di atas, belum tentu cocok dengan template blog Anda.
Jika masih gagal juga, bekerjsama tak masalah, asalkan masih sanggup edit widget, alasannya ialah tata letak tersebut hanya muncul di dashboard, tak muncul di tampilan blog sebenarnya.
Demikian Cara Mengatasi Tata Letak Blogger