Cara Membuat Warna Gradisi Animasi Pada Blogger

Admin
Admin
pada tanggal
Update:
Premium By Raushan Design With Shroff Templates

Pembuatan Warna Baground Gradien Pada Blogger

Nah dipostingan kali ini saya bakal kasih tau ke para blogger semua yang suka memodifikasi templatenya. Di artikel ini saya bakal kasih tau cara merubah tampilan baground pada header kalian lebih keren lagi dengan cara memberikan warna gradisi pada baground header atau bagroud lainnya yang ada pada template kalian. Dengan kata keren ini bagroud gradasi yang kasih bukan hanya gradisi saja melainkan bergerak dengan warna pelangi.

Untuk cara pemasangan warna gradasi ini sanagatlah mudah dan gampang asalkan kalian paham dengan coding, jika kalian tidak paham silahkan ikuti tips cara pemsanganya di bawah ini.

Cara Membuat Warna Gradasi Pada blogger

Warna gradisi ini dapat kalian terapkan pada warna baground header, baground widget, baground menu, dan bagound lainya. untuk Demonya kalian bisa lihat pada bawah artikel ini.

Pemasangan Css

Pemasangan Css ini berfungsi untuk mengatur warna gradasi yang akan tampil saat saat warna gradasi di pasang di posisi mana (header,atau terserah kalian nantinya). untuk pemasangan css ini silhkan kalian ikuti cara di bawah ini

  • Pertama pastikan kalian sudah login ke blogger
  • Selanjutnya masuklah pada menu Themes - Edit Html.
  • Carilah Code </head> Lalu Copaskan Code di bawah ini tepat di atas code </head> 
.cmantuPelangi {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: cmantuGradient 12s ease infinite;
    -moz-animation: cmantuGradient 12s ease infinite;
    animation: cmantuGradient 12s ease infinite;
}
@-webkit-keyframes cmantuGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes cmantuGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes cmantuGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Pemasangan Code di atas lebih kurang seperti contoh di bawah ini 

<style>
<!-- masukan Kode CSS diatas -->
</style>
</head>
  • Kalian juga dapat memodifikasi kode diatas sesuai selera kalian.
  • Jika sudah silahkan klik simpan.

Penerapan Warna Gradient Pada Blog

Kalian dapat menambah kan kode cmantuGradient ke element yang di inginkan Seperti contoh di bawah ini untuk manmbahkan pada warna baground header

  •  Pertama cari lah kode <dive id='header'>
  •  Selanjutnya tambahkan Class sehingga menjadi seperti <dive id='header'class='cmantuPelangi'>

Contoh : Dibawah ini

<!-- Sebelum -->
<div id='header'>
  ...
</div>
<!-- Sesudah -->
<div id='header'class='cmantuPelangi>
  ...
</div>

 Selanjutnya penambahan Class seperti contoh di bawah ini (jika sudah ada class, tambahkan class sebelumnya)

<!-- Sebelum -->
<div id='header' class='header'>
  ...
</div>
<!-- SESUDAH -->
<div id='header' class='header cmantuPelangi'>
  ...
</div>

Selanjutnya jangan lupa menghapus css .header atau #header bawaan sebelum memasang css yang di atas tadi, Sebab jika tidak di hapus nantinya akan bentrok dan terjadi error.

Contoh Css Bawaan Sebelum Penerapan Css Gradient

#header {
  background: #ff000; /* bisa juga menggunakan property 'background-color' */
  position: relative;
  display: block
}

/* ATAU */

.header {
  background: #ff000; /* bisa juga menggunakan property 'background-color' */
  position: relative;
  display: block
}

Hapuslah Property bacground atau bacground-color karna akan tergantikan oleh Class cmantuPelangi

Related Posts

Memuat…