Cara Mudah merubah header VioMagz Menjadi Gradient Color


 Cara Mudah merubah header VioMagz Menjadi Gradient Color - Hallo sobat sobat blogger mania, Dan juga para sahabat netizen, Selamat datang kembali di Blog Bang Ariel, Seperti biasa, Saya akan membagikan sebuah informasi yang mungkin akan sangat bermanfaat sekali buat kalian semua.


Sebelum ke topik pembahasan, Ada baiknya saya memberi pengertian terlebih dahulu mengenai Gradient Color,

Gradient Color

Merupakan sebuah Tekhnik,menyatukan warna warna menjadi satu bagian, Dalam pengcodingan Css3, Jadi Disini Kita akan menerapkan Css3 untuk tekhnik  Gradient Color Pada background header nya Template VioMagz, Buatan Mas Sugeng,

Disini saya menyarankan kalian menggunakan template VioMagz Versi 2.2, Versi terbaru dari template ini.

Jika kalian belum memiliki Template Ini Kalian Bisa Membeli Template Nya Disini.

Template : VioMagz
Versi Terbaru : v2.2
Pencipta : Mas Sugeng
Harga : 150 ribu
Order : Beli Disini

Kenapa Harus Pake V2.2 atau versi paling terbaru ?
Karena kita hanya perlu menaruh Css nya saja, Jika kita menggunakan yang V2.2 Atau Versi paling terbaru lainnya.

Jika kalian sudah memiliki nya, Langsung saja kita praktekan .

Step Tutorial


  1. Silahkan kalian Copy Kode Css Ini
     {background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #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%}} 

  2. Selanjutnya Kita siapkan dulu untuk kode pemanggil Css Nya, Cara nya Gimana sih ?
    Cara nya mudah saja, Untuk Css Diatas, Kita Cukup Tambahkan #Header-wrapper{css nya}
  3. Jadi Nanti Hasilnya akan seperti Ini :
     #header-wrapper{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #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%}} 


  4. Nah karena diatas saya sudah buat css nya, kalian cukup copy saja css + pemanggilnya yang diatas .
  5. Lalu kalian masuk ke dashboard blogger, Pilih opsi Tema, Lalu Edit HTML, Selanjut nya Cari Code <b:skin>, Letakan Css + Pemanggil Yang Telah Kalian Salin, Tepat Di Bawah Kode <b:skin>
  6. Selanjutnya, Kita siapkan css penyempurnaan nya, Karena css yang diatas belum cukup ,
    masih di opsi Edit Html, Kita sekarang Cari Code #Header-container, Jika Sudah Ketemu.
    Yang Awalnya Seperti Ini :
     #header-container {
     background: $(header.background.color);
        color: #fff;
        -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
        box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
        position: fixed;
     top: 0;
     left: 0;
     right: 0;
        width: 100%;
        z-index: 999;
    } 
  7. Silahkan Kalian Ubah Menjadi Seperti Ini :
     #header-container {
        -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
        box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
        position: fixed;
     top: 0;
     left: 0;
     right: 0;
        width: 100%;
        z-index: 999;
    } 

  8. Jika Sudah, Silahkan Kalian Copy Lagi Css + Pemanggilnya Di bawah sini :
     #header-container, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #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%}} 


  9. Lalu kalian simpan, Css + Pemanggilnya Tepat Di bawah <b:skin>, Jika Sudah Kalian Tinggal Save / Simpan Template, 
  10. Selesai.

Sekarang Kalian Bisa Cek Header Blog Kalian, Maka akan mengalami perubahan, Dengan di rubah background nya, menjadi gradient color, wahh mantaps pokoknya.

Untuk Demo Kalian bisa cek di bawah sini.

blog seputar segala macam informasi

Artikel Rekomendasi :
Baca Juga : Cara merubah tampilan latar facebook
Baca Juga : Smule sing menjadi pilihan aplikasi karaoke terbaik


Penutup :

Demikianlah artikel ini bisa saya sampaikan kepada kalian semua, Semoga bermanfaat dan sukses di praktekan oleh kalian semua, Jangan lupa untuk selalu mengunjungi blog saya ini, Sampai jumpa pada update yang selanjutnya, Cukup sekian dari saya.

Terima kasih.

10 Responses to "Cara Mudah merubah header VioMagz Menjadi Gradient Color"

  1. Replies
    1. Di perhatikan baik baik ya agan , artikelnya

      Dibaca pelan, pasti bakal paham.

      Delete
  2. gan ko punya saya malah jadi transparan ?

    mohon jawaban

    ReplyDelete
    Replies
    1. Transparan gimana gan ?

      Kemungkinan besar agan tidak memperhatikan bagian #header-container

      Delete
  3. Gan gimana sih cara buat header seperti blog ariel web id

    ReplyDelete
    Replies
    1. gampang kok gan, coba sebutkan kendala nya ada dimana ?

      Delete

Silahkan Berkomentar Dengan Baik, Dilarang !
- Sara
- Provokasi
- Menggunakan Kata Kasar
- Spam
- Phissing
- Sebar Url
- Dan Lain Lain yang melanggar ketentuan Google.

Berkomentarlah Dengan Sopan Dan Santun,

Jika komentar kalian melanggar ketentuan blog bang ariel, Dalam Sekejap Komentar Anda Akan Saya Hapus.

Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel