Facebook Twitter Friendfeed
Gratis berlangganan artikel o-om.com via mail, join sekarang!

66
Belajar mengedit CSS tanpa masuk halaman Edit HTML


Do you want to share?

Do you like this story?

Bagaimana melakukan ujicoba mengedit CSS Template Blogger tanpa harus membuka dan menyimpan halaman Edit HTML berulang kali?

Pengaturan CSS template blogger merupakan hal utama untuk mempercantik tampilan halaman blog, namun acap kali mengedit CSS kadang melelahkan dan membosankan, terutama terlalu seringnya melakukan bongkar pasang kode, edit sana sini, belum lagi kita membuka dan menyimpan  halaman Edit HTML berulang kali,  tentu saja buang2 waktu..yang jelas kita tidak pernah puas sampai menemukan tampilan terbaik. Tuntutan utama tampilan blog tentu saja tidak lepas dari bagaimana agar blog kita bisa tampil sempurna di semua browser, Mengambil kata para WebMaster "untuk apa tampil cantik di browser Mozilla dan koloninya tapi tampil ancur ancuran di browser lainnya", jelas satu point akan berkurang dan tentu rekan gak mau hal ini terjadi kan.


Apakah kita tetap memaksakan cara classic diatas?


Ups tentu saja tidak...Pasti saya akan berusaha mencari solusi terbaik untuk pembaca setia blog ini. Cukup cuap-cuapnya OM...OK lanjut...Sebenarnya ada cara yang sangat mudah mengedit  CSS tanpa harus masuk bolak balik ke halaman Edit HTML, dimana kita hanya perlu membuka halaman blog lalu mengedit kode CSS secara live (Online) tanpa perlu takut terjadi kesalahan dan error, yang kita perlukan hanyalah tools buatan Chrispederick yang di beri nama Web Developer tools ini lah yang akan membantu meringankan tugas kita mengedit Code CSS di blogger. Cuma blogger? tidak hanya blogger, hampir semua dukungan pada kode CSS bisa digunakan. Perlu rekan ketahui tools ini hanya support untuk Browser Seamonkey, Firefox dan Flock (Firefox extention). Tools Web Developer juga tidak hanya untuk mengedit CSS, namum masih banyak fungsi lain yang bisa digunakan.


Bagaimana mengedit CSS dengan Web Developer?


1. Aktifkan Browser Firefox atau Flock lalu Download Web Developer

2. Kemudian lakukan installasi sesuai petunjuk, jika sudah terinstall maka akan muncul Toolbar Web Developer dengan munculnya menu icon

3. Untuk mengedit CSS tuju saja ke icon CSS -> lalu klik Edit CSS maka akan muncul jendela baru Edit CSS

4. Ada beberapa tab pilihan yang bisa digunakan untuk mencoba mengedit CSS, sebaiknya langsung tuju ke Embedded Styles disinilah Code CSS Blogger yang siap kita acak-acak tanpa takut terjadi kesalahan.

5. Untuk mempermudah mengetahui lokasi kode CSS yang ingin di edit, rekan tinggal mengaktifkan saja fungsi Style Information caranya  klik  icon CSS -> lalu klik Style Information.

6. Jangan lupa arahkan mouse untuk mencari lokasinya, pada jendela baru akan muncul informasi dari kode CSS yang ditemukan

7. Silahkan diacak-acak kode CSS kalian sampe ancur, kalo masih ada kesalahan dan ingin mengedit kembali, tinggal tutup saja lalu buka kembali Edit CSS-nya, mudah khan :)


Sekali lagi yang perlu rekan perhatikan bahwa tools diatas hanyalah alat bantu untuk mempermudah kita mencoba mengedit CSS, Tools diatas bukan otomatis melakukan perubahan, untuk hasilnya akhir kode CSS yang sudah diedit tetap harus di simpan secara manual pada halaman Edit HTML. Maaf kalo saya tidak memberikan infomasi lengkap mengenai Cara Coding CSS Syntax pada template blogger, jika ada pertanyaan silahkan tulis pada kolom komentar :)


Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari o-om.com di inbox anda:


66 komentar:

Eko Priyanto mengatakan...

wah trik baru yang patut di contoh nih om..!! kebeneran sekali lagi pengen banyak tahu tentang CSS..Thanks om ya..!!

Rivai mengatakan...

Waduh !! lagi lagi si Om dengan Research Blogger nya.
Nice Artikel !!

Keduax !!! :D

bilal mengatakan...

He hehe... pas nich buat Make Up .. punye kite .. Makasi ya Oom .. *hi...hi..hi biasa mao enaknya aja

OOM mengatakan...

@eko : silahkan dicoba eko.

@rivai : oiya nih dah lama hak nulis tutorial :)

@Bilal : makasih juga mas bilal.

WWW mengatakan...

Master blog kita ini selalu kreatif dalam menulis artikel-artikel yang berbobot.

Tony mengatakan...

aku nggak ngerti CSS tuh Om..apalagi edit2..nyerah deh..paling comot2 aja..hehehe

Nugi mengatakan...

oom downloadnya dimana sih, tadi udah tak kunjungi web developernya tapi nggak ada link buat download, tolong oom kasih url downloadnya yang lengkap dong om

OOM mengatakan...

@www : Thanks mas hedro semua untuk kemudahan blogger :)

@Tony : Nah toold ini malah gaus buat belajar mas tony..jadi gak bakal takut rusak dan error

@Nugi : Wah khan gede banget tulisan downloadnya nugie...

opiniherry mengatakan...

Tips ini pasti berguna banget buat yg baru mo bikin blog baru ato yg mo ganti baju.

Enak yaa, tinggal mangap, disuapin teruuus...

Rohman mengatakan...

top abis om

Rohman mengatakan...

cara execute nya gimana om... ma'lum aku biasanya peke dreamweaver uy..

kaitokid724 mengatakan...

Wow klo begini caranya gak perlu mumet2 lagi dengan halaman HTML yang bikin sakit kepala, arigatou ne! :D

Artikel di blog ini sangat menarik & bagus. Untuk lebih mempopulerkan artikel (berita/video/ foto) ini, Anda bisa mempromosikan di infoGue.com yang akan berguna bagi semua pembaca di tanah air.Salam Blogger!
Artikel anda:

kaitokid724 mengatakan...

Wow klo begini caranya gak perlu ribet dengan bahasa HTML yang susah itu, arigaou ne! :D:D

Artikel di blog ini sangat menarik & bagus. Untuk lebih mempopulerkan artikel (berita/video/ foto) ini, Anda bisa mempromosikan di infoGue.com yang akan berguna bagi semua pembaca di tanah air.Salam Blogger!
Artikel anda:
http://www.infogue.com/design/belajar_mengedit_css_tanpa_masuk_halaman_edit_html/

OOM mengatakan...

@opiniharry : betul sekali mas, mungkin istila krennya "Live CSS Editor"

@Rohman : gak pake execute kang, otomatis terjadi perubahan ketika di edit.

@kaitokid724 : thanks dah masukin artikel om ke infogue dot com

Anonim mengatakan...

wah semakin mudah saja ngedit CSS...tidak seperti tutor lain-nya, tutor om menggunakan bahasa sederhana yang mudah dipahami

OOM mengatakan...

Thanks ya tanpa nama..sebenarnya semua blog tutorial mempunyai kelebihan dan kekurangan.

Semua tulisan yang om tulis sebisanya om buat sesederhana mungkin dan mudah dicerna...mengingat tidak semua pembaca mempunyai level yang sama, kalo om menggunakan bahasa yang berat kasian yang baru belajar khan...

Ecko mengatakan...

Duh, kayanya menarik sekali nih. Tapi saya masih belum ngeh nih yg kaya ginian. Belajar lagi ah... Btw, thanks Om ilmunya.

Dzofar mengatakan...

om donlodnya berapa mega?
kpn2 donlod ah..

OOM mengatakan...

@ecko : Makasih juga ya ecko...

@Dzofar : File kecil banget ndop..silahkan di download

iqbal mengatakan...

perubahan kode otomatis disimpan keblog ya om?

khotib mengatakan...

makasih om.,., belajar dulu ah.,.,.,

O-OM mengatakan...

@iqbal : ini hanya untuk uji coba saja mas iqbal.

@khotib: makasih juga mas khotib.

Melissa mengatakan...

aduuh ini pas banget sama yg saya cari2!

capek banget ngupload2 file CSS untuk dites online.. tapi kalo mo langsung tes online takut berantakan.. untung ada ini.. jadi ngga perlu bikin dummy site lagi deh hehehe.. semoga saya bisa memakai program ini dengan efektif dan efisien :P

nice article!

Melissa mengatakan...

oh iya sampe lupa bilang *saking semangatnya mo langsung nyobain*..

makasih banyak ya Om!

OOM mengatakan...

@melissa: yup bener sekali melissa..thanks juga ya :)

Manga movie mengatakan...

Betul om sering juga website kita klo dibuka di browser lain jadi ancur..mkasih infonya..mau tanya om klo buat preview di HP ada toolnya ngga om?1x lg trims..

OOM mengatakan...

@manggamuvie : preview di HP ada toolnya ngga om? kalo ini om belum tau pasti..kalo ada pasti om kabarin :)

rmgb-template mengatakan...

Mas Oom, pingin nambahin dikit, bagi desainer web/blog patut juga mencoba tools yang disediain si Allan Jardine (situsnya: http://www.sprymedia.co.uk/article/Design), dan juga tools mengetes tampilan jadi desain di semua browser punyanya Browsershots (link : http://browsershots.org/). Keduanya saya selalu gunakan..

Feri mengatakan...

Mantap bgt om, kebetulan saya lagi semangat2nya belajar ngedit template.

home-earnings mengatakan...

Trims tipnya mas om,
btw, om gimana sih cara nongolin komentar di bawah artikel plus jawaban kita..
soalnya kemarin yang tak buka di artikel om hanya cara mengganti tulisan posting komentar,
salam.

Exe mengatakan...

Thanks, o-om.
Sangat membantu untuk saya tanpa harus mengubek-ubek HTML.

manggala mengatakan...

again... thanks om... membantu sekali... :)

