Sponsor adsense

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.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel