Colorize your blog with ColorZilla

Published
by
sandi
on August 27, 2008
in Tips and Wordpress
. Tags: , , , .

firefox logoJudulnya terlalu keren ya hehe. Jangan ngebayangin bakal dapat tips maut lho, ini hanya sharing pengalaman saja kok :D . ColorZilla adalah add-on khusus untuk browser FireFox. Mungkin teman² sudah banyak yang tahu. Tapi saya tetap saja ingin nulis tentang ini, karena add-on ini sangat membantu saya dalam bekerja. Karena setiap hari disamping ngeblog, rutinitas kerja saya juga selalu berhubungan dengan website. Desain maupun pemrograman web. Wong saya webmaster :D . Jadi untuk desain tampilan website/blog terutama style CSS nya, add-on ini sangat membantu.

Fungsi ColorZilla adalah untuk mendapatkan kode warna dari warna yang kita inginkan. Jadi kalau ada warna bagus yang kita sukai langsung saja di”tembak” pakai add-on ini dan kita telah mendapatkan kode warnanya. Saya akan ceritakan sedikit pengalaman saya dengan add-on ini.

Bila anda akan memasang spot iklan PPC seperti adsense, adbrite, bidvertiser, kliksaya, adspeedy dll kata para master desain text iklannya harus senada/sewarna dengan desain blog kita agar maksimal earningnya. Nah pakai ColorZilla untuk mendapatkan kode warna dari link text blog kita, dan samakan dengan link text di desain iklan PPC kita, jadi gak perlu ngubek² file CSSnya hanya untuk mendapatkan kode warna yang senada :D .

Bila anda sangat cinta dengan themes blog anda saat ini tapi rada bosen dengan warnanya atau ingin merubah tema blognya, ya gak perlu ganti theme. Ganti aja style warnanya seperti blog saya ini yang baru ganti warna :D . Caranya mudah, langkahnya begini (ini khusus untuk pengguna wordpress self hosting lo ya dan browser FireFoxnya sudah terinstall add-on ColorZilla :D ) :

  1. Pertama-tama backup dulu file style.css nya. Atau rename saja filenya kalau suatu saat anda ingin kembali kedesain yang lama tinggal rename kembali saja :D .
  2. Buka file style.css untuk siap diedit.
  3. Kembali kehalaman utama blog anda, dan mulailah mengganti warna. Terserah mulai dari mana, misalkan kita mulai dari border utama. Gunakan ColorZilla untuk mendapatkan warna dari border, kalau sudah dapat copy kode warnanya.
  4. Kembali ke file style.css dan coba searching kode warna tadi. Kalau sudah ketemu coba ganti dengan kode warna lain dan simpan. Trus refresh blognya. Kalau sudah berubah warnanya berarti sukses, tapi kalau tidak berubah berarti salah dan cari lagi sampai ketemu. Memang kelihatan ribet tapi kalau sudah terbiasa seperti saya bisa cepat kok. Apalagi kalau sudah punya ilmu dasar CSS, malah tambah cepat :) .
  5. Bingung ya? saya juga bingung ngejelasinnya, mending ngobrol langsung saja kalau ada pertanyaan via YM ok :) .

Bagi teman² yang belum tahu dan belum pernah menggunakan plugin ColorZilla, silahkan download add-on nya DISINI dan baca penjelasan mas Isnaini untuk cara penggunaannya. Add-on ini sudah saya pakai sejak firefox 1.0 sampai 3.01 dan tidak ada masalah alias compatible :D . Atau pengen belajar CSS ??? baca tutorial lengkap CSS DISINI.

Happy Blogging :D

Update:
Karena banyak yang nanya bisa gak buat blogspot? ya bisalah :) . Ngedit kode warnanya di menu LAYOUT –> EDIT HTML. Gak perlu mencentang Expand Widget Templates. Nah searching kode warna lama disitu, trus replace dengan kode warna baru, kemudian SAVE TEMPLATE. Sudah :)

image from http://www.photoshoptalent.com/images/contests/Colorize%20image%20with%20Hue-Sat%20practice/fullsize/Colorize%20image%20with%20Hue-Sat%20practice_47f883b28ce63.jpg

   Read in another language :   by Google Translate

Related Posts

26 Responses to “Colorize your blog with ColorZilla”

Feed for this Entry Trackback Address
  1. 1 ika
    August 27, 2008 at 11:01 am

    woh saya juga pengen ganti warna blog ni.. tapi ndak mudeng begituan.. barangkali ini bisa membantu ..hehe thanks infonya om

    lha blognya mbak ika kan baru ganti themes. ntar aja kl udah bosen, atau emang udah bosen ya ? :D
    dijawab pada : Rabu, 27 Agustus 2008 13:03:23
  2. 2 hrxone
    August 27, 2008 at 11:41 am

    hiks..css? aku gak donk css.. :(

    lho web developer master php, ajax, web service dll kok sama CSS gk donk!!! gk mungkiiiiiiiiin hahaha :D
    dijawab pada : Rabu, 27 Agustus 2008 13:05:12
  3. 3 Lex dePraxis
    August 27, 2008 at 12:26 pm

    Nice, but sayangnya gue pake Maxthon, ngga ada plugin itu. :(

    weleh apaan lagi tuh maxthon?? aseli baru denger hahaha katrok pol aku :D
    dijawab pada : Rabu, 27 Agustus 2008 13:05:56
  4. 4 penyu
    August 27, 2008 at 4:35 pm

    hiks…hiks…. lagi ga bisa dl, koneksi abal2 hiks……….

    hehe donlutnya kecil bgt kok mas cobain aja
    dijawab pada : Kamis, 28 Agustus 2008 08:51:36
  5. 5 wawanwae
    August 27, 2008 at 5:22 pm

    waduh, blog saya blogspot tuh. anyway, thanks infonya buat nambah2 ilmu.

    lha buat blogspot yo bisa to mas, wong ini addon cuman buat ngambil kode warna tok kok. kl style cssnya dimana2 sama. caranya ya masuk ke menu EDIT HTML. sudah cari kode warna lama, trus kl udah ketemu replace dengan kode warna baru, beres kan :)
    dijawab pada : Kamis, 28 Agustus 2008 08:52:07
  6. 6 Internet marketing
    August 27, 2008 at 5:36 pm

    Membaca judulnya saya jadi terangsang,
    melihat gambarnya saya jadi bernafsu,
    kekekek

    Salam sukses mas.

    weleh kendalikan napsu mas, mo puasa nih hahaha salam sukses juga :)
    dijawab pada : Kamis, 28 Agustus 2008 08:53:42
  7. 7 ika
    August 27, 2008 at 6:45 pm

    om, saya mau nanya..
    saya ada buat blog baru: http://warezfreakz.com . saya suka sama theme nya tapi sayangnya ga suka sama warna tulisan nya yang abu2 itu.. kesannya jadi gak bisa dibaca. nah yang mau saya tanyakan ke om: bagaimana cara membuat warna tulisannya jadi putih? bagian mana yang harus diedit? sumpe om saya bego banget beginian soalnya cuman bisa kopas2 en upload2 doang tapi kagak bisa edit..
    tulung ya om.. thanks in advanced :)

    hehe, coba gini mbak. buka file style.css trus cari (search) kata ini (gk pake tanda petik) “.post“. kalau sudah ketemu lihat script setelah/dibawahnya apakah ada tulisan “color : #818181” ??? atau kode warna “#818181” ??? kalau ada silahkan ganti dengan kode warna ini “#FFFFFF” (gk pake tanda petik semua). sudah selesai silahkan direfresh blognya. semoga membantu :D
    dijawab pada : Kamis, 28 Agustus 2008 08:55:12
  8. 8 ugiQ
    August 27, 2008 at 8:57 pm

    aduch..tak kirain untuk blogspot jg, he… tp dpt ilmu… tengs ya kang.. :)

    baca komentar sebelumnya bahwa bisa juga buat blogspot mas. selamat mencoba :D
    dijawab pada : Kamis, 28 Agustus 2008 09:01:29
  9. 9 Diah
    August 27, 2008 at 11:06 pm

    wah jadi kepingin ganti nich….ck..ck..ck..

    Sangat menarik banget mas themenya ..seger banget

    themesnya tetep mbak, cuman ganti warna dan header image doank :D
    dijawab pada : Kamis, 28 Agustus 2008 09:02:07
  10. 10 kapanpun
    August 28, 2008 at 6:23 am

    makasih penjelasan terbaiknya KANG

    kembali kasih mas :)
    dijawab pada : Kamis, 28 Agustus 2008 09:02:41
  11. 11 Jingga
    August 28, 2008 at 8:20 am

    pagi om :) nice tips. nggah mudeng seh, tp kyknya gk ada salahnya saya coba ikutan tutorialny satu-satu. klo mentok * yeh hewan apa itu ? * nanti saya tanya2 ya :D

    eh om btw, imagenya keren, aku save boleh yaa :)

    happy blogging !!!

    nyam nyam :D tuh imagenya boleh nyomot jg kok. tuh URl sumbernya ada, donlut dr sono aja :)
    dijawab pada : Kamis, 28 Agustus 2008 09:03:31
  12. 12 yudi
    August 28, 2008 at 8:38 am

    ga mudeng blas css, hiks.. :-(
    btw colorzillanya kayaknya asik tuh, liat dulu ah.. :-D

    langsung donlut dan install ok :)
    dijawab pada : Kamis, 28 Agustus 2008 09:04:58
  13. 13 Fachia
    August 28, 2008 at 2:47 pm

    saya baru tahu lho mas.. keren nih addon, daripada buka Photoshop dulu cuman pingin tahu code warnanya.. hehe.. maturnuwun mas..

    sama aku dulu mas, printscreen dulu, trus buka photoshop, paste dan tembak warnanya, ribet amat :D
    dijawab pada : Kamis, 28 Agustus 2008 15:57:47
  14. 14 OOM
    August 28, 2008 at 2:49 pm

    buat blogspot bisa gak ya…

    ya bisa dong om, wong ini cuman ngambil kode warna doank kok :D
    dijawab pada : Kamis, 28 Agustus 2008 15:58:22
  15. 15 ario saja
    August 28, 2008 at 3:16 pm

    wah sipp bos tutorialnya, di coba ah

    silahkan mas ario :)
    dijawab pada : Kamis, 28 Agustus 2008 15:59:38
  16. 16 ika
    August 29, 2008 at 12:41 pm

    om, di style.css saya anehnya kok ndak ada .post itu ya? terus ada sih yang 818181 itu pas saya ganti ke ffffff ga ngaruh om.. hmm kalo gitu saya ganti theme aja deh,, binun sayah..hehehehe thanks ya om :D

    walah baru aja mau tak donlut theme nya trus tak oprek, tapi udah keburu ganti theme :)
    dijawab pada : Jum’at, 29 Agustus 2008 13:39:31
  17. 17 ika
    August 29, 2008 at 3:24 pm

    wah beneran neh om mau oprek theme na? ini om linkna secara saya juga penasaran yang mana sih yang harus diubah? hehe

    linknya:
    http://www.freewordpresslayouts.com/download/cleanmachine/cleanmachine.zip

    kayaknya kalo isa di oprek, saya balik lagi ke theme lama ini om..hehe ..thanks in advanced :D

    pada file style.css search script #wrapper kl udah ketemu dibawahnya kan ada tuh color: #818181; nah silahkan diganti jadi color: #FFFFFF;. Sudah cuman itu mbak, saya coba disini berhasil jadi putih semua textnya, tapi apa gak jadi silau ya? :D
    Nb. eh mbakyu hari ini saya 2 kali komentar diblognya sampeyan kok gak masuk daftar ya? apa kejaring akismet??
    dijawab pada : Jum’at, 29 Agustus 2008 15:42:46
  18. 18 ika
    August 29, 2008 at 8:51 pm

    om, iya neh kok komen sampeyan kejaring akismet mulu ya? tapi selalu berhasil saya ‘keluarin’ dari jeratan akismet kok,,,hehe :D

    btw, iya om jadi agak silau.. ada saran enaknya diganti warna apa ya teks nya? soalnya kalo abu2 jadi ndak enak ngebacanya om.. :D
    thanks in advanced (again) :D

    selamat ye udah dibayar sama bloggerwave,.. rejeki nya naura tuh..hehe

    mungkin lebih kalem dikit dari putih, coba #BEBEBE, #D5D4D4, atau #EEEEEE. Atau yang sedikit berwarna orange seperti #FFE8CD. Selamat mencoba :)
    dijawab pada : Jum’at, 29 Agustus 2008 23:29:22
  19. 19 Shugoshin
    August 29, 2008 at 11:57 pm

    Salam kenal, saya blogger baru! Tipsnya berguna banget mas, pas kalo mo ngedit layout, Tq

    salam kenal juga mas afuk. senang bisa membantu :)
    dijawab pada : Jum’at, 29 Agustus 2008 23:35:34
  20. 20 ika
    August 30, 2008 at 8:53 am

    wah makasih banget banget om, saya pake yang #EEEEEE. makasih banget ya om tips nya ,,om tipis emang oye! :D

    senang bisa membantu :)
    dijawab pada : Sabtu, 31 Agustus 2008 05:47:23
  21. 21 jimmy
    August 31, 2008 at 12:02 am

    baru tau ada addon nya.. selama ini saya pake software yang namanya colorpic.. hehe saatnya berpisah dengan colorpic :D

    hehe ini sepertinya lebih praktis mas gk perlu buka aplikasi lagi tinggal tembak udah :D
    dijawab pada : Sabtu, 31 Agustus 2008 05:52:32
  22. 22 Jingga
    September 23, 2008 at 9:08 am

    saya udah nyobain om :)
    mantep !!!

    maknyuss pokoke :D
    dijawab pada : Selasa, 23 September 2008 13:06:55
  23. 23 Rusli Zainal Sang Visioner
    September 11, 2009 at 3:58 am

    Wah, ini tips yg mantap, selama ini parah dah, sll pake photoshop, di screenshot dulu, udah gt di cek warnanya pake photoshop, abis ga tau yg kyk ginian nih sebelumnya, hehe.. :D

  24. 24 Witanto
    July 6, 2010 at 10:26 pm

    sip deeh
    Witanto

  25. 25 disfungsi seksual pria
    October 18, 2011 at 3:26 pm

    Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

  26. 26 lemah syahwat
    October 18, 2011 at 4:38 pm

    Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil

  1. 1 curhat nih…writer online & monetizing blog - scarlett journey
    Pingback on Oct 7th, 2008 at 2:49 pm
Dengan memasukkan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari TIPIS.WEB.ID di inbox anda:

Leave a Reply