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

114 komentar

dapet pertamaxx 2 liter :)

Balas

siniin aja... wkwkwk keburu2 ya sob, 'diamankan' jadi 'dimanakan' :D

Balas

waw , itu ngaruh sama di tampilan blognya juga toh Kang ?? :D

Balas

ooh maksudnya ini wkwkwk, saya juga dulu punya masalah ini, tapi segera teratasi, karena saya sadar layout saya berantakan setelah sembunyiin b:skin...

Balas

nah ini dia orangnya.. gara dia2 tampilan blog orang berantakan :)
thanks buat tutor nya sob, awalnya puyeng ngertinya.. maklum blognya english

Balas

mengakali di dashboard aja.. kan di blog ada CSS lagi, apa lagi kalau responsiv, jadi ga menggangu

Balas

[ 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

Balas

Selalu ada yang baru disini itulah alasan saya selalu mampir melirik2 yang baru kang ckck :D :D

Balas

komenk dlu bru baca ben g ndk bwah2 komenk e... :D

Balas

Dulu sih pernah ngalamin tapi waktu itu saya langsung ganti template,hehehe..gak mau pusing soalnya.. :D

Balas

hehehe... gak tau nantinya kalau ada yang copas :)

Balas

berusaha selalu update aja sob...

Balas

Ternyata simple juga ya kang :D

Balas

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.

Balas

saya belum mengalamainya kang, karena belum divalidasi ckck :D

Balas

http://onlineprintscreen.com/r/1079-wow.png

kok ada titik" nya ya kang

Balas

padahal saya udah pake cara diatas
tapi kok masih kayak gitu ya..

Balas

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

Balas

itu muncul dari list, seperti menu atau tab view. coba tambahkan ini #menu ul li, ul.tabnav, .tabnav li{list-style: none;}

Balas

kalau udah biasa sih ga masalah sob... :)

Balas

keren banget kang...ternyata tata letak bisa dimodif juga ya?
baru tau ane...trims banget ilmunya kang :)

Balas

Wah ngeri donk anu nya kang Heri berantakan hehehehe :D

Balas

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.

Balas

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

Balas

kunjungan rutin kang..

hehehe,,, :D

Balas

bukan dimodifikasi mas, tapi merapihkannya akibat dari CSS Reset..

Balas

Akhirnya masalah yang selama ini saya alami terselesaikan sudah. Hatur nuhun kang..

Balas

betul apa kata kang eful :)

Balas

siap kang.. soalnya dengan kata kunci 'menghapus css reset' punya kompi ajaib nomero uno di gugelo :)

Balas

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

Balas

pasti yang validasi CSS3 kasusnya sama.. sami2 sob

Balas

waduh, mau di laporin sama eang goip tuh kang yang copas :D
#salam damai

Balas

ane juga pernah ngalamin ini, tapi ane langsung ganti template, soalnya ga tau cara ngebenerin + ga tau keywordnya :'(

Balas

kacamana dimata !! -_____- *balelol* wkwkwk

Balas

duh kang katingalen ae yeuhh .. biasa nuju rada riweh of air " lumayan " hehe
ngemeng-ngemeng sya mah sering kitu teh .. untung e normal lagi

Balas

hehhee.. padahal bukan error lho

Balas

sigana janten mc dina hajatan yeuh :)

Balas

Ini dia permasalahan yg terlupakan,
trimakasih tutornya kang,
btw Light Box "Term - Konversi Code" nya keren kang, ditunggu tutornya :D

Balas

Mantep menarik nih Kang, izin simak yah
Terima kasih saja, buat info nya Kang Ismet

Balas
Komentar ini telah dihapus oleh pengarang.

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/

Balas

contoh elementnya??
seharusnya tanpa memakai showelement pun bisa tetapi kekurangannya,yaitu ngga kelihatan di tata letak saja

Balas

bagian footer di blog saya ada kolom kosong sekitar 3 titik itu gimana cara meraikannya .. .

Balas

mau gmn tampilannya ane juga gak suka pake sidebar mas :D hehe

Balas

ya.. itu sih tergantung selera :)

Balas

pertanyaan2nya udah ada di atas.. coba baca miz..

Balas

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

Balas

Tutorialnya bisa diaplikasikan diblog baru ini Kang sekedar mencoba Kang.

Balas

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

Balas

