heytekno.com Cara Ganti Warna Pada Template Blog apakah kalian baru saja menganti tema blog ? Ingin cari tau gimana ubah warna temanya dengan mudah meskipun belum pahan pemrograman CSS dan HTML, oke kalian mampir di tempat yang tepat sekali, di artikel ini kalian akan disediakan cara
merubah warna tema blog meskipun belum tau bahasa pemrograman. Beberapa waktu lalu saya mencoba membeli tema blog yang bernama viomagz versi 3.1 yang merupakan tema buatan dari mas sugeng , melihat sekilas saya langsung suka.
Simak Juga: cara blokir iklan adsense dengan cpc kecil
dengan tampilannya yang simple ringan dan elegan, tetap ringan tanpa mengorbankan desain “yang menarik”, biasanya tema blog yang ringan tidak ada foto disetiap tampilan artikel .keunggulannya Mulai dari tampilan menu yang sudah gradient pada versi 3.1 , search box, warna judul, tombol back to top, serta lain-lainya, namun saya ingin tampil beda dengan tampilan bawaan kemudian saya ubahlah beberapa warna yang ada sesuai keinginan,
saya mengunakan bantuan aplikasi adobe photoshop
untuk mencari kode hex nya atau bisa juga menggunakan color hex disitus ini bisa kalian temukan warna sekaligus keterangan kodehexnya yang sering diawali dengan tanpa pagar(#) kemudian diikuti enam karakter kombinasi huruf dan angka,
oke langsung mari kita bahas tentang cara edit warna pada template blog. Langkah ini bisa diterapkan di tema apa saja tidak hanya tema blog viomagz saja, ini tutorial versi saya tidak akan kalian temui dimanapaun, {sombong bener}. Dan sekaligus pengalaman yang pernah saya alami selama masih suka gonta-ganti template dan gara-gara gonta-ganti template traffik tidak pernah naik, segitu-gitu aja.
Bisa sampai satu minggu ganti 3 template dan kahirnya sekarang sudah berlabuh, cieee berlabuh hahaha.. dan akhirnya sudah hampir setengah tahun memakai viomagz.
Cara Mengganti Warna pada Template blog
Langkah pertama : kalian buka template blog kalian yang ingin diganti, lalu screenshot layar dengan posisi membuka template yang ingin di ganti.
![]() |
warna awal sebelum diganti |
Langkah kedua : setelah berhasil screenshot kalian buka file hasil screenshot tadi dengan aplikasi Photoshop, kenapa harus memakai photoshop? Karena untuk menemukan warna kode hex template kalian. caranya dengan menggunakan eyedroper tool
![]() |
mencari kode warna dengan eyedroper tool |
Langkah ketiga : login ke blog kalian masing masing-> lalu masuk ke menu tema -> edit HTML
Pada tahap ini mungkin akan menemukan sedikit kesulitan bagi kalian yang baru saja mengenal dunia blog namun akan sedikit terbantu dengan aplikasi photoshop yang berfungsi untuk menemukan code hex dengan melakukan screenshot pada langkah awal tadi. apa bila sudah ketemu sesuai dengan hasil pencarian eyedroper tool
Langkah keempat : Tekan pada keyboar ctrl + F lalu tinggal kalian pastekan code hex di kolom hasil dari menekan tombol ctrl + f tadi. ganti dengan warna yang baru sesuai keinginan di tanda yang dilingkari merah hasil pencarian tadi.
Langkah kelima: simpan perubahan dengan klik tombol simpan tema lalu perubahan akan kalian temukan.
![]() |
tema setelah diubah warna pada bagian munu |
Langkah diatas bisa kalian terapkan pada warna di bagian yang ingin kalian ganti. demikian langkah-langkah cara edit warna tema blogspot semoga bermanfaat. Dan apabila ada yang belum mengerti dengan langkah-langkah diatas silahkan tanyakan di kolom komentar. dibawah ini saya sediakan kode warnanya.
Kode Hex warna
Nama Warna | HEX | RGB | |
Alice Blue | #F0F8FF | rgb(240, 248, 254) | |
Antique White | #FAEBD7 | rgb(251, 235, 217) | |
Aqua | #00FFFF | rgb(0, 255, 254) | |
Aquamarine | #7FFFD4 | rgb(115, 255, 216) | |
Azure | #F0FFFF | rgb(239, 255, 255) | |
Beige | #F5F5DC | rgb(245, 245, 223) | |
Bisque | #FFE4C4 | rgb(255, 227, 200) | |
Black | #000000 | rgb(0, 0, 0) | |
Blanched Almond | #FFEBCD | rgb(255, 234, 208) | |
Blue | #0000FF | rgb(0, 0, 255) | |
Blue Violet | #8A2BE2 | rgb(138, 43, 226) | |
Brown | #A52A2A | rgb(165, 42, 42) | |
Burly Wood | #DEB887 | rgb(222, 184, 135) | |
Cadet Blue | #5F9EA0 | rgb(95, 158, 160) | |
Chartreuse | #7FFF00 | rgb(127, 255, 1) | |
Chocolate | #D2691E | rgb(210, 105, 30) | |
Coral | #FF7F50 | rgb(251, 127, 80) | |
Cornflower Blue | #6495ED | rgb(100, 149, 237) | |
Cornsilk | #FFF8DC | rgb(225, 248, 220) | |
Crimson | #DC143C | rgb(220, 20, 60) | |
Cyan | #00FFFF | rgb(62, 254, 255) | |
Dark Blue | #00008B | rgb(0, 0, 139) | |
Dark Cyan | #008B8B | rgb(29, 139, 139) | |
Dark Golden Rod | #B8860B | rgb(184, 134, 11) | |
Dark Gray | #A9A9A9 | rgb(169, 169, 169) | |
Dark Green | #006400 | rgb(19, 100, 0) | |
Dark Khaki | #BDB76B | rgb(189, 183, 107) | |
Dark Magenta | #8B008B | rgb(139, 0, 140) | |
Dark Olive Green | #556B2F | rgb(85, 107, 47) | |
Dark Orange | #FF8C00 | rgb(251, 140, 1) | |
Dark Orchid | #9932CC | rgb(153, 50, 204) | |
Dark Red | #8B0000 | rgb(139, 5, 0) | |
Dark Salmon | #E9967A | rgb(233, 150, 122) | |
Dark Sea Green | #8FBC8F | rgb(143, 188, 144) | |
Dark Slate Blue | #483D8B | rgb(72, 61, 139) | |
Dark Slate Gray | #2F4F4F | rgb(47, 79, 79) | |
Dark Turquoise | #00CED1 | rgb(48, 206, 209) | |
Dark Violet | #9400D3 | rgb(148, 0, 211) | |
Deep Pink | #FF1493 | rgb(249, 19, 147) | |
Deep Sky Blue | #00BFFF | rgb(43, 191, 254) | |
Dim Gray | #696969 | rgb(105, 105, 105) | |
Dodger Blue | #1E90FF | rgb(30, 144, 255) | |
Fire Brick | #B22222 | rgb(178, 34, 33) | |
Floral White | #FFFAF0 | rgb(255, 250, 240) | |
Forest Green | #228B22 | rgb(34, 139, 35) | |
Fuchsia | #FF00FF | rgb(249, 0, 255) | |
Gainsboro | #DCDCDC | rgb(220, 220, 220) | |
Ghost White | #F8F8FF | rgb(248, 248, 255) | |
Gold | #FFD700 | rgb(253, 215, 3) | |
Golden Rod | #DAA520 | rgb(218, 165, 32) | |
Gray | #808080 | rgb(128, 128, 128) | |
Green | #008000 | rgb(27, 128, 1) | |
Green Yellow | #ADFF2F | rgb(173, 255, 48) | |
Honey Dew | #F0FFF0 | rgb(240, 255, 240) | |
Hot Pink | #FF69B4 | rgb(240, 255, 240) | |
Indian Red | #CD5C5C | rgb(205, 92, 92) | |
Indigo | #4B0082 | rgb(75, 0, 130) | |
Ivory | #FFFFF0 | rgb(255, 255, 239) | |
Khaki | #F0E68C | rgb(240, 230, 140) | |
Lavender | #E6E6FA | rgb(230, 230, 250) | |
Lavender Blush | #FFF0F5 | rgb(254, 240, 245) | |
Lawn Green | #7CFC00 | rgb(124, 252, 2) | |
Lemon Chiffon | #FFFACD | rgb(255, 250, 205) | |
Light Blue | #ADD8E6 | rgb(173, 216, 230) | |
Light Coral | #F08080 | rgb(240, 128, 128) | |
Light Cyan | #E0FFFF | rgb(224, 255, 255) | |
Light Golden Rod Yellow | #FAFAD2 | rgb(250, 250, 210) | |
Light Gray | #D3D3D3 | rgb(211, 211, 211) | |
Light Green | #90EE90 | rgb(144, 238, 144) | |
Light Pink | #FFB6C1 | rgb(252, 182, 193) | |
Light Salmon | #FFA07A | rgb(251, 160, 122) | |
Light Sea Green | #20B2AA | rgb(40, 178, 170) | |
Light Sky Blue | #87CEFA | rgb(135, 206, 250) | |
Light Slate Gray | #778899 | rgb(119, 136, 153) | |
Light Steel Blue | #B0C4DE | rgb(176, 196, 222) | |
Light Yellow | #FFFFE0 | rgb(255, 255, 224) | |
Lime | #00FF00 | rgb(63, 255, 0) | |
Lime Green | #32CD32 | rgb(50, 205, 50) | |
Linen | #FAF0E6 | rgb(250, 240, 230) | |
Magenta | #FF00FF | rgb(249, 0, 255) | |
Maroon | #800000 | rgb(128, 4, 0) | |
Medium Aqua Marine | #66CDAA | rgb(102, 205, 170) | |
Medium Blue | #0000CD | rgb(0, 0, 205) | |
Medium Orchid | #BA55D3 | rgb(186, 85, 211) | |
Medium Purple | #9370DB | rgb(147, 112, 219) | |
Medium Sea Green | #3CB371 | rgb(60, 179, 113) | |
Medium Slate Blue | #7B68EE | rgb(123, 103, 238) | |
Medium Spring Green | #00FA9A | rgb(62, 250, 153) | |
Medium Turquoise | #48D1CC | rgb(72, 209, 204) | |
Medium Violet Red | #C71585 | rgb(199, 21, 133) | |
Midnight Blue | #191970 | rgb(25, 25, 112) | |
Mint Cream | #F5FFFA | rgb(245, 255, 250) | |
Misty Rose | #FFE4E1 | rgb(254, 228, 225) | |
Moccasin | #FFE4B5 | rgb(254, 228, 181) | |
Navajo White | #FFDEAD | rgb(254, 222, 173) | |
Navy | #000080 | rgb(0, 0, 128) | |
Old Lace | #FDF5E6 | rgb(253, 245, 230) | |
Olive | #808000 | rgb(128, 128, 1) | |
Olive Drab | #6B8E23 | rgb(107, 142, 35) | |
Orange | #FFA500 | rgb(252, 165, 3) | |
Orange Red | #FF4500 | rgb(250, 69, 1) | |
Orchid | #DA70D6 | rgb(218, 112, 214) | |
Pale Golden Rod | #EEE8AA | rgb(238, 232, 170) | |
Pale Green | #98FB98 | rgb(152, 251, 153) | |
Pale Turquoise | #AFEEEE | rgb(175, 238, 239) | |
Pale Violet Red | #DB7093 | rgb(219, 112, 147) | |
Papaya Whip | #FFEFD5 | rgb(254, 239, 213) | |
Peach Puff | #FFDAB9 | rgb(253, 218, 185) | |
Peru | #CD853F | rgb(205, 133, 63) | |
Pink | #FFC0CB | rgb(252, 192, 203) | |
Plum | #DDA0DD | rgb(221, 160, 221) | |
Powder Blue | #B0E0E6 | rgb(176, 224, 230) | |
Purple | #800080 | rgb(128, 0, 128) | |
Rebecca Purple | #663399 | rgb(102, 51, 153) | |
Red | #FF0000 | rgb(255, 0, 0) | |
Rosy Brown | #BC8F8F | rgb(188, 143, 142) | |
Royal Blue | #4169E1 | rgb(65, 105, 225) | |
Saddle Brown | #8B4513 | rgb(139, 69, 19) | |
Salmon | #FA8072 | rgb(250, 128, 114) | |
Sandy Brown | #F4A460 | rgb(244, 164, 95) | |
Sea Green | #2E8B57 | rgb(46, 139, 87) | |
Sea Shell | #FFF5EE | rgb(255, 245, 238) | |
Sienna | #A0522D | rgb(160, 82, 45) | |
Silver | #C0C0C0 | rgb(192, 192, 192) | |
Sky Blue | #87CEEB | rgb(135, 206, 235) | |
Slate Blue | #6A5ACD | rgb(106, 90, 205) | |
Slate Gray | #708090 | rgb(112, 128, 145) | |
Snow | #FFFAFA | rgb(255, 250, 250) | |
Spring Green | #00FF7F | rgb(63, 255, 128) | |
Steel Blue | #4682B4 | rgb(70, 130, 180) | |
Tan | #D2B48C | rgb(210, 180, 140) | |
Teal | #008080 | rgb(26, 128, 127) | |
Thistle | #D8BFD8 | rgb(216, 191, 216) | |
Tomato | #FF6347 | rgb(250, 99, 71) | |
Turquoise | #40E0D0 | rgb(64, 224, 208) | |
Violet | #EE82EE | rgb(238, 130, 238) | |
Wheat | #F5DEB3 | rgb(245, 222, 179) | |
White | #FFFFFF | rgb(255, 255, 255) | |
White Smoke | #F5F5F5 | rgb(245, 245, 245) | |
Yellow | #FFFF00 | rgb(255, 255, 0) | |
Yellow Green | #9ACD32 | rgb(154, 205, 49) |
Diatas merupakan cara untuk ganti warna pada template blog