×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara membuat color box dengan efek gradient di blog

Faronesia.com - Hallo blogger, pastinya semua orang khususnya blogger banyak yang mencari cara agar tampilan blog terlihat rapi dan menarik serta unik. Nah pada kesempatan ini admin akan membahas tutorial yang tidak jauh dari kata mempercantik blog. Seperti yang telah disebutkan pada judul, kali ini kita akan membahas cara membuat color box dengan effect gradient di blog.

Keuntungan dari tutorial ini ialah tidak lain untuk mempercantik tampilan sebuah blog agar pembaca tidak merasa bosan melihat text tulisan pada blog anda.

Sebelum melakukan tutorial dibawah ini ada baiknya anda membackup template yang akan anda edit, hal ini sangat penting sekali karena nantinya kita akan menempelkan kode css pada tubuh template, jika saat pengeditan terjadi kesalahan seperti salah dalam penerapan kode yang menyebabkan error. Ok, mari simak dan praktekkan tutorial dibawah ini.

Cara membuat color box dengan effect gradient di blog


  • Masuk dashboard blog anda
  • Lalu masuk ke menu tema
  • Cari kode ]]></b:skin>
  • Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>
 /* Material Color Box */
.warna{
   overflow:hidden;
   position:relative;
   margin:.5rem 0 1rem;
   transition:box-shadow .25s;
   border-radius:2px;
   color:#fff;
   box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   padding:20px;
   font-size:14px
}
.warna.gradient1{
   background: linear-gradient(-45deg, #eded50, #ed5084, #131735, #ce063e);​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%}
}
.warna.gradient2{
   background: linear-gradient(-45deg, #d5d6e5, #131a99, #39ced6, #211f1d);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%}
}
.warna.gradient3{
   background: linear-gradient(-45deg, #eded0b, #ed530b, #382670, #3f3639);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%}
}
.warna.gradient4{
   background: linear-gradient(-45deg, #EE7752, #E73C7E, #e2dcde, #a80f42);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%}
}
.warna.gradient5{
    background: linear-gradient(-45deg, #EE7752, #3ebcad, #1a0f3d, #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%}
  • Lalu klik simpan tema
  • Kemudian buatlah postingan baru, saat di menu edit postingan pilih HTML (bukan compose), kemudian tempelkan kode dibawah ini:
Kode warna gradient 1:
<div class="warna gradient1"> teks anda disini </div>
Hasilnya:
teks anda disini

Kode warna gradient 2:
<div class="warna gradient2"> teks anda disini </div>
Hasilnya:
teks anda disini

Kode warna gradient 3:
<div class="warna gradient3"> teks anda disini </div>
Hasilnya:
teks anda disini

Kode warna gradient 4:
<div class="warna gradient4"> teks anda disini </div>
Hasilnya:
teks anda disini

Kode warna gradient 5:
<div class="warna gradient5"> teks anda disini </div>
Hasilnya:
teks anda disini
  • Setelah itu, simpan/publikasikan postingan.
Demikianlah mengenai Cara membuat color box dengan effect gradient di blog semoga bermanfaat untuk para pembaca dimanapun anda berada. jangan lupa share dan jika ingin tanggapan serta masukan silahkan di kolom komentar yang telah tersedia dibawah postingan ini.

Posting Komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup