RISWAN NET
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
RISWAN NET
No Result
View All Result
Home Blogger

Cara Membuat Warna Gradasi pada Menu Navigasi Blogger

Deni Riswana by Deni Riswana
28 Juli 2018
in Blogger, HTML
18 0
16
Cara Membuat Warna Gradasi pada Menu Navigasi Blogger
18
SHARES
912
VIEWS
ShareTweetSend

Cara Membuat Warna Gradasi pada Menu Navigasi Blogger – Akhir-akhir ini para blogger Indonesia diramaikan dengan pewarnaan gradasi pada pada Blog. Hal ini juga menjadi trend baru saat ini, tak sedikit juga blogger Indonesia mencoba serta mengaplikasikan pewarnaan gradasi pada situs mereka, bahkan Blogger terkenal seperti Adhi Suryadi (kompiajaib.com) dan Arlina Fitriyani (arlinadzgn.com) juga mengaplikasikan efek warna gradasi pada situs mereka.

Warna gradasi sendiri merupakan corak warna yang bisa dikembangkan/dipadukan dari dua atau lebih warna, sehingga membuat tingkatan warna tertentu dengan tidak merusak dan mengubah warna itu sendiri, dengan kata lain warna gradasi adalah perkembangan warna atau perubahan warna yang terjadi ketika dua warna atau lebih digabungkan.

Memang tampilan warna gradasi lebih terlihat bagus dibanding warna HTML yang biasa digunakan oleh para blogger, apalagi bila sobat pandai memilih paduan warnanya, tidak hanya itu sobat dapat menambahkan animasi pada warna gradasi. Keumuman blogger mengaplikasikan warna gradasi pada navigasi atau header blog, seperti Arlina Design atau Kompi ajaib. Dan saya sendiri menggunakan gradasi warna pada blog ini, dengan tambahan animasi.

Oleh karenanya pada kesempatan ini saya akan memberikan tutorial singkat Cara membuat warna gradasi pada menu navigasi blogger, berbeda pada gradasi warna yang dipakai keumuman blogger, saya akan menambahkan animasi perpindahan warnanya, seperti yang digunakan oleh Arlina Design. Saya sendiri terispirasi dari Arlina Design(www.arlinadzgn.com) yang menggunakan Gradasi warna dengan animasi.

Cara Membuat Warna Gradasi pada Menu Navigasi Blogger

Langkah Pertama
Masuk ke Blogger, lalu pilih Tema >> Edit HTML

Langkah Kedua
Kemudian tambahkan style berikut pada class menubar atau header blog, contohnya class menubar yaitu #main-wrap

#mainwrap{width:1010pxmargin:0 auto;}

Setelah ditambahkan seperti berikut

#mainwrap{width:1010pxmargin:0 auto;background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinit;display:block;}

Langkah Ketiga
Selanjutnya, menambahkan css animasi supaya animasi gradsi warna berjalan, silahkan letakan kode berikut sebelun ]]></b:skin>

/* Animation */
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Langkah Keempat
Smpan Template, lihat hasilnya

Mudah bukan? Semoga tampilan blog sobat menjadi lebih menarik, selain itu dengan menggunakan warna gradasi pada blog, berarti sobat telah mengikuti trend blogger kekinian.

Baca Juga: Waktu yang Tepat Untuk Menulis di Blog

Nah demikian artikel mengenai tutorial Cara Membuat Warna Gradasi pada Menu Navigasi Blogger seperti pada blog Arlina Design, semoga dapat bermanfaat.

-7.251216107.9235563
Tags: BloggerCara Membuat Header GradasiWarna Gradasi
Deni Riswana

Deni Riswana

Pengembang Digital dan Content Creator. Saat ini sedang menempuh pendidikan strata satu di Universitas Pendidikan Indonesia (UPI) dengan program studi Bisnis Digital.

Related Posts

Cara Membuat Jump Link di Blog
Blogger

Cara Membuat Jump Link di Blog dengan HTML

24 Januari 2020
Cara Submit URL di Google Webmaster Yang Baru
Blogger

Cara Submit URL di Google Webmaster Yang Baru

2 April 2019
Cara mengetahui jumlah postingan blogger
Blogger

Cara Mengetahui Jumlah Postingan Blog Punya Orang Lain

21 November 2018

Comments 16

  1. Riswan Net says:
    2 tahun ago

    testing tampilan komentar blogger terbaru

    Balas
  2. Bank Cara says:
    2 tahun ago

    wah lumayan keren juga tampilan komentar bloggernya

    Balas
  3. Riswan Net says:
    2 tahun ago

    perasaan kenal deh :v

    Balas
  4. Satria N says:
    2 tahun ago

    ini yg dicari".
    btw td gw coba malah background nya yg warna warni wkwk. experimen yg sangat hebat ;-(

    Balas
  5. Riswan Net says:
    2 tahun ago

    BTW itu sebenrnya ada yang salah, belum sempat saya perbaiki…

    Balas
  6. Riswan Net says:
    2 tahun ago

    Semuanya silahkan dicoba, kode sudah benar dan work 100%

    Balas
  7. Muhamad Ristiyanto says:
    2 tahun ago

    ralat gan ,itu kode infinit diatas seharusnya infinite (y)

    Balas
  8. Riswan Net says:
    2 tahun ago

    sipp, thanks sob

    Balas
  9. wiki ndean says:
    2 tahun ago

    dapat disini caranya, makasih bro

    Balas
  10. Riswan Net says:
    2 tahun ago

    sama-sama, semoga bermanfaat mas

    Balas
  11. SANJAYA says:
    2 tahun ago

    kok css animasi di blog saya gak jalan yah? padahal udah ngikutin langkah langkahnya

    Balas
  12. Riswan Net says:
    2 tahun ago

    rubah #mainwrap dengan kode id menubar yang sesuai di template agan.

    Balas
  13. Chumbart™ says:
    2 tahun ago

    Great work

    Balas
  14. Riswan Net says:
    2 tahun ago

    thank you a lot

    Balas
  15. Isat Jerry says:
    2 tahun ago

    Mantab tutornya om,,,,keren warna gradasinya

    Balas
  16. Rendy Saputra says:
    2 tahun ago

    mantap tutornya bang jadi keren blog saya

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Baru-baru Ini

Persiapan Jualan Online, Apa Saja Yang Harus Disiapkan

Apa Saja Yang Harus Dipersiapkan Untuk Jualan Online?

8 Januari 2021
Alasan Kenapa Anak Mudah Harus Investasi

Alasan Kenapa Harus Investasi Sejak Muda

21 Desember 2020
3 Tips Memilih Wifi yang Akan Dipasang di Rumah

3 Tips Memilih Wifi yang Akan Dipasang di Rumah

20 Desember 2020
Rekomendasi Perpaduan Warna Cat Rumah Minimalis

Rekomendasi Perpaduan Warna Cat Rumah Minimalis

28 November 2020
Cara Praktis Membuat Web Menggunakan Template Website

Cara Praktis Membuat Web Menggunakan Template Website

27 November 2020

Riswan Net AMP

Riswan Net menyajikan informasi update seputar Teknologi, Tips Trik Internet, Perbankan, Media Sosial sampai Panduan Bisnis Online.

playstore download logo 2

Kategori

  • Adsense
  • Aplikasi
  • Bisnis
  • Bitcoin
  • Blogger
  • Desain
  • Gadget
  • Internet
  • Komputer
  • Media Soaial
  • Review
  • SEO
  • Software
  • Teknologi
  • WhatsApp

Tags

Android Bisnis Bisnis Online daily Life Internet Kesehatan Komputer Perbankan Tips Trik Travel WhatsApp Youtube

© 2019 Riswan Net All Right Reserved

  • About
  • Kontak
  • Iklan
  • Privasi
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnis

© 2020 Riswan Net All Right Reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In