Cara Memberi Warna Baground-Gradient Pada Postingan di Blog

Assalamu'alaikum warahmatullaahi wabarakaatu...

Hollo sobat semuanya...ane dapat sedikit ilmu di artikel salah seorang senior blogger, tentang mempercantik tampilan halaman postingan di blog dan dengan cara memberi warna baground, kali ini ane share terutama pada sobat-sobat pemula  agar tampilan postingan tidak membosankan sekali-sekali kita coba robah yaitu Cara Memberi Warna Baground-Gradient Pada Postingan di Blog, tampilan warnanya seperti sedang sobat liat di postingan ini, caranya menurut ane sebagai berikut :

---- buka halaman Entri Baru, copy kode script dibawah ini dan pastekan di hlaman yang baru di buka,
---- posisi halaman waktu paste harus di HTML bukan Compose,

---- kode yang di copy :

<div style="background-image: -webkit-repeating-linear-gradient(180deg,#D3D3D3,#708090 50%,#708090 50%,#D3D3D3); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid #3300cc; font-size: 14px; overflow: auto; padding: 1px;"> Sobat lanjut menulis postingan sesuka sobat disini, seperti biasa pada akhir postingan ditutup dengan kode </div>

lalu simpan, liat tampilannya.

 Hasilnya persis seperti warna halaman postingan ane ini.

Contoh 1 :

Sobat lanjut menulis postingan sesuka sobat disini, seperti biasa pada akhir postingan ditutup dengan kode

Kode script seperti ini :

<div style="background-image: -webkit-repeating-linear-gradient(150deg,#ADFF2F,#8FBC8F 30%,#8FBC8F 30%,#ADFF2F); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 5px solid #000000; font-size: 14px; overflow: auto; padding: 1px;"> Sobat lanjut menulis postingan sesuka sobat disini, seperti biasa pada akhir postingan ditutup dengan kode </div> 

Contoh 2 :

Sobat lanjut menulis postingan sesuka sobat, disini.............................................................................................................................................................................. seperti biasa pada akhir postingan ditutup dengan kode

Kode scriptnya :

<div style="background-image: -webkit-repeating-linear-gradient(50deg,#3CB371,#48D1CC 20%,#48D1CC 30%,#3CB371); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 2px solid #ff0000; font-size: 14px; overflow: auto; padding: 1px;">
Sobat lanjut menulis postingan sesuka sobat, disini.............................................................................................................................................................................. seperti biasa pada akhir postingan ditutup dengan kode </div>



Contoh 3 :

Sobat lanjut menulis postingan sesuka sobat, disini.............................................................................................................................................................................. seperti biasa pada akhir postingan ditutup dengan kode

Kode scriptnya :

<div style="background-image: -webkit-repeating-linear-gradient(175deg,#B22222,#CD853F 50px,#B22222,#CD853F 50px); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 2px solid #ff0000; font-size: 14px; overflow: auto; padding: 1px;">
Sobat lanjut menulis postingan sesuka sobat, disini.............................................................................................................................................................................. seperti biasa pada akhir postingan ditutup dengan kode </div>

Nah sobat-sobat bisa pilih warna sesukanya, taukan buka kode warna di mbah Google copy dan paste/tempelkan tepat  di kode yang ane kasih warna merah dan untuk merobah kadar ato ukuran ketebalan dan arah coba saja ganti yang ane kasi warna kuning.

Itu saja Cara Memberi Warna Baground-Gradient Pada Postingan di Blog,  Selamat mencoba....!


Sumber :
onesetia82.blogspot.com