Cara Membuat Background Warna Bergerak pada Blogger 100% Work
Selamat datang di Wahyu Development, kali ini saya akan membagikan tutorial bagaimana membuat warna background pada sebuah blog bergerak (Gradient). Ok langsung saja berikut tutorialnya.
Pertama anda harus login terlebih dahulu pada akun Blogger, kemudian masuk kemenu Tema --> Edit HTML. Pada menu Edit HTML, letakan code berikut sebelum code
</b:template-skin> atau di antara kumpulan code CSS.
Pada code HTML diatas anda dapat merubah warna sesuai dengan yang anda inginkan dan code warna yang digunakan menggunakan code Hex Color, yaitu code warna yang diawali dengan tanda # dan diisi berupa 6 digit angka. Contoh
Setelah code CSS tersebut dipasang, selanjutnya tambahkan code
Pertama anda cari code warna header dan hapus code warna tersebut, kenapa dihapus karena jika tidak dihapus script diatas tidak dapat berjalan karena bertabrakan dengan script bawaannya. Untuk mencarinya silahkan anda cari dibagian CSS atau dengan CTRL+F lalu masukan kata kunci
Pada gambar diatas terdapat kata background, silahkan anda hapus semua menjadi seperti ini.
#f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f.Setelah code CSS tersebut dipasang, selanjutnya tambahkan code
class='wahyudeveloper' pada setiap bagian yang ingin dibuat berwarna gradient. Disini saya akan memberikan contoh membuat warna header menjadi bergerak (Gradient).Pertama anda cari code warna header dan hapus code warna tersebut, kenapa dihapus karena jika tidak dihapus script diatas tidak dapat berjalan karena bertabrakan dengan script bawaannya. Untuk mencarinya silahkan anda cari dibagian CSS atau dengan CTRL+F lalu masukan kata kunci
#header-container. Maka akan tampil seperti ini.Pada gambar diatas terdapat kata background, silahkan anda hapus semua menjadi seperti ini.
[Catatan] setiap tema/template blog berbeda-beda, jika terdapat lebih dari dua pada halaman CSS Header tersebut anda harus menghapus semua, misalnya seperti.
Pada gambar diatas, yang saya lingkari dengan kotak merah harus anda hapus semua, dengan demikian color gradient akan berjalan dengan normal. Dan jika anda ingin mengganti footer, body, ataupun sidebar dengan warna gradient, anda harus menghapus code warna bawaannya terlebih dahulu.
Jika sudah di hapus anda cukup menambahkan
Jika sudah menemukan letak HTML Header anda cukup menambah-kan
Pada gambar diatas, yang saya lingkari dengan kotak merah harus anda hapus semua, dengan demikian color gradient akan berjalan dengan normal. Dan jika anda ingin mengganti footer, body, ataupun sidebar dengan warna gradient, anda harus menghapus code warna bawaannya terlebih dahulu.
Jika sudah di hapus anda cukup menambahkan
class='wahyudeveloper' ke bagian HTML yang anda inginkan. Disini saya memberikan contoh dibagian header. Anda harus mencari terlebih dahulu code HTML dari header tersebut.Jika sudah menemukan letak HTML Header anda cukup menambah-kan
class='wahyudeveloper' seperti berikut ini.
[Catatan] HTML dengan CSS berbeda, jadi anda harus memahami mana yang CSS dan mana HTML, CSS bisanya diawali dengan tanda titik (.) atau pagar (#) dan diakhiri dengan kurung kurawal (}). Sedangkan HTML biasanya berawalan <code> dan diakhiri </code>
Jika sudah silahkan klik save maka akan tampil seperti ini.
Berikut tambahan informasi mengenai posisi atau bentuk warna gradient, disini anda hanya perlu merubah script yang saya tandai dengan lingkaran berwarna merah.
Pada script yang saya tandai diatas adalah untuk merubah posisi pergerakan warna gradient, dengan anda menuliskan 45deg maka kemiringan pergerakan adalah 45 derajat, jika anda ingin pergerakan warna menjadi vertikal anda cukup merubahnya menjadi 90deg dan jika anda ingin membuat horizontal anda ubah menjadi 180deg.
Terakhir, pada script yang saya lingkari itu adalah untuk merubah bentuk gerakan, dimana anda dapat membuat secara linear (lurus) atau radial (melingkar), jadi untuk membuat bentuk pergerakan warna menjadi radial (melingkar) anda cukup mengganti kata linear menjadi radial.
Itulah cara membuat Background warna bergerak, berikan komentar anda tentang ini, jika ada ke gagalan dalam memasang script saya akan coba bantu. Semoga bermanfaat . . .
Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya
Ngebut gan..
ReplyDelete