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

175 komentar

wew..saya juga menggunakan cara ini kang :)
mantab dach :D

Balas

cara yg cepat kang .. fast gitu hehe
secepat pejabat ngambilin uang rakyat hehe lho lo ko jadi kesana y ??

Balas

betul sob.. lebih mudah, daripada edit satu satu, blom lagi harus pilih class dan idnya :)

Balas

Baru aja saya ganti warna dominan blog hehehe...ternyata cara mencari warnanya sama hehehe...
:-bd

Balas

ari polibeurit mah.. eh politikus mah kadinya arahna, tapi ga salah juga, yang gitu tuh namanya tikus kantor :)

Balas

kalau pemain sotoshop pasti sama :)

Balas

jadi nuansa grayscale kang.. :-d

Balas

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

Balas

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

Balas

hihih kalau gitu sama seperti saya dong.. lebih cepat dan tidak menyita waktu |o|

Balas

silahkan dicoba.. bagi saya photoshop sangat wajib dalam editing template :)

Balas

benul eh betuuul.. satu kali klik langsung brubaaaah :)

Balas

udah 2 nih yang sama. ayooo siapa lagi :D

Balas

wihh cepet banget :D , sayangnya gak pandai main photosop :) .

Balas

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

Balas

Wuih, gampang dan cepat, ya. Pemula kayak saya juga bisa nih. Sippp.....

Balas

Muhun jadi abu-abu buruk hhehehehe :D

Balas

Tapi pami abdi mah tetep pilih-pilih kang, sapertos warna link, hover. Jadi tetep hiji-hiji hehehehe...

Balas

Kalo pake cara gini kayaknya Valentino Rossi ajah lewatttt......

Balas

silahkan dicoba miz.. mantep ko photoshop

Balas

wkwkkw.. kamana wae atuh ari kang eful :) Ctrl+F, Ctrl+R, Ctrl+Shift+R berlaku mulai edit HTML baru tea kang

Balas

tuh.. liat dibawah.. Rossi aja lewat :)

Balas

Dia baru mau naek motor, template udah jadi :)

Balas

Yang tahu cuman Ctrl + F gkgk...

Balas

enya sih kang.. tapi pasti aya warna dominan, atanapi minimal nu sami

Balas

terima kasih banyak kang, atas info nya sangat bermanfaat :D

Balas

sok cobian geura, ngedit ukuran, warna, font, jadi lebih mudah :D

Balas

langsung saya coba, dan berhasil 100% hanya dalam waktu kurang dari lima menit :D

Balas

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

Balas

bisa dicoba nie kang ismet :D

Balas

saya udah bisa manupulasi .deleted-comment terus kalo mau hapus bagian Avatar, nama dan lain2 gimana kang?

Balas

wkkwkw.. skill autodidact nya keliatan! sama kaya simkuring kang cara nya.. hehe keyennn bin mangstab. fast binti easy! wkwkwk

Balas

hehe iya bener juga :) saran bagus mas :)

Balas

wah, sial kenapa baru ada yang mudahnya, coba dari dulu :(

Balas

baru sekarang kepikiran buat di share..

Balas

Photosop emang mangtab apalagi plus dreamweaver

Balas

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

Balas

wah saya baru tahu ini kang, thanks sudah berbagi rahasia terbesarnya

Balas

Mantap cara nya Kang, coba saya coba nih,.
Kebetulan baru tau nih,, terima kasih Kang.

Balas

[ 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

Balas

Kalo cuman ngambil warna doang sih gak pakek Photoshop juga bisa Kang.
Ada software kecil gratis dari Nattyware, namanya Pixie.
Saya biasanya pakek itu. :)

Balas

Cara lama kang...

Tapi ada cara sama mudahnya dari ini kang, biasanya kita-kita para blogger sering membuka terlalu banyak tab browser yang mala akan memaksa kinerja laptop/komputer untuk melakukan pekerjaan agak besar, ditambah lagi membuka aplikasi berat seperti PhotoShop.

Dengan inspect element sama mudah nya kang (namun kurang paham untuk pemula), dan color picker online.

Jadi kinerja laptop berkurang kang, hehehe... :)

Balas

wah mantap tutorialnya kang,tapi kalau warna yg dipakai menggunakan backgound gambar apa dipakai cara ini kang?

Balas

saya sering pake inspect element, sengaja saya share cara seperti ini.. bagi pemula bingung lho menggunakan inspect elemen.. CSS sama HTML aja kadang bingung bedain :)

saya pribadi sih sering ngerjain desain.. sampai PS, AI, CDR, kebuka semua jadi ga masalah, apalagi ditunjang sama Core i7 :)

Balas

bisa aja sih kalau ngambil sebagian warnanya

