Percantik Posting Blog Dengan Background Efek Gradient

27 Maret 2012 70 Komentar

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

Disimpan dalam Tips & Trik Dikaitkatakan dengan , , , , ,

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 ==>

70 Tanggapan untuk Percantik Posting Blog Dengan Background Efek Gradient

← Komentar terdahulu

  1. Ping-balik: Bacaan Menarik « SUPRIYANTO Blog

  2. Jefry mengatakan:
    6 November 2012 pada 16:47

    Boleh juga ni background efeknya di terapkan ke dalam blog2 wordpress saya
    terima kasih infonya, sangat membantu dan bermanfaat

    Balas

  3. Ping-balik: Cara Membuat Tabel Pada Blog Berbasis WordPress | alwas192

  4. Ping-balik: TUTORIAL | MULTIMEDIA DESIGN

  5. Ping-balik: CARA PASANG SOCIAL NETWORK PADA BLOG « electio

← Komentar terdahulu

Beri Komentar Seikhlasnya Saja ==>

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out / Ubah )

Twitter picture

You are commenting using your Twitter account. ( Log Out / Ubah )

Facebook photo

You are commenting using your Facebook account. ( Log Out / Ubah )

Batal

Connecting to %s

%d bloggers like this: