Cara Mudah membuat Background Gambar Gradient

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Mudah membuat Background Gambar Gradient dan semoga artikel ini bermanfaat.

---

Membuat Background Warna Gradient maksudnya yaitu membuat background pada blog dengan efek dua warna sehingga menjadikan perpaduan yang enak dipandang mata juga menambah kreatifitas.

mungkin sudah banyak digoogle sana panduan yang membahas mengenai masalah ini namun mungkin barangkali diantara sobat yang kebetulan mampir di blog ini dan berminat melihat tutorial ini, khususnya buat para blogger pemula seperti saya yang masih suka utak atik blog mungkin saja cara ini bisa membantu sobat untuk menambah kerennya blog sobat menggunakan background gradient. 

Sobat namun barangkali mohon maaf sebelumnya kalau saja dalam penjelasannya kurang jelas maklum lagi puasa ni jadi kurang konsen. biar cepet selesai ni berbaginya langsung aja ya.

Membuat Gambar background gradient

• Pertama sobat kunjungi layanan pembuat gambar gradient online di Dynamic Drive

• Silahkan sobat masukan ukuran gambar dan warna yang sobat inginkan.

• Gradient width adalah ukuran lebar gambar
• Gradient height adalah ukuran tinggi gambar
• Top color adalah warna atas
• Bottom color adalah warna bawah

• Selanjutnya klik "Get full size image" yang ada diatar kotak warna yang sesuai dengan pilihan kita.

• Setelah itu maka akan terbuka gambar bakground tersebut pada halaman baru, kemudian anda tinggal menyimpannya gambar tersebut di komputer sobat. Caranya sobat klik kanan tepat ditengah gambar tersebut kemudian Save as atau simpan gambar dengan nama.. untuk yang menggunakan mozilla bahasa Indonesia. jangan lupa untuk mengingat letak gambar yang telah disimpan tersebut dalam komputer sobat, misal: sobat menyimpan pada "folder Download" untuk memudahkan sobat membukanya nanti.

Menghosting Gambar Background gradient

Setelah sobat selesai membuat gambarnya serta telah menyimpannya di komputer sekarang sobat tinggal memasangnya di blog sobat. caranya mungkin sobat sudah pada tau cara pemasangannya di blog namun mungkin karena gambar tersebut masih berada di dalam komputer dan belum dihosting maka sobat perlu menghostingnya terlebih dahulu. Ada banyak situs yang menyediakan jasa hosting gratis namun pada kesempatan kali ini saya akan sampaikan cara mudah menghosting gambar khususnya pengguna blogspot, disini kita tidak usah menggunakan jasa hosting pihak ketiga karena akan menggunakan langsung dari blogspot, caranya seperti ini:

• login ke blogger seperti biasa.
• kemudian sobat buka halaman entry baru atau membuat postingan baru.
• pada halaman membuat postingan sobat ga usah menambahkan apa-apa, seperti membuat judul dan lain-lain karena halaman ini nantinya akan dihapus lagi.
• Setelah halaman edit postingan terbuka silahkan sobat klik insert image. seperti sobat memasang gambar saat memposting.

•  setelah terbuka halaman uploadnya, seperti biasa klik pilih file selanjutnya buka dimana gambar background yang tadi dibuat itu disimpan, setelah upload gambar selesai sobat tidak usah mengklik Add selected, sobat langsung saja klik kanan pada gambar tersebut kemudian klik "salin lokasi gambar" dan simpan pada notpad sobat terlebih dahulu biar tidak lupa atau sobat mau mempastekan langsung ke halaman edit HTML yang mau dipasang backgruond tersebut juga bisa.

Memasang Background gambar gradient

Sekarang sobat tinggal meletakan URL background yang tadi di dalam edit HTML template sobat.
Sobat pada pembuatan background tadi itu peruntukannya buat apa, buat background body, header, Menu, sidebar atau yang lainnya. Intinya seperti biasa saja waktu sobat edit HTML template sobat tinggal mencari kode backgroung yang ada di dalam template tersebut dan untuk semua bagian diatas kodenya akan sama namun apabila bagiannya belum menggunakan bacgroun maka sobat tinggal menambahkan kode background.

Contoh untuk body: 

body{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlrVnPvnxrIs6E-AxbcOTtH403d0Gwo0ajBmbaTBMo1OG2UdeYi7R6pshJcOpyHHpz8QRP3bJoO5gpcE3t5yarLOSdEYrT5A8HhyphenhyphenPDFL6JxQj98rBlPVbnL5bF24MywHG4GCcWq3-dwU8/s1600/bg-blog+.png) repeat fixed top center;color:$textcolor;font:x-small Georgia Serif;font-size:small;text-align:center;margin:0}

Nah sobat tinggal mengcopy paste kode yang disimpan di notepad tadi pada kode yang berwarna merah.
untuk header, menu sidebar, post dan lain sebagainya akan sama seperti diatas caranya tinggal cari kode backgrounnya saja.

Catatan:
Untuk menyiasati agar ukuran gambar  tidak terlalu besar maka sobat bisa mengatur ukuran tersebut sekecil mungkin, untuk pemasangan gradient dari atas kebawah seperti contoh diatas maka sobat atur ukuran widthnya 10 atau 20 saja atau lebih kecil juga ga apa, dan untuk height nya sesuaikan dengan keperluan mau buat apa.
Agar gambar tersebut bisa tampil full sesuai ukuran widthnya yang diperlukan maka sobat tinggal memasang kode repeat-x setelah tanda tutup kurung ")" sehingga seperti ini;

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlrVnPvnxrIs6E-AxbcOTtH403d0Gwo0ajBmbaTBMo1OG2UdeYi7R6pshJcOpyHHpz8QRP3bJoO5gpcE3t5yarLOSdEYrT5A8HhyphenhyphenPDFL6JxQj98rBlPVbnL5bF24MywHG4GCcWq3-dwU8/s1600/bg-blog+.png) repeat-x;

dan menggunakan repeat-y untuk yang menggunakan gradien dari kiri ke kanan serta ukuran yang dikecilkannya pada tingginya (pada membuat gambar gradientnya)
perlu diperhatikan; jangan sampai tidak memisahkan tanda ")" dan hurup "r" dengan spasi, karena apabila tidak dipisahkan maka pada browser IE background tersebut tidak akan berfeungsi.

 

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Mudah membuat Background Gambar Gradient kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 19:04