Balas

hehe.. baru denger software itu.. mungkin bisa sebagai alternatif

Balas

sukses blog barunya sob :-d

Balas

sama2 kang.. mangga cobian

Balas

kalau inspect element udah tau dari dulu :)

Balas

sanes otodidak kang.. abdimah otomotif :D

Balas

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>

Balas

wkwkwkk.... aya aya wae si Akang ma ah...
Nyeri lambut yeuh... sura seuri siga sero olangand....

Balas

sok weolangan tong ujuk ajak nya palebah dinya mah :D :D

Balas

Punten bade tumaros kang dupi jalan kalangit kamana ?? hehe
bingung komentar kang tos seepeun ...

Balas

duka kang.. abdi jalmi enggal didieu :)

Balas

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

Balas

Wah, kalau photoshop, ane nyerah deh. :D

Balas

biasanya saya pake inspect element kang,,, ternyata ada yang lebih mudah. gak ku sangka pake photoshop jga bisa

Balas

betul sob... silahkan dicoba

Balas

kaya mau ditembak aja sob :)

Balas

sebagai alternati f sob.. silahkan dicoba :)

Balas

secepat rossi kah.. atau rossi lewat :D

Balas

baru OL lagi kang, banyak ketinggalan saya nih :( triknya ajibbbbbbbbbbbbbbb

Balas

hehe sanes mung ngingiring wae :-D

Balas

ah sok api2.. bisi kaduruk :)

Balas

padahal abdi tos di amerika yeuh.. kemana aja atuh :D

Balas

Hehehe, ya seperti itulah kang, selama saya main komputer, saya gak pernah pake photoshop, selain filenya yang besar, saya juga tidak hobi desain gambar :D

Balas

baru tau saya sob.. makasih udh si share :)

Balas

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>

Balas

emang ada yang mirip? :) itu pas halaman depan pake tag kondisional ga?

Balas

Muhun kang urang cobian, kedah seueur nongkrong di dieu meh kenging elmu.. :D

Balas

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

Balas

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

Balas

masalahnya di sini sob http://blog.kangismet.net/2013/06/blogger-auto-pagination-dan-solusinya.html

Balas

terimakasih telah menghapus komentar saya kang.. maaf kalau gara2 komen saya ada sedikit salah faham

Balas

wkwk kan gurunya Kang Ismet. :D

Balas
Komentar ini telah dihapus oleh pengarang.

wah makasih banget kang :D alhamdulillah berhasil :)

Balas

kan situ yang minta hapus sob :)
kadang2 niat baik jadi salah tafsir..

Balas

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

Balas

heheh... kirain udah pada tau... :)

Balas

ikut kehapus juga kang hehe .. peace love unity n resfect

Balas

Top nya cuma di homepag aja kang ??

Balas

pan aya dina sliding box :)

Balas

nyaeta atuh kang .. ari tos rerempo mah tara luak liek .. he

Balas

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

Balas

bisa bantu kang?

http://validator.w3.org/check?uri=http%3A%2F%2Fbravoseo.blogspot.com%2F2013%2F08%2Fefek-smooth-scrolling-pada-komentar-blog.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

Balas

untuk yang pertama coba <div class='clear'> geser ke sesudahnya, atau mungkin karena ada kode ini --> </body>

yang ke-2 : tambahkan kode itemtype="http://schema.org/Text" pada meta tag deskripsi

Balas

Berhasil dengan sukses Kang :)

Balas

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

Balas

emang banyak alternatif ko sob

Balas

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

Balas

Kalau saya Kang hampir sama dengan yang dikatakan teman diatas tadi menggunakan inspect elemen lebih mudah dan cepat :)

Balas

kok saya gagal mulu ya kang ..

tolong pencerahannya ya kang ...

Balas

nah kalo yg ini ane faham dan mudah kang.. ane malah suka gonta-ganti warna modif lewat photoshop, ari update postingan diantep :D

Balas

gagal dimananya? pengambilan warna? atau apa?

Balas

cepet banget kang, WUSSS, oh iya, gimana kang cara buat Terimakasih telah berkomentar dibawah kotak komentar ?

Balas

Maaf kang bade rada kaluar..
Gimana cara membuat efek hover dan ada loadingnya? :D

Balas

pake background gambar ko itu

Balas

tinggal pake background gambar loading, posisi 50% 50%

Balas

Mungkin ini bisa dicoba kang... http://instant-eyedropper.com/

Balas

iya lebih simpel bagi webmaster :-d

Balas

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

Balas

sudah bawaannya kang, dari dulu suka menggambar :) jadi tujuan ngeblog yg sbenarnya terabaikan hehe....

Balas

pakai Eye Dropper chrome extensions.

Balas

Maksudnya kode comments itu display nya none bukan mas? coba deh liat http://jbajadeh.blogspot.com/ :(

Balas

Saya oon banget ya mas, udah di ajarin sama mas wawan + kang ismet . . tetep aja gak ngerti ngerti . . saya lebih paham kalo lewat gambar per gambar . . atau video . . soalnya pas praktekinnya, gagal terus . . :(

Balas

nanti saya buat postingan khusus deh, biar mudah mencernanya

Balas

Makasih ya mas . . :) Semoga dengan Postingan Khusus nanti , saya bisa memahaminya :)

Balas

Mantep pisan Kang Trik yang ini
sudah saya coba dengan trik nya
Kang Ismet Hasilnya Mantep dan
Praktis. Hatur nuhun Kang.

Balas

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

Balas

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

Balas

wah kang ismed saya pemula bermanfaat banget ilmu kang...
Thanks banget nih kang mohon sarannya juga kang tentang blog saya manarangmamuju.blogspot.com

Balas

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

Balas

ane sering gunain cara ini

cuma yang paling mudah gunain colorscheme studio kang, lebih gampang

Balas

ini kang yang saya cari - cari baru ketemu disini,thanks ya kang..
saya tunggu KUNBALnya di bakul-anime.blogspot.com

Balas

makasih kang buat tutorialnya. bermanfaat bgt.

Balas

sama2.. semoga tambah kinclong blognya

Balas

mantap kang
jadi lebih gampang,, ga ribet
sukse selalu kang ismet

Balas

kalo pake corel gimana kang?
soalnya aku ga punya soto sop :(

Balas

agak susah kalau pake corel..

Balas

Kalo ane kang ga perlu di Screen Cukup Inspect Element :)

Balas

Langsung dipraktekkan...:-)
thanks kang

Balas

Betul kang , klw pake inspect element ane juga sering bingung , klw gini kan lebih mudah , mantap kang :)

Balas

ane lebih suka inspect elemen kang,,, lebih mudah dan cepat

Balas

silahkan gunakan cara yang paling mudah.. ini hanya alternatif aja ko

Balas

repot mas, mendingan pake photoscape,,, ga semua photoshop ringan dimasing2 pc

Balas

ah gwe gagal maksudnya apa sih????//???
klik pada area kode??
maksudnya kode yang di bagian HTML gwe block semua????????

Balas

bukan block... cukup klik aja pada kode HTML

Balas

hanya alternatif aja.. seseuai keyakinan masing 2 wkwkkwkwk

Balas

waah hebat kang, aku benar benar sangat terbantu dengan trik kang ismet ini, sangat bermanfaat makasih kang ayo berkarya teruus

Balas

berbagi pengalaman aja sob.. makasih motivasinya

Balas

bermanfaat sekali ilmunya mas, uda saya praktekkan boleh di lihat hasilnya :D

Balas

Terimakasih banyak infonya kang..
Kebetulan saya juga pake template Zikazev Blue, hehehe.. :D

Balas

Keren,ini yang ane cari-cari. Baru nemunya sekarang,hehehe :D

Balas

mantap :D artikel ini yang saya cari cari :D jalan lupa ya kunjungi juga blog saya kang http://ilhamfadilahputra.blogspot.com

Balas

pakek ini kang dewan

http://instant-eyedropper.com/?ref=ie

Balas

cobaan heula ah atur nuhun kang ismet

Balas

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

Balas

OOT sebelumnya makasih kang. tutornya luar biasa. saya mau nanya gimana cara baut menu kaya ini disamping pengin buat??? kasih tutornya kang..

Balas

terima kasih mas infonya sungguh bermanfaat
http://gebogs.blogspot.com/

Balas

mantap mas kang,, sekali coba lgsung sukses,,, hohoho dr pd pk inspect elemen :D
makasih mas kang

Balas

Thanks Gan sangat membantu banget bagi ane :)

Balas

haha, manawi teh otoiskandardinata. :D kwkw

Balas

wah,... makasih banyak mas tutorialnya
bw ya : www.lingkartulis.com

Balas

kang, kalo pake photoshop selain portable cs5 bisa gak?:)

Balas

Sebernarnya lebih cepet langsung masuk ke html aja

Balas

makasih mas ini bisa buat tambahan ilmu buat saya.
"Salam the mbah jenggot"(^_^)v

Balas

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

Balas

Thanks Kang sekarang saya udah bisa ngedit backrodun template dengan mudah :D

Balas

asiik :3 langsung bisa ane terapin di blog.. ternyata edit background mudah dengan cara sotosop. manteppp! :D

Balas

matur suwon sangat mas... lebih mudah ini caranya.. trimakasih :)

Balas

Poskan Komentar


×
Chat