Home / WordPress / Percantik Tulisan Posting Di WordPress Dengan Efek Gradient

Percantik Tulisan Posting Di WordPress Dengan Efek Gradient

Percantik Tulisan Posting Di WordPress Dengan Efek Gradient – Iseng-iseng oprek kode dan menghasilkan kode Efek Gradient. Selanjutnya kode efek gradient ini bisa kita terapkan di posting blog khususnya di WordPress untuk mempercantik tulisan karena ditambah background efek gradient.

percantik-tulisan-posting-di-wordpress-dengan-efek-gradient

Menampilkan posting artikel di WordPress yang berbeda dari biasanya maka sekiranya akan menghilangkan rasa jenuh Anda akan tampilan halaman posting default themes yang Anda gunakan. Dan mungkin akan menambah daya tarik pengunjung untuk berlama-lama mengacak-ngacak isi blog Anda.

Baca Juga : Cara Membuat Tombol Back To Top Di WordPress

Untuk mempercantik tulisan posting di WordPress dengan efek gradient ini bukan hanya WordPress.org saja yang bisa melakukannya, WordPress.com juga bisa dengan mudah menerapkannya. Namun untuk WordPress.org, agar hasil efek gradientnya lebih menarik lagi, bisa menerapkannya dengan kode CSS3.

Untuk membuat background efek gradient agar berfungsi di WordPress.com, pada dasarnya kita hanya menerapkan kode HTML berikut :

background: -webkit-linear-gradient([kode warna] [ketajaman warna], [kode warna] [ketajaman warna])

Selanjutnya untuk kreatifitas perpaduan warna gradient, saya serahkan pada Anda untuk lebih mengembangkannya lagi. Disini saya hanya memberikan beberapa contoh background yang sudah diberikan warna efek gradient saja. Referensi warna bisa Anda lihat di halaman Kode Warna blog ini. Setiap kode HTML yang berwarna merah silahkan Anda rubah sesuai dengan kebutuhan.

Kode HTML background efek gradient ini Anda terapkan di mode Text Halaman/Posting WordPress Anda.

Contoh 1 :

INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

<p style="overflow: auto; background: linear-gradient(45deg, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); padding: 20px; font-size: 15px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</p>

Contoh 2 :

INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

<p style="overflow: auto; background: linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); padding: 20px; font-size: 15px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</p>

Contoh 3 :

INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

<p style="overflow: auto; background: linear-gradient(45deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); padding: 20px; font-size: 15px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</p>

Contoh 4 :

INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

<p style="overflow: auto; background: radial-gradient(ellipse at center, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); padding: 20px; font-size: 15px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</p>

Contoh 5 :

INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

<p style="overflow: auto; background: linear-gradient(to right, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); border: 5px solid #e68d3a; padding: 20px; font-size: 15px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</p>

Contoh 6 :

INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

<p style="overflow: auto; background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); border: 5px solid #e68d3a; border-top-left-radius: 25px; border-bottom-right-radius: 25px; padding: 20px; font-size: 15px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</p>

Contoh 7 :

INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

<p style="overflow: auto; background: linear-gradient(135deg, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); border: 5px ridge #e68d3a; border-top-left-radius: 25px; border-bottom-right-radius: 25px; padding: 20px; font-size: 15px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</p>

Contoh 8 :

INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

<p style="overflow: auto; background: linear-gradient(45deg, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); border: 5px ridge #e68d3a; border-top-left-radius: 25px; border-bottom-right-radius: 25px; border: 5px ridge #e68d3a; border-top-left-radius: 25px; border-bottom-right-radius: 25px; padding: 20px;"><span style="font-family: 'Bree Serif'; color: red; font-size: 25px; font-weight: bold; text-shadow: 1px 1px 2px #000;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</span></p>

Untuk WordPress.org selain bisa menggunakan kode HTML diatas, maka bisa juga dengan menggunakan kode CSS3 agar tampilannya lebih menarik lagi. Contoh saya membuat efek gradient CSS3 seperti berikut :

Info Menarik

Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.

Latihan Efek Gradient CSS3

Penasaran ingin menerapkan juga di WordPress Anda? Caranya copy kode berikut dan paste di mode Text Halaman atau Posting WordPress.

<div class="gradient">
 <h2>Info Menarik</h2>
 <h3>Blog yang memiliki tema Berbagi Info & Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea - MotoGP - Pendidikan - Photoshop - Software - WordPress Terlengkap dan Gratis.</h3>
 <h4>Latihan Efek Gradient CSS3</h4>
 </div>

Selanjutnya untuk style CSS3-nya copy kode berikut dan paste di syle.css WordPress. Untuk kreatifitas saya serahkan sama Anda, dan sebagai referensi bisa memanfa’atkan web online dalam mencari CSS Gradient lainnya. Saya rekomendasikan www.colorzilla.com/gradient-editor yang bisa manfa’atkan sebagai latihan dalam mencari efek gradient lainnya.

.gradient {
 background: rgb(69,72,77);
 -moz-linear-gradient(left, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
 -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1)));
 -webkit-linear-gradient(left, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
 -o-linear-gradient(left, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
 -ms-linear-gradient(left, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
 background: linear-gradient(to right, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
 box-shadow: 3px 0px 5px #000;
 }
 .gradient h2 {
 background: rgb(44,83,158);
 -moz-linear-gradient(left, rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%);
 -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1)));
 -webkit-linear-gradient(left, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
 -o-linear-gradient(left, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
 -ms-linear-gradient(left, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
 background: linear-gradient(to right, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
 <span class="webkit-css-property" title="font-family: 'FjallaOne-Regular';">font-family</span>: <span class="value">'FjallaOne-Regular'</span>;
 color: white;
 font-size: 30px;
 text-shadow: 3px 3px 5px #000;
 text-transform:uppercase;
 padding: 5px 5px 5px 15px;
 }
 .gradient h3 {
 background: rgb(169,3,41);
 -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
 -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
 -webkit-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
 -o-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
 -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
 background: linear-gradient(to right, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
 font-family: Cambria, serif;
 color: white;
 font-size: 25px;
 text-shadow: 3px 3px 5px #000;
 margin:20px;
 padding: 5px 5px 5px 15px;
 }
 .gradient h4 {
 background: rgb(164,179,87);
 -moz-linear-gradient(left, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
 -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1)));
 -webkit-linear-gradient(left, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
 -o-linear-gradient(left, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
 -ms-linear-gradient(left, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
 background: linear-gradient(to right, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
 <span class="webkit-css-property" title="font-family: 'FjallaOne-Regular';">font-family</span>: <span class="value">'FjallaOne-Regular'</span>;
 color: white;
 font-size: 25px;
 text-shadow: 3px 3px 5px #000;
 text-align:right;
 padding: 15px;
 }

Tapi untuk yang suka tampilan blognya natural, mungkin tulisan ini tidak ada manfa’atnya. Jadi disesuaikan saja dengan kebutuhan masing-masing.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

2 comments

  1. Assalaamu’alaikum wr.wb… Syabas ya, saya selalu tertarik dengan usaha yang mas kongsikan di blog ini. infonya memang selalu menarik dan sangat bermanfaat untuk sesiapa sahaja belajar sesuatu yang baru. Semoga beroleh ganjaran dari Allah SWT hasil dari perkongsian berbobot ini. Salam sejahtera dari Sarikei, Sarawak. :)

    • Wa’alaikumsalam Wr. Wb. Terimakasih mba kalau memang tulisan ini dapat bermanfa’at, dan mohon ma’af saya masih banyak belajar dengan koding jadi hasilnya kurang maksimal …

Leave a Reply

Your email address will not be published. Required fields are marked *