Cara Membuat Efek Warna Gradient Pada Blog

Cara Membuat Efek Warna Gradient Animasi/Berjalan- Kali ini admin akan membahas ini dan sedikit memperluas kegunaanya bagi yang tidak tau

karena warna efek ini cukup dengan css dan sangat mudah jika kalian pahami dan memasangkanya pada letak hyang benar

Tujuan wana ini mungkin Agar pembaca terlihat menarik melihat text tulisan pada blog kalian dengan warna" karena hidup itu penuh wana <just!>

Oke lanjut cara pertama kita membuat Block Qoutes pada post atau artikel kalian dengan efek gradient yang cantik

Untuk Cara Memasang Block Qoutes Berwarna
Masuk ke Blogger
Pilih Template > Edit HTML, Cari kode ]]></b:skin> dengan CTRL+F Untuk mempermudah pencarian lalu Tempatkan kode di bawah ini tepat di atas kode tadi

/* Material Color Box */
.warna{
   overflow:hidden;
   position:relative;
   margin:.5rem 0 1rem;
   transition:box-shadow .25s;
   border-radius:2px;
   color:#fff;
   box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   padding:20px;
   font-size:14px
}
.gradien1{
   background: linear-gradient(-45deg, #eded50, #ed5084, #131735, #ce063e);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}
.gradien2{
   background: linear-gradient(-45deg, #d5d6e5, #131a99, #39ced6, #211f1d);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}
.gradien3{
   background: linear-gradient(-45deg, #eded0b, #ed530b, #382670, #3f3639);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}
.gradien4{
   background: linear-gradient(-45deg, #EE7752, #E73C7E, #e2dcde, #a80f42);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}
.gradien5{
    background: linear-gradient(-45deg, #EE7752, #3ebcad, #1a0f3d, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}

Kemudian simpan
Kemudian klik postingan lalu entri baru pilih HTML, kemudian salin kode di bawah ini.

<div class="gradien1"> Gue ganteng Gue Ganteng Gue ganteng
        </div>

<div class="gradien2"> Gue ganteng Gue Ganteng Gue
        ganteng </div>

<div class="gradien3"> Gue ganteng Gue Ganteng Gue
        ganteng </div>

<div class="gradien4"> Gue ganteng Gue Ganteng Gue
        ganteng </div>

<div class="gradien5"> Gue ganteng Gue Ganteng Gue
        ganteng </div>

Klik Publikasi

Untuk demo bisa lihat dibawah ini :

Contoh gradien1: Gue ganteng Gue Ganteng Gue ganteng

Contoh gradien2: Gue ganteng Gue Ganteng Gue ganteng

Contoh gradien3: Gue ganteng Gue Ganteng Gue ganteng

Contoh gradien4: Gue ganteng Gue Ganteng Gue ganteng

Contoh gradien5: Gue ganteng Gue Ganteng Gue ganteng

Untuk seling warna gradient bisa kalian edit sendiri di CSS

2#
Cara Memasang Gradient Collor Di Header

Nah untuk ini tidak ada tambahan css lagi namun kita menambahkan / memanggil css yang di atas menggunakan 'Class' Sebagai contoh Class='gradien1' gradien2 gradien3 gradien4 gradien5 , Untuk efek warna bisa di atur sendiri

Misal kita memasang di header
1.Cari <div id='header'> Kalo tidak ada cari yang sama yang jelas tag utama sebuah div pada header
2. Tinggal tambahkan class contoh <div id='header' class='gradien1'>

<!-- SEBELUM -->
<div id='header'>
  ...
</div>

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

3. Jika disana sudah ada class nya Tinggal tambahkan 'gradien1' di dalam tag Class tersebut

<!-- SEBELUM -->
<div id='header' class='header'>
  ...
</div>

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

Dan jangan lupa untuk cek CSS pada #header atau .header yaitu css tujuan yang ingin diganti warnanya untuk memastikan sudah ada value backgroud sebelumnya dan jika ada hapus background tersebut karena sudah kita gantikan warna nya

Silahkan share atau berikan komentar jika ada kegagalan dan laporkan jika ada script yang tidak berfungsi sehingga admin akan memperbaharuinya.