Mengatasi Tata Letak Blogger yang Acak-Acakan

Follow @romel_tea
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:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

43 komentar

Tulis komentar
HIJ Official
AUTHOR
Friday, April 17, 2015 delete

haturnuhun tutorialna tos ngabantos :)

Reply
avatar
KSP LESTARI
AUTHOR
Tuesday, May 05, 2015 delete

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

Reply
avatar
muhammad isra
AUTHOR
Tuesday, June 23, 2015 delete

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

Reply
avatar
Anonymous
AUTHOR
Thursday, July 02, 2015 delete

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

Reply
avatar
Romel Tea
AUTHOR
Saturday, July 04, 2015 delete

silakan, jangan lupa sebutkan sumbernya

Reply
avatar
Romel Tea
AUTHOR
Saturday, July 04, 2015 delete

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

Reply
avatar
Romel Tea
AUTHOR
Saturday, July 04, 2015 delete

glad to hear that :)

Reply
avatar
Romel Tea
AUTHOR
Saturday, July 04, 2015 delete

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

Reply
avatar
Rasyied
AUTHOR
Tuesday, September 15, 2015 delete

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

Reply
avatar
Anonymous
AUTHOR
Saturday, October 03, 2015 delete

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

Reply
avatar
Sunday, October 25, 2015 delete

kode nya dimasukin diamana ya ?

Reply
avatar
Sri Sugiyarti
AUTHOR
Saturday, October 31, 2015 delete

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

Reply
avatar
Romel Tea
AUTHOR
Sunday, November 01, 2015 delete

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

Reply
avatar
Romel Tea
AUTHOR
Sunday, November 01, 2015 delete

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

Reply
avatar
LDK KMA
AUTHOR
Thursday, November 05, 2015 delete

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

Reply
avatar
Romel Tea
AUTHOR
Thursday, November 05, 2015 delete

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

Reply
avatar
Sunday, November 29, 2015 delete

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

Reply
avatar
Junaedi nedi
AUTHOR
Thursday, December 03, 2015 delete

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

Reply
avatar
Diky Wahyudin
AUTHOR
Wednesday, December 23, 2015 delete

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

Reply
avatar
Diky Wahyudin
AUTHOR
Wednesday, December 23, 2015 delete

sudah bisa di atasi gan hehehe

Reply
avatar
Thursday, December 31, 2015 delete

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

Reply
avatar
fikazha
AUTHOR
Wednesday, February 03, 2016 delete

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"

Reply
avatar
Nuriyanto 1
AUTHOR
Friday, February 05, 2016 delete

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

Reply
avatar
Jaenudin -
AUTHOR
Wednesday, February 17, 2016 delete

Terima Kasih kaka infonya
sangat membantu :D

Reply
avatar
Friday, April 08, 2016 delete

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

Reply
avatar
Sunday, April 17, 2016 delete

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

Reply
avatar
Vizer Web
AUTHOR
Friday, July 15, 2016 delete

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

Reply
avatar
Sunday, September 04, 2016 delete

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

Reply
avatar
Romel Tea
AUTHOR
Tuesday, September 06, 2016 delete

dikasih margin bottom di kode layout dalam template

Reply
avatar
Andi Kudus
AUTHOR
Monday, September 26, 2016 delete

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

Reply
avatar
Romel Tea
AUTHOR
Monday, September 26, 2016 delete

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

Reply
avatar
Sunday, October 30, 2016 delete

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

Reply
avatar
Kang Didin
AUTHOR
Thursday, December 15, 2016 delete

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

terima kasih ya min

Reply
avatar
Romel Tea
AUTHOR
Friday, December 16, 2016 delete

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

Reply
avatar
Irvan Maulana
AUTHOR
Friday, February 10, 2017 delete

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

Reply
avatar
Public Movies
AUTHOR
Sunday, April 02, 2017 delete

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.

Reply
avatar
Romel Tea
AUTHOR
Monday, April 03, 2017 delete

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

Reply
avatar
Research
AUTHOR
Tuesday, September 19, 2017 delete

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

Reply
avatar
kurcaci 66
AUTHOR
Sunday, September 02, 2018 delete

Belum jelas bagi pemula , seharusnya ada langkah-langkahnya , misal buka blogg, klik tata letak klik dst ,,,,, kalau langsung seperti diatas bagi saya yang baru , masih kurang jelas

Reply
avatar

No Spam, Please!