Cara Memperbaiki Layout (Tata Letak) Blogger yang Acak-Acakan
September 2, 2016
Cara Mengatasi / Memperbaiki Layout Blogger yang Acak-Acakan.
TAMPILAN Layout (Tata Letak) Blog di Dashboard Blogger, untuk mengatur widget, mestinya normal, rapi, tidak acak-acakan, tidak ada titik-titik, juga tidak menumpuk dan tidak rapi, serta widget tidak saling menghalangi, melebar ke bawah semua, dan error lainnya
Biasanya, minimal muncul titik-titik setelah kita ganti navigasi menu atau pasang tambahan menu, misalnya menambah Top Menu Navigasi.
atau
2. Simpan atau Paste (Ctrl+V) di bawah kode seperti ini:
atau di atas kode:
Jika kode di atas tidak cocok, masih belum bisa mengatasi layout acak-acakan, coba gunakan kode berokut ini di bawah kode <b:skin><![CDATA[
TAMPILAN Layout (Tata Letak) Blog di Dashboard Blogger, untuk mengatur widget, mestinya normal, rapi, tidak acak-acakan, tidak ada titik-titik, juga tidak menumpuk dan tidak rapi, serta widget tidak saling menghalangi, melebar ke bawah semua, dan error lainnya
Biasanya, minimal muncul titik-titik setelah kita ganti navigasi menu atau pasang tambahan menu, misalnya menambah Top Menu Navigasi.
Cara Memperbaiki Layout (Tata Letak) Blogger yang Acak-Acakan
#1. Mengatasi Titik-Titik
Cara memperbaiki layout yang acak-acakan berupa titik-titik saja:
1. Template > Edit HTML
2. Simpan kode 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 kode penutup </div>
<div class='clear'/>
Contohnya:
Simpan (Copas) di posisi teks warna merah:
Contoh:
Jika di tata letak acak-ackan cuma ada titik-tiki doang, seperti gambar di atas, copy kode 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 dari Kang Ismet ini.
Copy kode:
Jika widget/gadget berjejer ke bawah semua, gunakan tips dari Kang Ismet 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 kode 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 acak-ackan cuma ada titik-tiki doang, seperti gambar di atas, copy kode berikut ini dan Simpan di atas kode ]]></b:skin>
body#layout ul {display: none;}
CARA LAIN
Dalalam Solution for Page Elements “Layout Mode” Broken problem disebutkan, cara memperbaiki layout acak-acakan adalah 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 kode seperti ini:
/*
Blogger Template Style
Name
Author st
*/
Blogger Template Style
Name
Author st
*/
atau di atas kode:
/* Variable Definitions
bla bla.....
*/
bla bla.....
*/
Jika kode di atas tidak cocok, masih belum bisa mengatasi layout acak-acakan, coba gunakan kode berokut 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 layaot blogger yang acak-acakan di atas, belum tentu cocok dengan template blog Anda.
Jika masih gagal juga, sebenarnya tidaka masalah, asalkan masih bisa edit widget, karena tata letak tersebut hanya muncul di dashboard, tidak muncul di tampilan blog sebenarnya.
Demikian Cara Mengatasi Tata Letak Blogger yang Acak-Acakan. Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Gan...blog ane widget tata letaknya terlalu lebar ke ke kanan dan tulisan Edit tak bisa diklik. Akibatnya saya tak bisa mengedit widget di blog ane. Nah...bagaimana itu cara mengatasinya ?
ReplyDeleteBoleh nih.. Makasih banget infonya😊
ReplyDeleteBUset dah gan, susah banged ya. Anda ane ngerti nih code-code script mungkin gampang kali ya. Pusing cari solusinya.
ReplyDeleteSaya coba kode diatas kok gak work yah om CB widget main blog dan widget sidebar menutupi widget atas yakni widget header dan widget disampingnya (leader board). Ada saran lain tdk sdh utak atik blom berhasil juga.
ReplyDeletemantap om is works
ReplyDeleteOoke,,, makasih mas,, saya coba trial reor dlue, soalnya layout blog saya agx berantakan hehe,, untuk id setiap tamplate berbeda2, hrus xtra nie cri id layout nya hehe
ReplyDeleteTetap aja gak bisa.
ReplyDeleteterimaksih
ReplyDeletesama-sama...
Delete