pernaah baca diblog luar, coba clear cache aja

Balas

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?

Balas

mantap nih artikelnya kang ..

Balas

mantep penjelasannya, makasih ya kang..

Balas

Saya Pernah Mengalami Hal Ini,Sampai Saya Upload Kembali Template Backup N Nya..Ternyta Bgini Caranya Thx Kang Ismet

Balas

berarti ganti menjadi dibawah </style>

Balas

punya saya malah terlalu lebar kang @_@

Balas

Saya gak berhasilkang, ada masukan?

Balas

kalo tampilan nya berjejer , itu berpengaruh nggak buat Blog kita Kang ?

Balas

ngga.. cuma tampilan dasboard aja

Balas

kalo cara ngilangin ini gmana kang ??

http:// prntscr.com/ 24hor3

Balas

itu efek dari <ul><li> di luar widget, jadi ga masalah sebenarnya

Balas

yang saya masuh tetep gak bisa kang.. :( . minta bantuannya dong.. pasti gara ulah CSS3 :D

http://ximg.us/upload/1384724096.jpg

Balas
Komentar ini telah dihapus oleh pengarang.

http://ngomikloverz2.blogspot.com << ini om.. tolong yah omm

Balas

harus sama CSSnya dengan CSS sebelumnya

Balas

jadi.. css yg baru di hapus... ? :(

Balas

maksudnya hasrus sesuai dengan CSS yang awal

Balas

wah.. bisa kang... mkasih kang... *seneng jungkir balik

Balas

tanya satu lagi kang.. knpa sih di blog itu.. komentar blogger gak muncul pada saat posting ? pas di halaman baru muncul ? mohon bantuannya lagi kang master... :D

Balas

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

Balas

saya ga bisa liat bognya.. tidak ditemukan

Balas

Mas Ismet numpang nanya , kalo masalah diataskan sejajar gituh . kalo punya aku hilang semua cuman ada widget favicon . tolong pencerahan dong mas

Balas

haduuh,,,ngikutin tutor di atas gajadi jadi mas....
bantuannya dong??

Balas

hello..sy dr Malaysia..saya hadapi masalah yg sama macam dekat atas ni..tapi saya dah berulang kali coba, tapi ffailed..help me?

Balas

harus lebih teliti memahami kode template

Balas

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

Balas

kalau saya liat source code, belum seperti tutorial ko... jadi harus double CSS nya, yang pokok nya aja yang dimasukan ke atas

Balas

sdh sy coba tpi sy gagal Kang =(
http://img22.imageshack.us/img22/2553/v860.png bisa bantu sy mas, http://dek-blogger.blogspot.com/ tolong bantu ya kang, view-source :)

Balas

milarian ieu simkuring teh , geuning didieu di rorompok kang ismet! -____- .

hatur nuhun kang, RESOLVED! :D

Balas

http://4vector.com/i/free-vector-thumbs-up-clip-art_106261_Thumbs_Up_clip_art_hight.png

[code]MANGSTAB Kang! :-bd[/code]

Balas

Oh, jadi itu ya sebab musababnya. Thanks kang, mau bertanya ternyata udah di jawab :-bd

Balas

kalau saya sedikit menambahkan body#layout disetiap variabel yang diatur :)

Balas

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.

Balas

Makasih kang... Saya awalnya bingung pas css dihost di Drive kok tata letak jadinya berantakan....

Balas

[oot] keren banget blognya kan, mulai dari template sampai isi-isinya :v jadi ngiri haha

Balas

simpel nih tipsnya,nanti saya cobain gan..
visit back ya :)

Balas

Kang Ismet mau tanya, cara nyatuin header sama posting, posting sama sidebar gimana yah kang? mohon dibalas :D

Balas

ada sedikit kendaLa bang untuk tempLate responsif,, seperti header-wrapper :100% sementara Outer-wrapper : 1000px ,,, !!! itu diapain bang?

Balas

akhirnya ketemu juga yang membahas ini :D ...punya saya malah halaman post body yang sedikit anjlok ke bawah kang ,misalkan kita tambahkan margin berguna apa gak kang? |o|

Balas

Sangat membantu sekali, tata letak blog saya sudah kembali seperti semula. nuhun kang

Balas

lha kalo ngatasin menunya gmana y kang? :D

Balas

Poskan Komentar


×
Chat