Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Mengatasi Tata Letak Yang Bejejer ke Bawah Pada Dashboard

Mengatasi tata letak / widget editor yang error dan berjejer ke bawah.
page elements
Mengatasi Layout Blog Yang Bejejer ke Bawah - Mungkin sobat pernah mengalami tata letak / page element / widget editor tidak seperti sebelumnya, akan tetapi berjejer kebawah, tidak jelas mana sidebar dan mana footer. Hal ini juga saya alami beberapa hari kebelakang setelah melakukan validasi CSS3.

Sebagian sobat banyak yang mengatakan dashboard error, padahal bukan error itu terjadi karena ada CSS yang hilang. CSS yang hilang diakibatkan karena menyembunyikan / menonaktifkan CSS Stylesheet Blogger, yang biasanya dilakukan untuk validasi CSS3 atau HTML5. Tidak jadi masalah ketika sobat sudah terbiasa dengan tampilan berjejer, saya pribadi lebih enak tampilan seperti biasa, lebih mudah memisahkan mana sidebar dan mana footer.

Intinya, tampilan widget editor / tata letak yang berjejer kebawah karena Menonaktifkan CSS Reset Stylesheet Blogger. Dan saat ini saya akan berbagi tutorial bagaimana mengembalikan tataletak widget editor seperti semula.

tata letak

Cara Mengembalikan Tata Letak Yang Berjejer ke Bawah


LANGKAH 1 : Fahami ukuran komponen utama blog sobat

Biasanya, ukuran komponen utama sudah ada pada CSS blog, seperti #outer-wrapper #header-wrapper #main-wrapper dst. Untuk lebih memahami komponen utama blog sobat, saya contoh kan sepeti gambar di bawah ini :

layout

LANGKAH 2 : Tulis kembali ukuran dan posisi komponen utama blog sobat.

Copy dari CSS yang ada, ukuran komponen utama blog. Sobat bisa menulisnya di notepad terlebih dahulu. Dari contoh gambar diatas, untuk penulisannya seperti ini :

#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:728px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}

LANGKAH 3 : Simpan kode diatas, diantara kode menon-aktifkan CSS Reset. Perhatikan posisi penyimpanannya!

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

hasil akhirnya seperti ini :

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

Simpan template.

Selamat mencoba.. silahkan laporan di sini apabila masih ada kendala    :)

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

108 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. wah... siip dech |o|
    1. dapet pertamaxx 2 liter :)
    2. milarian ieu simkuring teh , geuning didieu di rorompok kang ismet! -____- .

      hatur nuhun kang, RESOLVED! :D
  2. kedua dimanakan :D
    1. siniin aja... wkwkwk keburu2 ya sob, 'diamankan' jadi 'dimanakan' :D
  3. waw , itu ngaruh sama di tampilan blognya juga toh Kang ?? :D
    1. mengakali di dashboard aja.. kan di blog ada CSS lagi, apa lagi kalau responsiv, jadi ga menggangu
  4. ooh maksudnya ini wkwkwk, saya juga dulu punya masalah ini, tapi segera teratasi, karena saya sadar layout saya berantakan setelah sembunyiin b:skin...
    1. nah ini dia orangnya.. gara dia2 tampilan blog orang berantakan :)
      thanks buat tutor nya sob, awalnya puyeng ngertinya.. maklum blognya english
  5. [ mumpung masih dikit orang yg komen ] keren kang artikelnnya, semua artikelnnya langkah langkah :D
    (ngak ada di blog lain :D) #salam damai kang ismet!
    Thanks udah share
    1. hehehe... gak tau nantinya kalau ada yang copas :)
  6. Selalu ada yang baru disini itulah alasan saya selalu mampir melirik2 yang baru kang ckck :D :D
    1. berusaha selalu update aja sob...
  7. komenk dlu bru baca ben g ndk bwah2 komenk e... :D
    1. wkwkkw... awas ga dibaca
  8. Dulu sih pernah ngalamin tapi waktu itu saya langsung ganti template,hehehe..gak mau pusing soalnya.. :D
    1. padahal gampang ya...
  9. Ternyata simple juga ya kang :D
  10. Saya juga sempat heran kemarin Kang waktu mencoba memraktekkan postingan sebelumnya yaitu validasi blog dengan CSS3 setelah selesai dan buka halaman tata letak blog saya kok malah berjejer ke bawah semua widgetnya tapi saya nda terlalu bingung juga sih coz hal itu udah saya anggap biasa. Dan akhirnya muncul juga tutorialnya di blognya Kang ini.
    1. kalau udah biasa sih ga masalah sob... :)
  11. saya belum mengalamainya kang, karena belum divalidasi ckck :D
  12. http://onlineprintscreen.com/r/1079-wow.png

    kok ada titik" nya ya kang
    1. padahal saya udah pake cara diatas
      tapi kok masih kayak gitu ya..
  13. Oh ternyata disitu masalahnya. Kebetulan Punya saya anu nya berantakan...
    Ada yang bisa digeser ada yang enggak malah ada yang gak bisa di edit. Haturnuhun kang di tampi tutorna....
    1. sami2 kang heri..
    2. Wah ngeri donk anu nya kang Heri berantakan hehehehe :D
  14. keren banget kang...ternyata tata letak bisa dimodif juga ya?
    baru tau ane...trims banget ilmunya kang :)
    1. bukan dimodifikasi mas, tapi merapihkannya akibat dari CSS Reset..
  15. Hehehehe...keren kang, saya malah ga diapa-apain dari dulu dan saya anggap biasa setelah menyembunyika CSS Reset yang penting tampilan blognya ga berantakan heheeehe...tapi dengan trik ini dapet pengalaman baru lagi nih. Hatuuuurrrr nuhun.... jadi tujuan hot link nih kang jika ada yang nyasar ke saya nanyain ini.
    1. siap kang.. soalnya dengan kata kunci 'menghapus css reset' punya kompi ajaib nomero uno di gugelo :)
  16. sip kang ... punya saya ge yg satu lagi eror dasbornya alias berjejer ntar sya coba lah
    ...
    kang is kalo negrubah tampilan link hidup dina thumbnail home gmn tah ? biasanamah pan coklat anu kang is mah jadi hideung kitu uy ... keren jadi lain sama link yg lain
    boleh atuh di share lagih
    1. sok atuh di bebenah kang error mah :)
      maksudnya toooltip yang di homepage itu? silahkan kesini jendral http://blog.kangismet.net/2013/07/simple-tooltip-dengan-jquery.html
  17. kunjungan rutin kang..

    hehehe,,, :D
    1. hehehe.. saya absen ya...
  18. Akhirnya masalah yang selama ini saya alami terselesaikan sudah. Hatur nuhun kang..
    1. pasti yang validasi CSS3 kasusnya sama.. sami2 sob
  19. keren2 :D makasih kang :)
    1. sama2 sob..
  20. ane juga pernah ngalamin ini, tapi ane langsung ganti template, soalnya ga tau cara ngebenerin + ga tau keywordnya :'(
    1. hehhee.. padahal bukan error lho
  21. ajib...! ijin tes mas....!
  22. duh kang katingalen ae yeuhh .. biasa nuju rada riweh of air " lumayan " hehe
    ngemeng-ngemeng sya mah sering kitu teh .. untung e normal lagi
    1. sigana janten mc dina hajatan yeuh :)
  23. Ini dia permasalahan yg terlupakan,
    trimakasih tutornya kang,
    btw Light Box "Term - Konversi Code" nya keren kang, ditunggu tutornya :D
    1. ditunggu aja sob :)
  24. Mantep menarik nih Kang, izin simak yah
    Terima kasih saja, buat info nya Kang Ismet
  25. Sikkahoder
    Komentar ini telah dihapus oleh pengarang.
  26. bagaimana dengan elemen di bawah header blog yang tidak bisa berfungsi kode htmlnya?? misalnya membuat menunavigasi, tapi kok menunya gak berfungsi... saya baca beberapa tutorial, katanya rubah show element dari ''no'' menjadi ''yes''.. tapi setelah saya rubahpun gak bisa.. tolong mampir di blog saya.. mohon pencerahannya.. tolong mampir bang..http://sikkahoder.blogspot.com/
    1. contoh elementnya??
      seharusnya tanpa memakai showelement pun bisa tetapi kekurangannya,yaitu ngga kelihatan di tata letak saja
  27. bagian footer di blog saya ada kolom kosong sekitar 3 titik itu gimana cara meraikannya .. .
    1. pertanyaan2nya udah ada di atas.. coba baca miz..
  28. mau gmn tampilannya ane juga gak suka pake sidebar mas :D hehe
    1. ya.. itu sih tergantung selera :)
  29. pernah saya ngalami layoutnya acak2 an Kang,.
    tapi saya belum tau cara begini saya acak2 template
    Saya, sampai 2 hari baru bener,. tapi langkah2 lupa,tuh
  30. Tutorialnya bisa diaplikasikan diblog baru ini Kang sekedar mencoba Kang.
  31. Kang Ismet, saya mengalami masalah pada tata letak blog saya. saya tidak bisa edit atau menghapus widget. selalu muncul pesan " pageToken: Permintaan Anda tidak dapat diproses. Silakan coba lagi. security_token: Terjadi kesalahan saat memproses formulir ini. Coba lagi."
    bagaimana mengatasinya Kang..?
    Bingung nih....
    terima kasih
    1. pernaah baca diblog luar, coba clear cache aja
  32. Kang mau tanya maaf sblmnya klo OOT, setelah validasi HTML5 kan kode ]]></b:skin> diganti, nah ane mau tambahin footer di blog ane, menurut tutor yg ane dpt dr mbah google harus nambahin kode script di bawah kode ]]></b:skin> sementara kodenya kan uda gk ada lg. ada solusi gak kang klo mau buat kolom footer?
    1. berarti ganti menjadi dibawah </style>
  33. mantap nih artikelnya kang ..
  34. mantep penjelasannya, makasih ya kang..
  35. Saya Pernah Mengalami Hal Ini,Sampai Saya Upload Kembali Template Backup N Nya..Ternyta Bgini Caranya Thx Kang Ismet
    1. sama2 sob
  36. punya saya malah terlalu lebar kang @_@
  37. Saya gak berhasilkang, ada masukan?
  38. kalo tampilan nya berjejer , itu berpengaruh nggak buat Blog kita Kang ?
    1. ngga.. cuma tampilan dasboard aja
  39. kalo cara ngilangin ini gmana kang ??

    http:// prntscr.com/ 24hor3
    1. itu efek dari <ul><li> di luar widget, jadi ga masalah sebenarnya
  40. yang saya masuh tetep gak bisa kang.. :( . minta bantuannya dong.. pasti gara ulah CSS3 :D

    http://ximg.us/upload/1384724096.jpg
    1. url blognya apa sob?
  41. Unknown
    Komentar ini telah dihapus oleh pengarang.
  42. salam, kang mau tanya. Saya pasang space banner iklan di blog saya. tapi tombol close nya tidak berfungsi. Gimana ya cara mengatasinya. Mkasih jawabannya... www.bloggermusslimgaul.blogspot.com..
    1. saya ga bisa liat bognya.. tidak ditemukan
  43. Mas Ismet numpang nanya , kalo masalah diataskan sejajar gituh . kalo punya aku hilang semua cuman ada widget favicon . tolong pencerahan dong mas
  44. haduuh,,,ngikutin tutor di atas gajadi jadi mas....
    bantuannya dong??
  45. hello..sy dr Malaysia..saya hadapi masalah yg sama macam dekat atas ni..tapi saya dah berulang kali coba, tapi ffailed..help me?
    1. harus lebih teliti memahami kode template
  46. Gan, posisi widget blog saya kok jadi disamping dibawah potingan ya ?
    Cara keatasinnya lagi gimana, cara diatas udah saya coba, tapi gak ngaruh
    makasih sebelumnya
    1. kalau saya liat source code, belum seperti tutorial ko... jadi harus double CSS nya, yang pokok nya aja yang dimasukan ke atas
  47. kalau saya sedikit menambahkan body#layout disetiap variabel yang diatur :)
  48. mau share soal tampilan template kang is yang memanjang kebawah pada versi mobile akhirnya bisa saya atasi dengan menambahkan code <div style='clear:both;'/> dibawah kode html menu.
  49. Makasih kang... Saya awalnya bingung pas css dihost di Drive kok tata letak jadinya berantakan....
  50. [oot] keren banget blognya kan, mulai dari template sampai isi-isinya :v jadi ngiri haha
  51. simpel nih tipsnya,nanti saya cobain gan..
    visit back ya :)
  52. Kang Ismet mau tanya, cara nyatuin header sama posting, posting sama sidebar gimana yah kang? mohon dibalas :D
  53. berhasil and makasih.
  54. ada sedikit kendaLa bang untuk tempLate responsif,, seperti header-wrapper :100% sementara Outer-wrapper : 1000px ,,, !!! itu diapain bang?
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.