Mengatasi Tata Letak Blogger yang Acak-Acakan

Posted by | Follow @romeltea

BERIKUT ini tips cara mengatasi masalah Layout (Tata Letak) Template Blog di Dashboard yang bertumpuk, tidak tapi, error, bermasalah, ada titik-titik, terhalang satu sama lain, pokoe kacow lah!

"Dapur" blog kita untuk mengatur widget/gadget itu pun jadinya gak enak dipandang, meski cuma kita sebagai admin yang bisa ngeliatnya!

Have a look the contohnya:

Tata Letak Blogger yang Acak-Acakan

"Kekacauan" itu terjadi biasanya setelah melakukan modifikasi template.

Setelah Googling, maka ditemukan solusinya, yaitu dengan membuat dan menambahkan kode CSS tertentu ke dalam template, guna mengatur tampilan layout blog agar rapi.

Saya masukkan kode sebagai berikut 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}


Hasilnya, alhamdulillah wasyukurillah... layout blogger jadi rapi ahmad brow!

Tata Letak Blogger rapi


Kode mengatasi layot blogger yang acak-acakan di atas, belum tentu cocok dengan template blog Anda. Soalnya, kode template 'kan kadang suka beda-beda.

Intinya sih, kode atau elemen utama template terdiri dari:
1. Outer-Wrapper
2. Header-Wrapper
3. Main-Wrapper
4. Sidebar-Wrapper
5. Footer-Wrapper

Nah, sesuaikan saja dengan nama-nama itu. Cari yang mirip-mirip, juga soal tanda di depannya, titik (.) apa pagar (#).

SUMBER KODE
Ini dia sumber-sumber kode yang saya gunakan untuk merapikan layout blogger di atas.

Jika widget/gadget berjejer ke bawah semua, gunakan tips dari Kang Ismet ini.


#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 ini:

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

EXAMPLE:

&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 blog ada titik-tiki doang, seperti gambar pertama di atas, maka gunakan kode ini:

body#layout ul {display: none;}

Copy dan paste di atas kode ]]></b:skin>

CARA LAIN
Jika cara-cara di atas masih gagal, maka coba tips dari  PBT 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%}

Simpan kode tersebut di bawah kode seperti ini:

/*
Blogger Template Style
Name
Author st
*/


atau di atas

/* Variable Definitions
bla bla.....
*/

BERTUMPOK DOANG?
Jika cuma  bertumpuk, ada yang saling menghalangi, maka coba gunakan kode "pemisah" antar-elemen berikut ini:

<div class='clear'/>

Ini contoh pemasangannya:

<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>
<li><a href='#'>Privacy Policy</a></li>
</ul>
</nav>

<div class='clear'/>

<div class='content-wrapper'>


Itu dia Cara Mengatasi Tata Letak Blogger yang Acak-Acakan. Bukan untuk newbie memang, tapi coba saja. Kalau pusing dan gagal, ganti template saja!

» Thanks for reading Mengatasi Tata Letak Blogger yang Acak-Acakan

Tags: Desain Blog
42 Komentar untuk "Mengatasi Tata Letak Blogger yang Acak-Acakan"

haturnuhun tutorialna tos ngabantos :)

mantap kang.. sebelum titik di tata letak blog saya tidak seperti gambar diatas. sangat terbantu kang.. terima kasih..

Terima kasih mas untuk ilmunya... memang pada saat ini tata letak yang saya punya persis dengan gambar pertama, banyak titik-titiknya, dan posisinya berantakan. Andai artikel ini berhasil dicoba, saya izin sharing ulang mas pada blog saya..

Assalamualaikum :) Terima Kasih banyak Bang atas tutorialnya :) Wassalamualaikum

silakan, jangan lupa sebutkan sumbernya

Wa'alaikum salam wr. wb. Sama-sama.... :)

ya dong, harus mantap :) sama-sama....

NICE tips, Bro !
ane baru belajar neh, walaupun telat banget, ha haaa.
keep going & good luck !

wawww keren bro, izin share boleh yah .. :)

trimaksih sbelumnya, saya maw tanya kalo benerin menu bar yang about disclaiemer bla bla bla iu gimana harusnya kan diatas, tapi kok malah dibawah footer,,,cara beneri gimana gan,,,,sudah saya coba cara diatas ga berhasil tu....mohon pencerahannya terimakasih

