Memperbaiki Tata Letak Template Blogger

October 05, 2019
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:

<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 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 isyarat 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 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:

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 isyarat ibarat ini:

/* 
Blogger Template Style
Name
Author st
*/

atau di atas kode:

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

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments