February 4, 2015

Mengatasi Tata Letak Blogger yang Acak-Acakan

Romel Tea February 4, 2015

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!

42 comments:

  1. haturnuhun tutorialna tos ngabantos :)

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

    ReplyDelete
    Replies
    1. ya dong, harus mantap :) sama-sama....

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

    ReplyDelete
    Replies
    1. silakan, jangan lupa sebutkan sumbernya

      Delete
  4. Assalamualaikum :) Terima Kasih banyak Bang atas tutorialnya :) Wassalamualaikum

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

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

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

    ReplyDelete
  7. Replies
    1. itu ada petunjuk pasangnya, baca baik-baik ya :)

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

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

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

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

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

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

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

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

    ReplyDelete
  14. 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"

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

    ReplyDelete
  16. Terima Kasih kaka infonya
    sangat membantu :D

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

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

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

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

    ReplyDelete
    Replies
    1. dikasih margin bottom di kode layout dalam template

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

    ReplyDelete
    Replies
    1. 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'>

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

    ReplyDelete
    Replies
    1. nggak apa-apa segitu mah.... cukup bagus

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

    terima kasih ya min

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

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

    ReplyDelete
    Replies
    1. kode body#layout tidak pengaruhi loading karena kode itu untu halaman admin di dashboard blogger

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

    ReplyDelete

No Spam, Please!