September 2, 2016

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.

Layout Blogger Acak-Acakan

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:

<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'>


#3. Mengatasi Layout Widget Berjejer ke Bawah
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}

Simpan (Copas) di posisi teks warna merah:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[ simpan kode CSS di sini*/]]></b:skin>

Contoh:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <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>

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:

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%}

2. Simpan atau Paste (Ctrl+V) di bawah kode seperti ini:

/* 
Blogger Template Style
Name
Author st
*/

atau di atas kode:

/* Variable Definitions 
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}

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
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

9 comments on Cara Memperbaiki Layout (Tata Letak) Blogger yang Acak-Acakan

  1. 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 ?

    ReplyDelete
  2. Boleh nih.. Makasih banget infonya😊

    ReplyDelete
  3. BUset dah gan, susah banged ya. Anda ane ngerti nih code-code script mungkin gampang kali ya. Pusing cari solusinya.

    ReplyDelete
  4. Saya 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.

    ReplyDelete
  5. Ooke,,, 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

    ReplyDelete

Contact Form

Name

Email *

Message *