itu ada petunjuk pasangnya, baca baik-baik ya :)

tips di atas bukan mengubah tampilan, tapi layout dashboard (dapurnya blogger). mindahin menu static page dilakukan di dalam template (edit html)

Kang, angger titik-titikna teu leungit-leungit. Nyuhunkeun bantosanana kang..
Hatur nuhun

Da ngan saukur kitu hiji-hijna cara. Coba pasang kode ieu, duanana:
- body#layout ul {display: none}
- body#layout ul li {display: none}

Kok Malahan Kode Bodynya Muncul Juga Di ATAS Bacaan Beranda Ya Kak..Mohon Infonya..

Cuma sekali langsung terbukti bagus gan......
Thanks ya....

kalau yang hilang widgetnya , tapi pas dibuka malah ada , bagaimana solusinya?

yeee... TOP BGT tutornya :) suwun pak. sukron :D

Kang gmn cara memperbaiki tampilan yang g sesuai.yakni sidebarnya geser ke bawah banget.
src="https://3.bp.blogspot.com/-bDih9bDwC_I/VrG91Z-KKzI/AAAAAAAABuw/1LfSGNCps1U/s1600/gambar.png"

kalo untuk menghapusnya gmna?
apa hrus d hapus pd bagian --> (#header-left {width:200px;float:left}) <-- misalkan yg ingin d hapus

Terima Kasih kaka infonya
sangat membantu :D

terima kasih informasi nya gan.. bermanfaat bagi newbie nih. hehe

Saya sudah coba tapi masih error gan. Errornya itu tampilan tata letak sama sekali ngga ada. Cuma ada yang "favicon" sama tulisan page doang. yang lainnya sampe ke bawah ketutupan sesuatu. Jadi saya ngga bisa sama sekali edit tata letak hiks

Nah ini ni pos yang saya cari akhirnya dapet juga ,ijin coba ya.. Saolnya template buatan sendiri cuma ngacak widgetnya cuma lurus terus

Kalau widget header ketimpah, gimana cara mengembalikannya kang?
ane jadi kesulitan mengganti logo web nih, hehehe

dikasih margin bottom di kode layout dalam template

Klo pilihan share g+ fb twtr dsb yg ada di bawah tiba" ada di atas dan nutup bagian atas artikel gmn ya mas cara mngatasinya.
Trma kasih

Pasti template fastest magz atau evo magz ya?
1. Ganti kode .share-button dengan .share-buttonx
Ganti kode .share-button .share dengan .share-buttonx . share
2. Ganti kode <div class='share-buttons'>
dengan <div class='share-buttonsx'>

kalo seperti ini gimana kang?
https://4.bp.blogspot.com/-jkGGrtShVf4/WBYU0A0MbHI/AAAAAAAAAYI/cqy0c-h9ohsLW9PvdXDUwEz0BWsNbFORgCLcB/s1600/morak_marik.JPG

terima kasih ya Allah, ini yang saya butuhkan. Semoga blog ini semakin berkembang begitu juga blog saya. amiin

terima kasih ya min

nggak apa-apa segitu mah.... cukup bagus

haturnuhun meskipun rada riet pak, hehe mohon untuk mengecek blog abdi pak supados di perbaiki , abdi murid seminar bapak di kharisma, hihi

Berbagi pengalaman aja gan,
Sebelumnya saya juga pernah mengalami hal seperti itu dan permasalahannya timbul gara gara menambahkan beberapa css baru di bawah , jadi saya coba memindahkan posisi css yang baru saya tambahkan yang tadinya dibawah dan saya coba pindahkan diatas dan hasilnya normal kembali seperti semula.
Jadi disini yang saya mau tanyakan, jika menambahkan lagi body#layout yang baru dan cssnya menjadi ganda apa tidak masalah pada speed blog atau blog menjadi berat?
Dan terimakasih gan saya jadi dapet trik baru dari artikel diatas.

kode body#layout tidak pengaruhi loading karena kode itu untu halaman admin di dashboard blogger

mantap gan...benar2 ampuh makasih ya, blog ini is the best

No Spam, Please!

Back To Top