Blockquote untuk Mempercantik Tampilan Postingan

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.