Cara Membuat Warna Gradien Animasi di Blog

Cara Membuat Warna Gradien Animasi Di Blog - Menambahkan warna gradien animasi pada blog ini dapat memperbagus tampilan blog kalian, yang semula tampilannya biasa saja setelah menggunakan warna gradien animasi maka blog kalian akan tampil luar biasa kerennya. Lanjut saja kalian simak tutorial membuat warna gradien animasinya.


Pertama

Login Blogger > Tema > Edit HTML > Cari kode ]]></b:skin> > Lalu Masukkan kode bagian yang ingin di berikan warna gradien animasi. Contoh : #header-wrapper  

Kedua

Copy lalu paste kode di bawah ini tepat di ats tadi yaitu #header-wrapper. Contoh : #header-wrapper Kode di bawah ini.


Kode CSS Gradien Animasi
{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%}}

Ketiga


Maka Kodenya akan menjadi seperti ini.
Hasil Kode CSS Gradien Animasi
#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%}}

Keempat

Save/Simpan > Refresh > Buka Blog > Done.

Komentar

Posting Komentar

Postingan populer dari blog ini

Download Vienna Lite 2 Responsive Blogger Template

Gambar
Featured Template : Responsive SEO Friendly Google Testing Tool Validator Mobile Friendly Dynamic Heading Personal Blog 2 Column Style Custom Threaded Comment Responsive Ad Slot Light Base Theme Color Breadcrumbs Top Navigation Responsive Dropdown Menu Related Posts with Thumb Search Box Social Share Button Smooth Scroll back To Top Custom Subscribe Box Widget Custom Contact Form Widget Custom Sitemap Widget Multi Author Box Well Documentation Live Preview Lihat langsung dengan semua fitur yang ada, baik di beranda maupun halaman posting. Download Gratis Langsung download templatenya disini secara gratis.
Baca selengkapnya

Cara Membuat Logo Google Drive Di CorelDraw

Gambar
      Bang Jariwis ~ Baiklah , kali ini saya akan membagikan tutorial cara membuat logo Google Drive dengan mudah di CorelDraw. Mungkin dari kalian semua , membuat logo Google Drive ini susah. Tetapi setelah saya desain sendiri ternyata sangatlah mudah. Cara membuat logo Google Drive ini mungkin tidak di minati oleh kalian semua. Langsung saja kita simak baik - baik tutorial yang saya berikan di bawah ini. Pertama - Buatlah bentuk segitiga terlebih dahulu menggunakan Polygon Tool (Y) . Contohnya seperti gambar di bawah ini. Kedua - Setelah itu Copy lalu Paste menjadi tiga bagian. Lalu , buatlah seperti bentuk pada gambar di bawah ini. Ketiga - Jika sudah menyelesaikan langkah - langkah di atas . buatlah garis - garis tepi agar tidak berlobang menggunakan 2-Point Line Tool . Pastikan gambarnya sama seperti contoh gambar di bawah ini. Keempat - Potonglah / buanglah bagian - bagian tertentu menggunakan Virtual Segment Delete Tool dan sekarang bentuknya seperti contoh pada gambar di b
Baca selengkapnya

Cara Membuat Logo Xiaomi Di CorelDraw

Gambar
      Bang Jariwis ~ Baiklah kali ini saya akan membuat tutorial cara membuat logo Xiaomi . Saya mendapatkan inspirasi tentang Cara membuat Logo Xiaomi dengan mudah di CorelDraw ini dari anggota grup chat Facebook saya. Yaitu grup KAMPANG . Grup ini memang tidak terkenal sih , karena Grup Facebook chat ini baru saja dibuat. Langsung saja kalian ikuti Tutorial - tutorial yang telah saya buat untuk kalian semua. Pertama - Kalian buatlah bentuk persegi empat seperti gambar di bawah ini menggunakan Rectangle Tool (F6) . Pastinkan bentuk yang kalian buat adalah persegi empat sama sisi .  Kedua - Copy dan Paste Bentuk persegi empat yang telah kalian buat tadi . Agar lebih mudah tekan Ctrl + C lalu Ctrl + V . Setelah itu gunakan Shape Tool (F10) . Lalu tarik kebawah agar bentuk perseginya menjadi tumpul. Ketiga - Potonglah bagian - bagian yang tidak diperlukan sehingga bentuknya berubah menjadi seperti gambar di bawah ini menggunakan Virtual Segement Delete Tool . Keempat - Setelah itu
Baca selengkapnya