Dejavu mengatakan...

makasih ya oOm..
gak rugi malem malem aku mentoloti layar, gi binggung :)

btw, mw tanya ada gak yang offline :)
smisal qt edit cssnya trus bisa tau desain visualnya :) ....aneh2 aneh ya mintanya,
maklum orang indonesia suka yg instan instan

blackman mengatakan...
Posting ini telah dihapus oleh penulisnya.
blackman mengatakan...
Posting ini telah dihapus oleh penulisnya.
Anonim mengatakan...

om tolong donk gimana tutorial belajar css yang lengkap banget.....
beserta contoh-contoh nya,,,,

trus java script juga y om........
kalo ada tolong kirim ke email saia :
destafatihayati@yahoo.com
:D

Syamsul Alam mengatakan...

Om... huehuehue.... tanya! Kalo aku misal mau buat template, apa yang harus kubaca-baca, dan tools apa aja yang bisa kupake biar bisa edit template blogger secara offline...

(pertanyaan ini keliatan bgt yah newbinya... huehuehue.......)
tolong banget yah om..... :D

azadev mengatakan...

Wah..bagus banget tapi saya tetap ngga bisa..
Kaya nya memang ngga bakat yah...
Tapi thanks lho tips nya...
Biar nanti tak cobain

BO2NK mengatakan...

om...bagaimana cara mengedit haider,makasih.

syilpid mengatakan...

makaaaaaaaaaaaaaaasiiiiii om

ini dia yang udah lama saya cari :)

Korean - Mandarin Drama Mania mengatakan...

ma kasih atas tipnya ya om!
Saya minta tolong, bagaimana menampilkan playlist lagu dari imeem ke blogspot?
Thanks atas bantuannya :)

infountuksemua mengatakan...

wah..wah.. bagus juga tuh idenya om, gua boleh ikutan coba ya om... he..he..he.. maklum masih pemula..:D :D :D

myokezone mengatakan...

Boleh neh di coba....

gedeyayak mengatakan...

Emang mantepppp!!...master yang satu ini coba ah...makasih boss :D

Andre mengatakan...

:))

advertisingku mengatakan...

wah boleh juga neh .....:D

the dhan mengatakan...

waduh rumit juga ye ......=))

bolang mengatakan...

Wah boleh juga tuh tipsnya, saya coba dlu ya om, haha...

unk... mengatakan...

terus bejuang..demi kecerdasan anak bangsa yah..Om"
ku doakan smoga lancar2 selalu..

Anonim mengatakan...

tak mengerti mas cara kerjanya gimana???http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif, maaf newbie nih he....http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif
mas klo bisa tolong addym n gtalk saya ya, biar gampang komunikasi.
ym : al_firenze
gtalk : albertha.yz
terima kasih

Remba The Immaculate mengatakan...

@eko : silahkan dicoba eko.

@rivai : oiya nih dah lama hak nulis tutorial

@Bilal : makasih juga mas bilal.

Remba The Immaculate mengatakan...

@eko : silahkan dicoba eko.

@rivai : oiya nih dah lama hak nulis tutorial

@Bilal : makasih juga mas bilal.

Dimas Hendra Perdana mengatakan...

wah.. bole dicoba !! thx

anas trick mengatakan...

Makasih om, di perbanyak terus update nya,
Artikelnya banyak membantu para blogger.

Ahmad Ihsan mengatakan...

:)]

Lord_idiL mengatakan...

tenkyu om sudah ngeluangin waktu utk mnulis, tulisan om mencerdaskan anak bangsa...hehehehe

MOHAMMAD IMAM mengatakan...

thank OMMMMMMMMM =))

internettopic mengatakan...

thanks informasinya lama mondar mandir akhirnya ketemu juga

Anonim mengatakan...

Muantap gan!!! akhirnya ane bisa edit Css dengan bahagia !!

Anonim mengatakan...

;))

Anonim mengatakan...

sooryy Om,,, itu ngerusak ciptaan atau website orang ataupun blog orang,,, jangan terlalu ingin mempopulerkan diri akh,,, saya programer website merasa, tidak penting hal ini... dan dapat merugikan diri sendiri...
udah populer ini atuh o-om tuh...
apa mau saya tutup WEBSITE INI ("hacked")

best Regard Injection

Anonim mengatakan...

mas o om.. trmksh ats ilmunya yaaa
semoga tuhan membalas kebaikan mas o om. :)

simatupang mengatakan...

makasih ya gan buat inpo na coz masih nubie nih.

Dwi si cebol mengatakan...

mas 0 om mksh jg atas ilmunya..
sangat membantu buat aku yang amatiran...

Canggih mengatakan...

Terima kasih om... atas informasinya...:)

Remba Dreadscythe mengatakan...

om donlodnya berapa mega?
kpn2 donlod ah..

Poskan Komentar

Silahkan beri komentar dan jangan komentar spam ya. thanks :)