Cara Tercepat Merubah Warna Template Blog
0 views
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 :) 
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.
Langkah-langkah dibawah lumayan banyak, tapi apabila dicermati sangatlah mudah :
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.
Sebagai contoh saya akan mengganti warna template Zikazev Blue, buka http://zikazevblue.blogspot.com, setelah terbuka silahkan PrintScreen (tekan PrtSC pada keyboard).
Buat dokumen baru File -> New -> OK, kemudian paste (Ctrl+V), maka tampilannya seperti ini :
1. Klik Eyedropper Tool atau tekan huruf 'i' pada keyboard
2. Arahkan Eyedropper Tool pada warna yang dituju (contoh menu warna biru) kemudian klik.
3. Lihat kebagian warna, maka akan berubah sesuai warna blog.
4. Klik warna tadi, maka akan muncul box, copy warna yang dilingkari warna merah :
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.
3. Kembali ke Photoshop, dapat kan warna yang cocok kemudian copy.
4. Paste pada blog sobat, kemudian Enter.
5. Klik Pratinjau Template
Lihat hasilnya, beberapa objek sudah berubah bukan? tanpa harus mengedit satu per satu. Lakukan langkah di atas untuk warna yang lain apabila belum berubah.
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...
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 :
LANGKAH 4 : Cara Mendapatkan Warna Blog
1. Klik Eyedropper Tool atau tekan huruf 'i' pada keyboard
2. Arahkan Eyedropper Tool pada warna yang dituju (contoh menu warna biru) kemudian klik.
3. Lihat kebagian warna, maka akan berubah sesuai warna blog.
4. Klik warna tadi, maka akan muncul box, copy warna yang dilingkari warna merah :
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.
3. Kembali ke Photoshop, dapat kan warna yang cocok kemudian copy.
4. Paste pada blog sobat, kemudian Enter.
5. Klik Pratinjau Template
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...
173 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
skali lagi makasih om atas tutornya... ^^
"Salam the mbah jenggot"(^_^)v
bw ya : www.lingkartulis.com
makasih mas kang
http://gebogs.blogspot.com/
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 :))
(Y)
http://instant-eyedropper.com/?ref=ie
Kebetulan saya juga pake template Zikazev Blue, hehehe.. :D
klik pada area kode??
maksudnya kode yang di bagian HTML gwe block semua????????
thanks kang
soalnya aku ga punya soto sop :(
jadi lebih gampang,, ga ribet
sukse selalu kang ismet
saya tunggu KUNBALnya di bakul-anime.blogspot.com
cuma yang paling mudah gunain colorscheme studio kang, lebih gampang
Biasanya kalo buka browser plus photoshop kompi rada berat :D
Thanks banget nih kang mohon sarannya juga kang tentang blog saya manarangmamuju.blogspot.com
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..
Untuk tutorial responsive desain, coba cari aja tentang media queries, sudah banyak yang share ko sob :)
teernyata simpel ya.,
emang sih awal nya susah karna jarang main PS tapi kalo di fikir2 mudah juga,.
makasih ya kang tutorial berharga nya,.
Gimana cara membuat efek hover dan ada loadingnya? :D
tolong pencerahannya ya kang ...
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 :(
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 :)
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
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>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
KODE CSS
</style>
</b:if>
</b:if>
Tidak akan muncul pada halaman post dan statis
Wajib di coba nie, biar template saya terlihat berbeda dari template lain walupun sama.. :D
bingung komentar kang tos seepeun ...
Ada software kecil gratis dari Nattyware, namanya Pixie.
Saya biasanya pakek itu. :)
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
Kebetulan baru tau nih,, terima kasih Kang.
tinggal rubah deh....biasanya klo warna PS kadang tidak kompatible dengan browser kang....
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
Elemen yang dihiangkan
</b:if>
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
Baru tahu saya akang kalau ada replace all pke Ctrl+Shift+R. Parah udah lama main blog baru tahu sekarang :(
maklum gk punya photoshop, jadi gk sempat kepikiran hahaha :D
:-bd
secepat pejabat ngambilin uang rakyat hehe lho lo ko jadi kesana y ??
mantab dach :D