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 ….


Baca Artikel Lain :

About these ads

Perihal onesetia82
Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma'af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati . . . Selengkapnya ==>

72 Responses to Percantik Posting Blog Dengan Background Efek Gradient

  1. Ping-balik: Teknik Dasar Cara Mewarnai Rambut Dengan Photoshop | multimedia tutorials

  2. Annisa Rahmi mengatakan:

    mantap pakk iwan….ane akan coba, terima kasih ilmunya semoga bermamfaat…

Beri Komentar Seikhlasnya Saja ==>

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d bloggers like this: