Membuat Blockquote pada Postingan WordPress

Blockquote biasanya digunakan untuk menandai atau menampilkan kutipan dalam salah satu bagian posting yang dipilih atau diblok. Dengan  fungsi blockquote, temen-temen yang membaca artikel/postingan kita akan merasa nyaman, selain itu tampilan blockquote yang menarik akan membuat blog kita tampil cantik. Bahkan kebanyakan blogger memanfaatkan blockquote ini sebagai tempat untuk menampilkan kode-kode script.

Sebenarnya di blogspot sudah menyediakan tampilan blockquote standar, tetapi jika teman-teman ingin membuat tampilan blockquote yang berbeda, berikut ini saya akan bagikan beberapa contoh blockquote. Tinggal copas saja kodenya, lalu pastekan pada mode html postingan teman-teman. Teks yang berwarna merah, silahkan teman-teman ganti sesuai dengan kebutuhan masing-masing.

Contoh 1:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada
satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau
paragraf dianggap penting atau bisa juga merupakan penekanan dari
sesuatu yang dianggap penting, atau digunakan untuk memblok kode html
atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid #38610b; padding: 10px;”>Teks Anda di sini</blockquote>

Contoh 2:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan dari sesuatu yang dianggap penting, atau digunakan untuk memblok kode html atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0;”>Teks Anda di sini</p>
</blockquote>

Contoh 3:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada
satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau
paragraf dianggap penting atau bisa juga merupakan penekanan dari
sesuatu yang dianggap penting, atau digunakan untuk memblok kode html
atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p: first-letter { float: left; margin: .2em .3em .1em 0;”>Teks Anda di sini</blockquote>

Contoh 4:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada
satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau
paragraf dianggap penting atau bisa juga merupakan penekanan dari
sesuatu yang dianggap penting, atau digunakan untuk memblok kode html
atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote { background-color: #666; color: #fff; padding: 15px; margin: 1em 40px; -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;”><span style=”color: #000000;”>Teks Anda di sini</blockquote>

Contoh 5:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada
satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau
paragraf dianggap penting atau bisa juga merupakan penekanan dari
sesuatu yang dianggap penting, atau digunakan untuk memblok kode html
atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;””><em”><span style=”color: #333399;”>Teks Anda di sini</blockquote”>

Contoh 6:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan dari sesuatu yang dianggap penting, atau digunakan untuk memblok kode html atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 3px solid #b9e35f; padding: 10px;”>Teks Anda di sini</blockquote>

Contoh 7:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan dari sesuatu yang dianggap penting, atau digunakan untuk memblok kode html atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;}”>Teks Anda di sini</blockquote>

Contoh 8:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan dari sesuatu yang dianggap penting, atau digunakan untuk memblok kode html atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;}”>Teks Anda disini</blockquote>

Contoh 9:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan dari sesuatu yang dianggap penting, atau digunakan untuk memblok kode html atau script.

Script kodenya adalah sbb:

<blockquote style=”blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;}”>Teks Anda di sini</blockquote>

Contoh 10:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan dari sesuatu yang dianggap penting, atau digunakan untuk memblok kode html atau script.

Kode scriptnya adalah:

<blockquote style=”blockquote { background-position: -10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url 5% no-repeat #FFF8DD;”>Teks Anda di sini</blockquote>

Contoh 11:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan dari sesuatu yang dianggap penting, atau digunakan untuk memblok kode html atau script.

Script kodenya adalah:

<blockquote style=”blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;}”>Teks Anda di sini</blockquote>

Contoh 12:

BlockQuote biasanya berisi kutipan dari suatu sumber yang di blok pada satu area. Blockquote biasanya digunakan pula jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan dari sesuatu yang dianggap penting, atau digunakan untuk memblok kode html atau script.

Kode scriptnya adalah:

<blockquote style=”blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%;”>Teks Anda di sini</blockquote>

Selamat mencoba, semoga bermanfaat.

One Response

  1. Trik yang bagus . comment back yah ^^

Jika berkenan dengan postingan ini, silahkan tuliskan komentar anda. Terimakasih sudah mampir.

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: