Percantik Posting Blog Dengan Background Efek Gradient

Agar pengunjung merasa betah hinggap di blog kita, banyak cara yang kita lakukan dan diantaranya dengan membuat tampilan posting artikel yang berbeda dari yang biasanya. Kita Percantik Posting Blog Dengan memberi Background Efek Gradient. Untuk WordPress yang sudah self hosting, mungkin langkah ini sudah terbiasa dilakukannya. Bahkan hasilnya akan terlihat lebih indah serta menawan dengan cara oprek CSS dan memberikan script CSS3. Sedangkan blog WordPress[dot]com, sebelum upgrade CSS atau hanya menikmati fasilitas gratisan saja, kita tidak bisa dengan leluasa untuk oprek CSS tersebut. Tapi sebentar, jangan bersedih hati dulu karena kita bisa mengakalinya dengan memberikan script yang tidak dilarang diterapkan pada blog WordPress[dot]com, dan hasilnya menurut saya tidak kalah menarik dengan background gradient hasil CSS3.

Untuk membuat background efek gradient agar berfungsi pada blog WordPress[dot]com, pada dasarnya kita hanya menerapkan script seperti ini :

background-image: -webkit-linear-gradient([kode warna] [ukuran pixel], [kode warna] [ukuran pixel])

|

Selanjutnya untuk kreatifitas perpaduan warna gradient, saya serahkan pada anda untuk lebih mengembangkannya lagi. Disini saya memberikan beberapa contoh background efek gradient yang sudah diberikan warna. Dan jika anda mencari kode warna lain, klik disini …. ! Setiap Script yang berwarna merah silahkan anda rubah sesuai dengan kebutuhan.

---

Contoh 1 :

Tulisan Anda

|

<div style="overflow: auto; background-image: -webkit-linear-gradient(#a4c0d7 30px, #a4d7d5 60px); padding: 20px; font-size: 25px;">Tulisan Anda</div>

|
Contoh 2 :

Tulisan Anda

|

<div style="overflow: auto; background-image: -webkit-repeating-linear-gradient(#a4c0d7 30px, #a4d7d5 60px); padding: 20px; font-size: 25px;">Tulisan Anda</div>

|
Contoh 3 :

Tulisan Anda

|

<div style="overflow: auto; background-image: -webkit-repeating-linear-gradient(120deg,#a4c0d7 30px, #a4d7d5 60px); padding: 20px; font-size: 25px;">Tulisan Anda</div>

|
Contoh 4 :

Tulisan Anda

|

<div style="overflow: auto; background-image: -webkit-repeating-linear-gradient(120deg,#a4d7d5,#a4c0d7 30px, #a4d7d5 60px); padding: 20px; font-size: 25px;">Tulisan Anda</div>

|
Contoh 5 :

Tulisan Anda

|

<div style="overflow: auto; background-image: -webkit-repeating-linear-gradient(120deg,#a4d7d5,#a4c0d7 30px, #a4d7d5 60px); border: 5px solid #e68d3a; padding: 20px; font-size: 25px;">Tulisan Anda</div>

|
Contoh 6 :

Tulisan Anda

|

<div style="overflow: auto; background-image: -webkit-repeating-linear-gradient(120deg,#a4d7d5,#a4c0d7 30px, #a4d7d5 60px); border: 5px solid #e68d3a; border-top-left-radius: 25px; border-bottom-right-radius: 25px; padding: 20px; font-size: 25px;">Tulisan Anda</div>

|
Contoh 7 :

Tulisan Anda

|

<div style="overflow: auto; background-image: -webkit-repeating-linear-gradient(120deg,#a4d7d5,#a4c0d7 30px, #a4d7d5 60px); border: 5px ridge #e68d3a; border-top-left-radius: 25px; border-bottom-right-radius: 25px; padding: 20px; font-size: 25px;">Tulisan Anda</div>

|
Contoh 8 :

Tulisan Anda

|

<div style="overflow: auto; background-image: -webkit-repeating-linear-gradient(120deg,#a4d7d5,#a4c0d7 30px, #a4d7d5 60px); border: 5px ridge #e68d3a; border-top-left-radius: 25px; border-bottom-right-radius: 25px; padding: 20px;"><span style="font-family: Times New Roman; color: red; font-size: 25px; font-weight: bold; text-shadow: 1px 1px 2px #000;">Tulisan Anda</span></div>

|

Selamat Mencoba

|

Mungkin hanya itu yang dapat saya sampaikan tentang cara membuat tulisan yang diberi background efek Gradient. Silahkan anda kembangkan lagi beberapa script di atas, dan semoga berhasil … Salam sukses ….