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

Cara Tercepat Merubah Warna Template Blog

Cara termudah dan tercepat untuk mengedit / merubah warna template blog.
Cara Merubah Warna Template Blog - Tutorial untuk mengganti atau merubah warna template sebenarnya sudah banyak. Akan tetapi saat ini akan share cara yang tercepat, bahkan bagi pemula pun akan lebih mudah dibanding dengan cara mengganti satu per satu. Bahkan bagi sobat yang belum terlalu faham dengan CSS pun, saya jamin dalam 10 menit bisa merubah total warna template blog   :) cara edit warna blog

Sebenarnya tutorial ini merupakan salah satu rahasia terbesar saya dalam membuat atau mengedit template. Namun semua akan saya bagikan bagi pengunjung setia blog ini. Mungkin bagi para master sih sudah ga aneh dengan tutorial ini.

Sebagai alat bantu, tidak boleh tidak, komputer sobat harus terinstall Photoshop. Karena tutorial cara tercepat mengganti warna template blog kali ini dengan bantuan PhotoShop.

Langkah-langkah dibawah lumayan banyak, tapi apabila dicermati sangatlah mudah :

LANGKAH 1 : Jalankan Photoshop


Biasanya, komputer atau laptop sudah terinstall photoshop. Bagi sobat yang komputernya belum terinstall, supaya lebih mudah silahkan Download Phostoshop Portable. Setelah didownload, silahkan jalankan photoshop shobat. Saat ini saya menggunakan Photosop5 portable.

LANGKAH 2 : Buka blog yang akan di edit


Sebagai contoh saya akan mengganti warna template Zikazev Blue, buka http://zikazevblue.blogspot.com, setelah terbuka silahkan PrintScreen (tekan PrtSC pada keyboard).

LANGKAH 3 : Kembali ke Photoshop


Buat dokumen baru File -> New -> OK, kemudian paste (Ctrl+V), maka tampilannya seperti ini :

edit blog

LANGKAH 4 : Cara Mendapatkan Warna Blog


1. Klik Eyedropper Tool atau tekan huruf 'i' pada keyboard

edit blog

2. Arahkan Eyedropper Tool pada warna yang dituju (contoh menu warna biru) kemudian klik.

edit blog

3. Lihat kebagian warna, maka akan berubah sesuai warna blog.

edit blog

4. Klik warna tadi, maka akan muncul box, copy warna yang dilingkari warna merah :

edit blog

LANGKAH 5 : Merubah Warna Blog


1. Masuk ke Dashboard sobat, Template -> Edit HTML
2. Klik pada area kode, kemudian tekan berbarengan Ctrl+Shift+R, paste kode warna yang dari photoshop kemudian Enter.

edit blog

3. Kembali ke Photoshop, dapat kan warna yang cocok kemudian copy.

edit blog

4. Paste pada blog sobat, kemudian Enter.

edit blog

5. Klik Pratinjau Template

edit blog

Lihat hasilnya, beberapa objek sudah berubah bukan? tanpa harus mengedit satu per satu. Lakukan langkah di atas untuk warna yang lain apabila belum berubah.

TIPS


Apabila objeknya kecil, gunakan icon kaca pembesar di PhotoShop (Zoom Tool) atau klik hurup 'Z' di keyboard, setelah diperbesar baru klik dengan Eyedropper Tool untuk mendapatkan Warna.

Selamat mencoba...
#Blogger Tutorial

173 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. wew..saya juga menggunakan cara ini kang :)
    mantab dach :D
    1. betul sob.. lebih mudah, daripada edit satu satu, blom lagi harus pilih class dan idnya :)
    2. bermanfaat sekali ilmunya mas, uda saya praktekkan boleh di lihat hasilnya :D
  2. cara yg cepat kang .. fast gitu hehe
    secepat pejabat ngambilin uang rakyat hehe lho lo ko jadi kesana y ??
    1. ari polibeurit mah.. eh politikus mah kadinya arahna, tapi ga salah juga, yang gitu tuh namanya tikus kantor :)
  3. Baru aja saya ganti warna dominan blog hehehe...ternyata cara mencari warnanya sama hehehe...
    :-bd
    1. kalau pemain sotoshop pasti sama :)
    2. jadi nuansa grayscale kang.. :-d
  4. wkwkwk... haduhh.. cerdas banget kang :D kemarin saya mau ganti warna blog, sempat kebingungan soalnya ini warna kodenya yang mana haha :D
    maklum gk punya photoshop, jadi gk sempat kepikiran hahaha :D
    1. silahkan dicoba.. bagi saya photoshop sangat wajib dalam editing template :)
  5. Benar-benar mantap nih kang ismet :D jadi lebih simple nih kalau ganti warna template blog :D ijin nyoba kang, kang ismet memang top markotop, hebat bin hebat :D
    1. benul eh betuuul.. satu kali klik langsung brubaaaah :)
  6. hihih kalau gitu sama seperti saya dong.. lebih cepat dan tidak menyita waktu |o|
    1. udah 2 nih yang sama. ayooo siapa lagi :D
  7. wihh cepet banget :D , sayangnya gak pandai main photosop :) .
    1. silahkan dicoba miz.. mantep ko photoshop
  8. kalau saya sering pake addon Color Picker kang buat cari dan pilih warna. :D
    Baru tahu saya akang kalau ada replace all pke Ctrl+Shift+R. Parah udah lama main blog baru tahu sekarang :(
    1. wkwkkw.. kamana wae atuh ari kang eful :) Ctrl+F, Ctrl+R, Ctrl+Shift+R berlaku mulai edit HTML baru tea kang
  9. Wuih, gampang dan cepat, ya. Pemula kayak saya juga bisa nih. Sippp.....
    1. tuh.. liat dibawah.. Rossi aja lewat :)
  10. Kalo pake cara gini kayaknya Valentino Rossi ajah lewatttt......
    1. Dia baru mau naek motor, template udah jadi :)
  11. terima kasih banyak kang, atas info nya sangat bermanfaat :D
    1. sama2 kang reza :-d
  12. wah ternyata gampang banget yak?
    sebelumnya ane kudu atu atu ganti warna template dari kang ismet, taunya pake PS lebih gampang....hadduehhh!!
    thns tipsnya...besok2 ane pake PS aja deh
    1. silahkan dicoba sob
  13. bisa dicoba nie kang ismet :D
  14. saya udah bisa manupulasi .deleted-comment terus kalo mau hapus bagian Avatar, nama dan lain2 gimana kang?
    1. itu katanya udah bisa :) <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      Elemen yang dihiangkan
      </b:if>
  15. wkkwkw.. skill autodidact nya keliatan! sama kaya simkuring kang cara nya.. hehe keyennn bin mangstab. fast binti easy! wkwkwk
    1. sanes otodidak kang.. abdimah otomotif :D
  16. hehe iya bener juga :) saran bagus mas :)
  17. wah, sial kenapa baru ada yang mudahnya, coba dari dulu :(
    1. baru sekarang kepikiran buat di share..
  18. Photosop emang mangtab apalagi plus dreamweaver
    1. pasti programer nih :-d
  19. Melalui googlecrome bisa juga tuh lebih praktis lagi....caranya klik kanan => pilih inspect element
    tinggal rubah deh....biasanya klo warna PS kadang tidak kompatible dengan browser kang....
    1. kalau inspect element udah tau dari dulu :)
  20. wah saya baru tahu ini kang, thanks sudah berbagi rahasia terbesarnya
    1. sama2 sob..
  21. Mantap cara nya Kang, coba saya coba nih,.
    Kebetulan baru tau nih,, terima kasih Kang.
    1. sama2 kang.. mangga cobian
  22. [ wah ternyata keduluan sama orang banyak ]
    saya OpenId modas4rt kang, (yang selalu mampir :D ) saya buat blog baru :D
    langsung aja ke postingan!
    wew keren kang saya baru tahu caranya kang!, makasih udah share artikelnnya, sekali lagi tutornnya sangat membantu kang!
    #salam damai kang ismet!! :D
    1. sukses blog barunya sob :-d
  23. Kalo cuman ngambil warna doang sih gak pakek Photoshop juga bisa Kang.
    Ada software kecil gratis dari Nattyware, namanya Pixie.
    Saya biasanya pakek itu. :)
    1. hehe.. baru denger software itu.. mungkin bisa sebagai alternatif
  24. wah mantap tutorialnya kang,tapi kalau warna yg dipakai menggunakan backgound gambar apa dipakai cara ini kang?
    1. bisa aja sih kalau ngambil sebagian warnanya
  25. Punten bade tumaros kang dupi jalan kalangit kamana ?? hehe
    bingung komentar kang tos seepeun ...
    1. duka kang.. abdi jalmi enggal didieu :)
  26. Nice post kang :-d
    1. terimakasih telah menghapus komentar saya kang.. maaf kalau gara2 komen saya ada sedikit salah faham
  27. pakai cara ini lebih Detail mas, bisa tepat dan akurat..

    Wajib di coba nie, biar template saya terlihat berbeda dari template lain walupun sama.. :D
    1. betul sob... silahkan dicoba
  28. Wah, kalau photoshop, ane nyerah deh. :D
    1. kaya mau ditembak aja sob :)
  29. biasanya saya pake inspect element kang,,, ternyata ada yang lebih mudah. gak ku sangka pake photoshop jga bisa
    1. sebagai alternati f sob.. silahkan dicoba :)
  30. Cepat sekali kang :D
    1. secepat rossi kah.. atau rossi lewat :D
  31. baru OL lagi kang, banyak ketinggalan saya nih :( triknya ajibbbbbbbbbbbbbbb
    1. padahal abdi tos di amerika yeuh.. kemana aja atuh :D
  32. baru tau saya sob.. makasih udh si share :)
  33. kang saya buat post 2 kolom dengan kode dibawah ini, terus pada Pages efeknya gk jelas gitu? gimana ya kang solusinya?

    contohnya http://bravoseo.blogspot.com/p/blog-page.html..

    sekalian maaf ya kalo ada salah/ design yang mirip :D

    <style>
    .post {width:340px;height:140px;margin:5px;overflow:hidden;float:left;}
    </style>
    1. emang ada yang mirip? :) itu pas halaman depan pake tag kondisional ga?
    2. Pke Tag Kondisional ini aja
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <style type='text/css'>
      KODE CSS
      </style>
      </b:if>
      </b:if>
      Tidak akan muncul pada halaman post dan statis
  34. wah mudah juga yah
  35. kang saya mau tanya dong...
    liat diblog saya kang..
    ko pas halaman utamanya cuma muncul 4 saja ya? padahal di settingan saya sudah pasang 8. itu knapa ya kang ? :o
    1. masalahnya di sini sob http://blog.kangismet.net/2013/06/blogger-auto-pagination-dan-solusinya.html
  36. sumpah kang selama ane ngeblog baru tau ada CTRL+SHIFT+R , jadi nih tutor bisa buat ganti font atau yg sejenis" gitu lah ya . thanks kang tutornya mantep banget :D ijin share diblogku boleh ya ^_^v
    1. heheh... kirain udah pada tau... :)
  37. Top nya cuma di homepag aja kang ??
    1. pan aya dina sliding box :)
  38. Kang, aku mau nanya pertanyaanku dulu kang . . masih inget gak yang tutorial maz-waone yang tab dan halaman itu . . nah kan aku cek di validator tetep disitu gagal terus . . error mulu valid html5 nya . .

    Nah kata maz-waone begini kang " Yg saya gunakan ini bukanlah TAB, tapi tombol/button yg memunculkan komentar dan postingan pada saat diklik, untuk tutornya sobat bisa kesini http://de5ain.blogspot.com/2013/06/memanggil-elemen-css-menggunakan.html " nah, masalahnya saya tidak mengerti yang di jelaskan di http://de5ain.blogspot.com/2013/06/memanggil-elemen-css-menggunakan.html . .

    Pertanyaan aku , gimana kang menggunakan elemen itu , biar tampilan POST dan Komentar di www.mafiasitez.blogspot.com punya ku itu berhasil :( help ya kang :(
    1. menurut saya gini, pertama sembunyikan #comments, terus buat id baru di luar posting, soalnya posting menggunakan class. misal <div id='postingan'>
      kode postingan di sini....
      </div>       selanjutnya untuk tombol toogle :
      apabila klik tombol komentar, maka #comments dimunculkan dan #postingan di sembunyikan <a href='javascript:void(0)' onclick='document.getElementById('comments').style.display='block';document.getElementById('postingan').style.display='none''>Komentar</a>
      apabila klik tombol posting, maka #postingan dimunculkan dan #comments di sembunyikan <a href='javascript:void(0)' onclick='document.getElementById('comments').style.display='none';document.getElementById('postingan').style.display='block''>Posting</a> untuk lebih jelasnya nanti saya buat postingannya :)
  39. Berhasil dengan sukses Kang :)
    1. congrats deh
  40. Kalau saya misal pingin cari atau menyamakan warna warna biasanya pakai ColorZilla http://www.colorzilla.com/chrome/ dan ke Photoshop deh kalau mau keseluruhan mendesign :D
    1. emang banyak alternatif ko sob
  41. Kalau saya Kang hampir sama dengan yang dikatakan teman diatas tadi menggunakan inspect elemen lebih mudah dan cepat :)
  42. kok saya gagal mulu ya kang ..

    tolong pencerahannya ya kang ...
    1. gagal dimananya? pengambilan warna? atau apa?
  43. nah kalo yg ini ane faham dan mudah kang.. ane malah suka gonta-ganti warna modif lewat photoshop, ari update postingan diantep :D
    1. naha atuh :)
  44. cepet banget kang, WUSSS, oh iya, gimana kang cara buat Terimakasih telah berkomentar dibawah kotak komentar ?
    1. pake background gambar ko itu
  45. Maaf kang bade rada kaluar..
    Gimana cara membuat efek hover dan ada loadingnya? :D
    1. Pada gambar.
  46. Mungkin ini bisa dicoba kang... http://instant-eyedropper.com/
    1. iya lebih simpel bagi webmaster :-d
  47. baru ane coba di blog cadangan ane kang.,
    teernyata simpel ya.,
    emang sih awal nya susah karna jarang main PS tapi kalo di fikir2 mudah juga,.

    makasih ya kang tutorial berharga nya,.
  48. Pake GIMP juga bisa bang
  49. pakai Eye Dropper chrome extensions.
  50. Benar sekali seperti kata komen diatas, pake inspect elemen lebih cepat, walupun buat pemula kalo seandainya dibikin tutorialnya mungkin bisa lebih mengerti... salam kang ti urang bdg, hatur nuhun tutorialna :D

    Kalo bisa request saya masih bingung buat mengsinkronisasikan lebar outter-wrapper (atau apalah itu?) supaya bisa seimbang sama berbagai macam screen resolution secara otomatis, mungkin bisa dimengerti..
    1. banyak jalan menuju dago.. eh roma :) kumaha karesep we kang, nyaeta masalahna kadang aya web anu ditutup klik kanana, jadi lebih enjoy pake PS.

      Untuk tutorial responsive desain, coba cari aja tentang media queries, sudah banyak yang share ko sob :)
  51. wah kang ismed saya pemula bermanfaat banget ilmu kang...
    Thanks banget nih kang mohon sarannya juga kang tentang blog saya manarangmamuju.blogspot.com
  52. Bukannya lebih simpel pake inspect elemen kang ? buat milih rana pengganti bisa pake color pick online ?

    Biasanya kalo buka browser plus photoshop kompi rada berat :D
  53. ane sering gunain cara ini

    cuma yang paling mudah gunain colorscheme studio kang, lebih gampang
  54. ini kang yang saya cari - cari baru ketemu disini,thanks ya kang..
    saya tunggu KUNBALnya di bakul-anime.blogspot.com
  55. thanks tutorialnya :D
  56. makasih kang buat tutorialnya. bermanfaat bgt.
    1. sama2.. semoga tambah kinclong blognya
  57. mantap kang
    jadi lebih gampang,, ga ribet
    sukse selalu kang ismet
  58. kalo pake corel gimana kang?
    soalnya aku ga punya soto sop :(
    1. agak susah kalau pake corel..
  59. Kalo ane kang ga perlu di Screen Cukup Inspect Element :)
  60. Langsung dipraktekkan...:-)
    thanks kang
  61. ane lebih suka inspect elemen kang,,, lebih mudah dan cepat
    1. silahkan gunakan cara yang paling mudah.. ini hanya alternatif aja ko
  62. repot mas, mendingan pake photoscape,,, ga semua photoshop ringan dimasing2 pc
    1. hanya alternatif aja.. seseuai keyakinan masing 2 wkwkkwkwk
  63. ah gwe gagal maksudnya apa sih????//???
    klik pada area kode??
    maksudnya kode yang di bagian HTML gwe block semua????????
    1. bukan block... cukup klik aja pada kode HTML
  64. waah hebat kang, aku benar benar sangat terbantu dengan trik kang ismet ini, sangat bermanfaat makasih kang ayo berkarya teruus
    1. berbagi pengalaman aja sob.. makasih motivasinya
  65. Terimakasih banyak infonya kang..
    Kebetulan saya juga pake template Zikazev Blue, hehehe.. :D
  66. Keren,ini yang ane cari-cari. Baru nemunya sekarang,hehehe :D
  67. Thanks gan
  68. mantap :D artikel ini yang saya cari cari :D jalan lupa ya kunjungi juga blog saya kang http://ilhamfadilahputra.blogspot.com
  69. sipp membantu sekali
  70. Aku ga bisa Fotoshop
    1. pakek ini kang dewan

      http://instant-eyedropper.com/?ref=ie
  71. Ajibb kang ;)
    (Y)
  72. Mantap kang :)
  73. cobaan heula ah atur nuhun kang ismet
  74. Nuhun kang abdi ge bikin versi nu abdi, terinspirasi ti dieu.

    http://www.asep11.info/2014/04/cara-cepat-merubah-warna-template-blog.html

    Abdi nembe terang akang teh orang sukabumi ning. Abdi ge orang sukabumi kang didaerah cibeureum kaluhur terang teu? hehe...
    Nuhun kang blogna menginsprasi abdi yeuh nu awam kana edit2andi blog. Kapan-kapan hoyong diajar langsung eung sareng kang ismet sabari ngopi :))
  75. OOT sebelumnya makasih kang. tutornya luar biasa. saya mau nanya gimana cara baut menu kaya ini disamping pengin buat??? kasih tutornya kang..
  76. terima kasih mas infonya sungguh bermanfaat
    http://gebogs.blogspot.com/
  77. mantap mas kang,, sekali coba lgsung sukses,,, hohoho dr pd pk inspect elemen :D
    makasih mas kang
  78. Thanks Gan sangat membantu banget bagi ane :)
  79. wah,... makasih banyak mas tutorialnya
    bw ya : www.lingkartulis.com
  80. kang, kalo pake photoshop selain portable cs5 bisa gak?:)
  81. Sebernarnya lebih cepet langsung masuk ke html aja
  82. makasih mas ini bisa buat tambahan ilmu buat saya.
    "Salam the mbah jenggot"(^_^)v
  83. makasih banyak mas atas tutornya,, biasanya ane mau rubah warna dalam template perlu 3-4 hari baru selesai, setelah ane baca artikelnya om ane cuma butuh waktu 1 jam paling lama, ahaai....
    skali lagi makasih om atas tutornya... ^^
  84. Thanks Kang sekarang saya udah bisa ngedit backrodun template dengan mudah :D
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
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.