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







66 komentar:
wah trik baru yang patut di contoh nih om..!! kebeneran sekali lagi pengen banyak tahu tentang CSS..Thanks om ya..!!
Waduh !! lagi lagi si Om dengan Research Blogger nya.
Nice Artikel !!
Keduax !!! :D
He hehe... pas nich buat Make Up .. punye kite .. Makasi ya Oom .. *hi...hi..hi biasa mao enaknya aja
@eko : silahkan dicoba eko.
@rivai : oiya nih dah lama hak nulis tutorial :)
@Bilal : makasih juga mas bilal.
Master blog kita ini selalu kreatif dalam menulis artikel-artikel yang berbobot.
aku nggak ngerti CSS tuh Om..apalagi edit2..nyerah deh..paling comot2 aja..hehehe
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
@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...
Tips ini pasti berguna banget buat yg baru mo bikin blog baru ato yg mo ganti baju.
Enak yaa, tinggal mangap, disuapin teruuus...
top abis om
cara execute nya gimana om... ma'lum aku biasanya peke dreamweaver uy..
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:
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/
@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
wah semakin mudah saja ngedit CSS...tidak seperti tutor lain-nya, tutor om menggunakan bahasa sederhana yang mudah dipahami
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...
Duh, kayanya menarik sekali nih. Tapi saya masih belum ngeh nih yg kaya ginian. Belajar lagi ah... Btw, thanks Om ilmunya.
om donlodnya berapa mega?
kpn2 donlod ah..
@ecko : Makasih juga ya ecko...
@Dzofar : File kecil banget ndop..silahkan di download
perubahan kode otomatis disimpan keblog ya om?
makasih om.,., belajar dulu ah.,.,.,
@iqbal : ini hanya untuk uji coba saja mas iqbal.
@khotib: makasih juga mas khotib.
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!
oh iya sampe lupa bilang *saking semangatnya mo langsung nyobain*..
makasih banyak ya Om!
@melissa: yup bener sekali melissa..thanks juga ya :)
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..
@manggamuvie : preview di HP ada toolnya ngga om? kalo ini om belum tau pasti..kalo ada pasti om kabarin :)
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..
Mantap bgt om, kebetulan saya lagi semangat2nya belajar ngedit template.
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.
Thanks, o-om.
Sangat membantu untuk saya tanpa harus mengubek-ubek HTML.
again... thanks om... membantu sekali... :)
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
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
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
Wah..bagus banget tapi saya tetap ngga bisa..
Kaya nya memang ngga bakat yah...
Tapi thanks lho tips nya...
Biar nanti tak cobain
om...bagaimana cara mengedit haider,makasih.
makaaaaaaaaaaaaaaasiiiiii om
ini dia yang udah lama saya cari :)
ma kasih atas tipnya ya om!
Saya minta tolong, bagaimana menampilkan playlist lagu dari imeem ke blogspot?
Thanks atas bantuannya :)
wah..wah.. bagus juga tuh idenya om, gua boleh ikutan coba ya om... he..he..he.. maklum masih pemula..:D :D :D
Boleh neh di coba....
Emang mantepppp!!...master yang satu ini coba ah...makasih boss :D
:))
wah boleh juga neh .....:D
waduh rumit juga ye ......=))
Wah boleh juga tuh tipsnya, saya coba dlu ya om, haha...
terus bejuang..demi kecerdasan anak bangsa yah..Om"
ku doakan smoga lancar2 selalu..
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
@eko : silahkan dicoba eko.
@rivai : oiya nih dah lama hak nulis tutorial
@Bilal : makasih juga mas bilal.
@eko : silahkan dicoba eko.
@rivai : oiya nih dah lama hak nulis tutorial
@Bilal : makasih juga mas bilal.
wah.. bole dicoba !! thx
Makasih om, di perbanyak terus update nya,
Artikelnya banyak membantu para blogger.
:)]
tenkyu om sudah ngeluangin waktu utk mnulis, tulisan om mencerdaskan anak bangsa...hehehehe
thank OMMMMMMMMM =))
thanks informasinya lama mondar mandir akhirnya ketemu juga
Muantap gan!!! akhirnya ane bisa edit Css dengan bahagia !!
;))
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
mas o om.. trmksh ats ilmunya yaaa
semoga tuhan membalas kebaikan mas o om. :)
makasih ya gan buat inpo na coz masih nubie nih.
mas 0 om mksh jg atas ilmunya..
sangat membantu buat aku yang amatiran...
Terima kasih om... atas informasinya...:)
om donlodnya berapa mega?
kpn2 donlod ah..
Poskan Komentar
Silahkan beri komentar dan jangan komentar spam ya. thanks :)