Home / WordPress / Cara Merubah Tampilan Blockquote Lebih Menarik

Cara Merubah Tampilan Blockquote Lebih Menarik

Cara Merubah Tampilan Blockquote Lebih Menarik – Blockquote adalah tulisan kalimat “kutipan” yang biasanya perataan paragrafnya agak menjorok ke dalam/kanan.

Baca Juga : Percantik Tulisan Posting Di WordPress Dengan Efek Gradient

Terkadang dalam tulisan blog kita membutuhkan kalimat yang diberi tag Blockquote, terutama kalimat kutipan. Setiap themes yang terpasang di blog WordPress secara otomatis sudah mendukung tulisan Blockquote. Tapi kebanyakan tag efek Blockquote kelihatannya kurang menarik. Maka Anda harus merubah tampilan Blockquote agar lebih menarik lagi. Jika memang demikian, Anda harus melakukan sedikit sentuhan dengan menerapkan kode HTML atau CSS ke dalam tag Blockquote.

Cara-Merubah-Tampilan-Blockquote-Lebih-Menarik

Mungkin Anda bosan dengan tampilan Blockquote yang biasa digunakan. Untuk itu tampilan Blockquote kita eksplorasi lagi dengan bantuan CSS, misal diberi background warna atau gambar, dirubah bentuk fontnya, ditambah border, dan lain-lain. Maka hasilnya lumayan menarik.

Standarnya kode HTML Blockquote adalah seperti ini :

<blockquote>Tulisan Anda</blockquote>

Disini saya menyediakan beberapa contoh kode blockquote yang bisa merubah tampilan default blockquote. Di copy saja kode Blockquote-nya dan tempatkan pada mode Text WordPress. Kecuali untuk WordPress.org, agar efek Blockquote menjadi permanen maka copy paste sylenya kedalam style.css WordPress.

Contoh Tampilan Blockquote Yang Sudah Dimodifikasi

Silakan kembangkan lagi efek Blockquote-nya sesuai dengan selera agar terlihat lebih menarik lagi.

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.

<blockquote style="border-left: 5px solid #fce27c; background-color: #f6ebc1; padding: .5em 1em; }blockquote p {margin: 0;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

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.

<blockquote style="border-left: 3px dashed #999; padding-left: 1em; }blockquote p: first-letter {float:left; margin: .2em .3em .1em 0;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

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.

<blockquote style="color: #fff; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; margin: 1em 40px; padding: 15px;"><span style="color: #000000;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</span></blockquote>

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.

<blockquote style="border-top: 4px double #DC143C; border-bottom: 3px double #DC143C; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; padding: 5px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

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.

<blockquote style="color: #fff; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px;"><em><span style="color: #333399;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</span></em></blockquote>

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.

<blockquote style="-moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid #b9e35f; padding: 10px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

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.

<blockquote style="-moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid #38610b; padding: 10px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

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.

<blockquote style="background-color: #f5d0a9; border: 5px ridge #e68d3a; padding: 10px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

Contoh 9

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.

<blockquote style="background-color: #d8d8d8; border: 5px ridge #e0d582; padding: 10px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

Contoh 10

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.

<blockquote style="background-color: #d8d8d8; border: 5px double #ced424; padding: 10px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

Contoh 11

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.

<blockquote style="background-color: #e0ecf8; border: 5px groove #f8fabb; padding: 10px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

Contoh 12

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.

<blockquote style="border: 3px dashed #FFC600; background: url 5% no-repeat #FFF8DD; margin: 20px 10px; padding: 10px 10px 10px 50px;">INFOMENARIK adalah Blog yang memiliki tema Berbagi Info &amp; Tips Trik Menarik senantiasa akan selalu menyajikan Info Seputar EPS-Topik Korea – MotoGP – Pendidikan – Photoshop – Software – WordPress Terlengkap dan Gratis.</blockquote>

Selanjutnya jika ingin merubah background Blockquote dengan Efek Gradient, bisa dilihat caranya di tulisan Percantik Tulisan Posting Di WordPress Dengan Efek Gradient.

About InfoMenarik

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

4 comments

  1. Mayan bisa dipake tipsnya. Thx mas. :)

  2. terima kasih gan ini yang saya pake di blog saya, untuk menarik pengunjung, thx mas
    tampilannya sangat menarik-menarik

  3. terimaksih banyak gan ini yang saya cari, kalo bisa tambah lagi gan gaya blockquote yang lain agar lebih bervariasi

Leave a Reply

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