Tutorial Membuat Navigasi VioMagz Menjadi Gradient Color


Tutorial Membuat Navigasi VioMagz Menjadi Gradient Color - Halloween sobat sobat netizen sekalian, Jumpa lagi dengan saya di blog Calon Blogger, Saya ucapkan selamat membaca artikel yang saya sajikan ini.

Pada kesempatan kali ini saya akan memberikan sebuah ilmu, Yang mungkin akan sangat bermanfaat sekali buat kalian, Sebuah tutorial sederhana yang akan mempercantik tampilan dari Navigasi Template Viomagz Kalian.

Gradiant Color

Gradiant Color merupakan sebuah gaya, Atau desain yang memadukan beberapa warna dalam satu bagian, Lalu di program ke bahasa pemrograman CSS agar bisa di terapkan pada situs / blog kita, Nah disini saya akan menerapkan gaya gradiant Color hanya pada bagian Header navigasi nya saja, Jadi yang merasa tertarik, Cekidot :v

Sebelum nya Jika kalian belum mengetahui template VioMagz, Saya Akan sedikit menerangkan nya.

Template VioMagz merupakan template yang di ciptakan oleh mas Sugeng, Admin dari blog Sugeng id , Template ini sangat populer sekali, Dikalangan para blogger karena template ini merupakan penerus dari template evomagz.

Nama Template : VioMagz
Pencipta              : Mas Sugeng
Harga                   : 150k
Beli Disini            : Checkout

Jika kalian tertarik untuk membeli template nya, Kalian bisa beli official store nya diatasi, Mari langsung saja kita ke inti dari pembahasan.

Jika pada blog kalian telah terpasang template VioMagz, Kalian tinggal ikuti saja step by step yang akan saya beri tahu kepada kalian semua.

Saya sarankan kalian menggunakan template Viomagz Dengan versi diatas V2.2, Agar lebih Joss, Karena saya mensetting tutorial ini dengan versi V2.2

Mari langsung saja kita ke tutorial nya.
Berikut ini Tutorial Cara membuat Navigasi VioMagz Gradiant Color.

Cara Pemasangan :


1. Silahkan kalian saling kode CSS Di bawah sini.

  {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. Diatas merupakan kode CSS Untuk Gradiant Color, Kode tersebut belum sempurna karena kita belum menggabungkan kode CSS dengan kode Pemanggilnya, Maka dari itu mari kita siapkan kode Pemanggilnya terlebih dahulu, Untuk kode Pemanggilnya kalian hanya cukup menambahkan #header-wrapper{CSS nya} .

3. Jika kode Pemanggil dan kode CSS nya telah di gabungkan, 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%}}  

Catatan : Silahkan kalian ubah kode warna #EE7752, #E73C7E, #23A6D5, #23D5AB, Sesuai kode warna yang kalian inginkan, Untuk memilih kode warna kalian bisa kunjungi situs ini.  W3School

4. jika sudah kalian setting, Kalian bisa saling kode kode Pemanggil + kode CSS yang baru saja kita buat.

5. Selanjutnya silahkan kalian login ke akun blogger kalian masing-masing, Jika sudah silahkan pilih menu template, Lalu pilih opsi edit html.

6. Selanjutnya silahkan kalian cari kode <b:skin>, Jika ada letakan kode yang tadi kita saling tepat dibawah kode <b:skin>.

7. masih dalam mode edit html, Selanjutnya kita perlu juga menyiapkan kode Gradiant kedua, Untuk menyempurnakan Gradiant dari header navigasi bar nya.

8. Silahkan kalian cari kode #header-container, Jika ketemu, Yang awalnya kode nya 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 kode nya 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. Karena saya tidak mau terlalu lama dan membuat kalian bingung, saya sudah menyiapkan kode Gradiant Color yang kedua dengan CSS + kode Pemanggilnya, Kalian cukup salin saja kode di bawah ini, Lalu letakan tepat di bawah kode <b:skin>.

  #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%}}

Catatan : Silahkan kalian ubah kode warna #EE7752, #E73C7E, #23A6D5, #23D5AB, Sesuai kode warna yang kalian inginkan, Untuk memilih kode warna kalian bisa kunjungi situs ini.  W3SCHOOL

9. Silahkan kalian Simpan Template, Dan lihat perubahannya, Perubahannya akan sangat terlihat pada bagian header dari navigasi bar, Akan membuat sebuah efek animasi Gradianr color.

Bagaimana, Cukup mudah bukan ?
Kalian gak perlu bingung-bingung, Dengan demikian header navigasi bar dari blog kalian akan termodifikasi dengan color Gradiant, Dan blog kalian akan terlihat lebih menarik lagi.

Pada saat membuat artikel ini, Blog saya juga tengah menerapkan Gradiant color, Jadi inilah yang membuat tampilan dari blog saya berbeda.

Jika kalian merasa bingung atau tidak mengerti, Kalian bisa tanyakan pada kolom komentar yang telah saya sediakan, Jangan Sungkan sungkan.

Penutup

Demikianlah artikel ini bisa saya sampaikan kepada kalian semua, Bila ada salah ucap mohon untuk di maafkan, Jangan lupa untuk selalu mengunjungi blog saya ini, Cukup sekian dari saya.

Terima kasih.

0 Response to "Tutorial Membuat Navigasi VioMagz Menjadi Gradient Color"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel