,

,

Template VioMagz Redesign Based Version 2.4 Gradien Color WORK 100%

Viomagz Redesign Gradien Color
VioMagz Redesign

Kali ini saya akan share tutorial merubah atau mendesign tampilan Template VioMagz dengan tampilan Gradient Color. Viomagz merupakan template yang lagi viral buatan dari Mas Sugeng penerus Evomagz yang merupakan template fenomenal dan digunakan ribuan blogger Indonesia. Oke langsung saja, sementara saya akan share cara mendesign saja. Jadi untuk kalian yang sudah membeli template VioMagz tinggal mengikuti tutorial di bawah ini. Untuk yang masih belum punya saya sarankan beli dulu ya ke Mas Sugeng.

Cara Penerapan Gradien Color
  1. Silahkan masuk ke Dashboard Blog
  2. Setelah itu Klik Template/Tema > Klik Edit HTML
  3. Nah dibagian ini cari kode #header-wrapper jika di blog saya, lalu hapus kode Background nya seperti dibawah ini
  4. #header-wrapper {
     background: #000; /* Dihapus */
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
    }
  5. Maka akan hasilnya jadi seperti ini
  6. #header-wrapper {
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
    }
  7. Setelah itu kalian copy kode berikut
  8. {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. Jika sudah buat pemanggilan kode terlebih dahulu, misal #header-wrapper{paste kode animasinya}
  10. #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%}}
  11. Penempatan kode dibawah <style> or <b:skin> . dibawahnya jangan diatasnya
  12. Lalu kalian Save/Simpan Template.
  13. Coba kamu lihat Tampilan nya pasti akan berubah warna
  14. Selesai 
  15. Keterangan : Pada kode diatas hapus bagian Background yang sudah saya kasih tanda /* Dihapus */

Pemanggilan kode

Pada pemanggilan kode adalah pada bagian HTML misal kan jika saya ingin memanggil kode <div class="panggil"/> maka yang harus dipanggil ada kode .panggil , kenapa pakai titik? jika kamu tahu perbedaan antara Class dan Id maka akan tahu.

Class dipanggil menggunakan tanda "Titik"
Id dipanggil menggunakan tanda "Pagar"

Lantas untuk memanggil kode pada nomor 6 yaitu seperti ini.

<div class="header-wrapper"/>
lalu buat cssnya
<style>
.header-wrapper{kode gradien}
</style>

Mudah banget bukan? yaps, untuk mengganti warna dengan warna yang kalian mau silahkan ganti pada bagian warna seperti #EE7752 dan ganti dengan warna yang mau dipakai oleh kalian.

CARA PALING MUDAH
Jika mengikuti Cara di atas masih bingun silahkan langsung gunakan cara di bawah ini. Cara ini memang sebagian ada yang tidak bekerja. tapi kebanyakan work kok.

Coba copy code di bawah ini tepat di atas kode </head>
<style>#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%}}</style>


Subscribe to receive free email updates:

3 Responses to "Template VioMagz Redesign Based Version 2.4 Gradien Color WORK 100%"

  1. Terima kasih gan. Setelah pakai template ini diterima Adsense.
    Kunjungi blogku rastunarebel.com

    Salam.

    ReplyDelete