Jumat, 13 Desember 2013

Cara Mengganti Warna Background, Gambar, Tulisan dan Garis Di Blog

 بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِي

Apakah anda sudah bosan dengan tampilan warna blog yang sekarang ?
Anda berhasil copas skrip, tapi warna hasilnya kurang sesuai selera ?
Atau ingin konfirgurasi warna pada blog anda seperti suatu blog tertentu ?
Berikut kami posting daftar kumpulan aneka macam warna, disertai kode dengan menggunakan dua inisial. yakni kode nama biasa dan kode bahasa HTML.
Contoh Penggunaan:
Saya ambil contoh widged di jadipintar.com, yang berjudul "Klik Anda Adalah Shadaqah" di kanan artikel ini. Inilah (sebagian) skripnya:

<style>
        /* Social Widget */
        #ForYouFree-bar {
            border: 0;
            margin-bottom: 10px;
            margin: 0 auto;
                width:270;
        }
        .fb-likebutton {
            background: #AFEEEE;
            padding: 10px 13px 0 10px;
            border-right: 1px solid #D8E6EB;
           border-left: 1px solid #D8E6EB;
           border-bottom: 1px solid #D8E6EB;
            margin:0px;

                height:40px;
................................................................ dst.
Hasil dan warnanya bisa anda lihat pada kolom fb (widget "Klik anda adalah shadaqah"), jika anda tidak cocok dengan warna background dan bordernya, anda bisa mengganti kode warna yang saya beri  tulisan berwarna merah dan biru dengan kode warna HTML atau dengan initalnya yang ada pada daftar di bawah, teruslah berkereasi sampai anda mendapatkan warna yang sesuai selera dan enak dipandang.

1.cMengganti Warna Background Blog

Mengganti background template bawaan dari google mungkin tidak menjadi suatu masalah yang merepotkan, akan tetapi kebanyakan para blogger sudah menggunakan template blog dari pihak ke-3 (pihak ketiga) yang dianggap lebih seo. Dan tentunya kita juga dihadapkan harus dapat meng-edit kode HTML yang ada jika ingin mengganti latar belakang template tersebut.
Sebagai blogger pemula saya ingin berbagi cara mengganti background blog dengan latar belakang yang baru, yaitu kategori background warna. 
Cara mengganti background blog dengan warna
Biasanya CSS body akan terlihat seperti model di bawah ini :

 body {background : #FF0000;
----
----

cara mengganti warnanya adalah :
    1.  Login dahulu ke blog anda
    2.  Pilih Template pada menu blogger anda
    3. Pilih Edit HTML
    4. Cari kode yang mirip dengan kode di atas (cari dengan menggunakan Ctrl + F seperti : body{background:#610B0B center top no-repeat;font-family: Arial, Helvetica, Sans-serif;font-size: 12px;margin:0px;padding:0px;}
   5. Setelah ketemu ganti kode di samping # (warna merah) dengan kode warna html yang telah anda tentukan    
   6. Klik pratinjau dahulu , lihat tampilan sementara apakah sudah sesuai dengan keinginan anda, jika ya silahkan anda save template, jika belum klik edit template dan silahkan diganti lagi kode  di samping # tadi, hingga warna backgroundnya sudah sesuai dengan keinginan anda.
Nilai dari #000000 dapat berbentuk seperti #6495ed atau #cccccc yang kita sebut kode hex (hexa) silahkan pilih mau menggunakan kode warna yang sesuai dengan keinginan, anda juga bisa melihat kode warna html untuk memilih kode warna yang anda inginkan (Silakan lihat daftar warna di bawah). Jadi prinsipnya ganti saja kode warna CSS BODY pada attribut background tersebut.


Merubah Aneka Background di Blog

1. Merubah Background Header Blog
Letaknya adalah paling atas, biasanya digunakan untuk meletakan judul blog, baik itu berupa tulisan atau sebuah banner. Cara merubahnya adalah :
Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #header-wrapper menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.


#header-wrapper {
background:
#f4f4f4;
dan seterusnya........

Jika Anda ingin merubah warna dengan kode #000000 maka hasilnya akan seperti ini :


#header-wrapper {
background:#000000;
dan seterusnya........

Bila tidak menemukan tulisan background:#f4f4f4; Anda bisa menambahkannya sendiri  tulisan tersebut tepat dibawah #header-wrapper {
Apabila sudah sesuai silahkan simpan atau pratinjau terlebih dahulu.

2. Merubah Warna Background Body
Terletak paling dasar atau dibalik halaman posting. Cara merubahnya :
Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan body { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

body {
background:#000000;
dan seterusnya........

Silahkan Anda sesuaikan dengan kode warna yang diinginkan .apabila selesai klik simpan.

3. Merubah Warna Background Halaman Postingan / Main body
Terletak paling tengah dan dijadikan sebagai tempat posting. Cara merubahnya adalah :
Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #main-wrapper { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.


#main-wrapper {
background:#000000;
dan seterusnya........

Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

4. Merubah Warna Background Sidebar
 Terletak disebelah halaman posting/main body, cara merubahnya adalah :
Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #sidebar-wrapper { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.


#sidebar-wrapper
background:#000000;
dan seterusnya....

Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

5. Merubah Warna Background Footer 
Terletak berada paling bawah halaman blog,cara merubahnya adalah :
Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #footer { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.


#footer {
background:#000000;
dan seterusnya...

Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

Daftar Kode Warna HTML
Putih =>#ffffff;
#FOF8FF
Aliceblue
#FAEBD7
Antiquewhite
#00FFFF
Aqua
#7FFFD4
Aquamarine
#F0FFFF
Azure
#F5F5DC
Beige
#FFE4C4
Bisque
#000000
Black
#FFEBCD
Blanchedalmond
#0000FF
Blue
#8A2BE2
Blueviolet
#A52A2A
Brown
#DEB887
Burlywood
#5F9EAD
Cadetblue
#7FFF00
Chartreuse
#D2691E
Chocolate
#FF7F50
Coral
#64950
Cornflowerblue
#FFF8DC
Cornsilk
#DC143C
Crimson
#00FFFF
Cyan
#00008B
Darkblue
#008B8B
Darkcyan
#B8860B
Darkgoldenrod
#A9A9A9
Darkgray
#006400
Darkgreen
#8B008B
Darkmagenta
#BDB76B
Darkkhaki
#556B2F
Darkolivegreen
#FF8C00
Darkorange
#9932CC
Darkorchid
#8B0000
Darkred
#E9967A
Darksalmon
#8FBC8B
Darkseagreen
#483D8B
Darkslateblue
#2F4F4F
Darkslategray
#00CED1
Darkturquoise
#9400D3
Darkviolet
#FF1493
Deeppink
#00BFFF
Deepskyblue
#696969
Dimgray
#1E90FF
Dodgerblue
#B22222
Firebrick
#FFFAF0
Floralwhite
#228B22
Forestgreen
#FF00FF
Fuchsia
#DCDCDC
Gainsboro
#F8F8FF
Ghostwhite
#FFD700
Gold
#DAA520
Goldenrod
#808080
Gray
#008000
Green
#ADFF2F
Greenyellow
#F0FFF0
Honeydew
#FF69B4
Hotpink
#CD5C5C
Indianred
#4B0082
Indigo
#FFFFF0
Ivory
#F0E68C
Khaki
#E6E6FA
Lavender
#FFF0F5
Lavenderblush
#7CFC00
Lawngreen
#FFFACD
Lemonchiffon
#ADE8E6
Lightblue
#F08080
Lightcoral
#E0FFFF
Lightcyan
#FAFAD2
Lightgoldenrodyellow
#90EE90
Lightgreen
#D3D3D3
Lightgray
#FFB6C1
Lightpink
#FFA072
Lightsalmon
#20B2AA
Lightseagreen
#87CEFA
Lightskyblue
#778899
Lightslategray
#B0C4DE
Lightsteelblue
#FFFFE0
Lightyellow
#00FF00
Lime
#32CD32
Limegreen
#FAF0E6
Linen
#FF00FF
Magenta
#800000
Maroon
#66CDAA
Mediumaquamarine
#0000CD
Mediumblue
#BA55D3
Mediumorchid
#9370DB
Mediumpurple
#3CB371
Mediumseagreen
#7B68EE
Mediumslateblue
#00FA9A
Mediumspringgreen
#48D1CC
Mediumturquoise
#C71585
Mediumvioletred
#191970
Midnightblue
#F5FFFA
Mintcream
#FFE4E1
Mistyrose
#FFE4E1
Moccasin
#FFDEAD
Navajowhite
#000080
Navy
#FDF5E6
Oldlace
#808000
Olive
#6B8E23
Olivedrab
#FFA500
Orange
#FF100%0
Orangered
#DA70D6
Orchid
#EEE8AA
Palegoldenrod
#98FB98
Palgreen
#AFEEEE
Paleturquoise
#DB7093
Palevioletred
#FFEFD5
Papayawhip
#FFDAB9
Peachpuff
#CD853F
Peru
#FFC0CB
Pink
#DDA0DD
Plum
#B0E0E6
Powderblue
#800080
Purple
#FF0000
Red
#BC8F8F
Rosybrown
#4169E1
Royalblue
#8B4513
Saddlebrown
#FA8072
Salmon
#F4A460
Sandybrown
#2E8B57
Seagreen
#FFF5EE
Seashell
#A0522D
Sienna
#C0C0C0
Silver
#87CEEB
Skyblue
#708090
Slategray
#FFFAFA
Snow
#00FF7F
Springgreen
#4682B4
Steelblue
#D2B48C
Tan
#008080
Teal
#D8BFD8
Thistle
#FF6347
Tomato
#40E0D0
Turquoise
#EE82EE
Violet
#F5DEB3
Wheat
#FFFFFF
White
#F5F5F5
Whitesmoke
#FFFF00
Yellow
#9ACD32
Yellowgreen

Semoga bermanfaat.
sumber:
http://blog-wandi.blogspot.com/2010/08/kode-warna-html-
http://hengkikristiantoateng.blogspot.com/2013/06/CARA-MENGGANTI-BACKGROUND-BLOG-DENGAN-GAMBAR-DAN-WARNA.html
http://www.masbugie.com/2010/05/merubah-warna-latar-background-blog.html

4 komentar:

  1. sangat bermanfaat bro, terima kasih :)

    BalasHapus
  2. terima kasih sharing nya sangat berguna
    oh ya gan ,,saya sudah coba tapi warna backgroundnya kenapa ga mau berubah ya gan ,,,
    dan sub menu saya banyak kenapa ketika scrol di menu utama..sub menu nya hanya 1 saja yang kelihatan. bagaimana ya cara nya
    1. agar background nya bisa berubah warna (sudah coba ganti kode tetap yg keluar warna biru)
    2. agar sub menu saya bisa kelihatan semua
    terima kasih sebelumnya agan
    anamaymyo.blogspot.com

    BalasHapus
  3. Border bisa dirubah2, pada skrip, silakan anda berimprovisasi dengan merubah-rubah angka "border" sampai ketemu yang sesuai keinginan anda, salam sukses.

    BalasHapus
  4. Makasih mas bro atas informasinya, jangan lupa singgah juga di blog saya ya

    BalasHapus