Cara Mempercantik Blockquote

Cara Mempercantik Blockquote

14 Comments

Beberapa kawan-blogger bertanya bagaimana memodifikasi blockquote menjadi sebuah tampilan yang cantik dan menarik. Cukup beralasan kenapa blockquote harus dimodifikasi menjadi lebih bagus, karena ini merupakan keterkaitan antara keindahan layout sebuah posting atau artikel anda. Selebihnya blockquote memudahkan pengunjung mengetahui bagian terpenting dalam suatu artikel, ketika anda menegaskannya dengan blockquote. Di bawah akan saya berikan beberapa kode CSS untuk mengganti blockquote anda, sehingga menjadi lebih cantik dan atraktif. Silahkan ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan

Klik Edit HTML

Cari kode .post blockquote atau blockquote, atau sejenisnya di template anda. Tekan F3 atau ctrl +F untuk memudahkan pencarian lalu masukkan kode yang di cari. Ganti kodenya dengan kode di bawah ini. Silahkan pilih mana yang anda senangi. Jangan Lupa Simpan Template

Tampilan 1

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 2

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 3

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 4

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; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 5

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 6

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 7

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 8

.post blockquote { background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 9

blockquote { background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 10

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 11

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 12

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4ut_xfBI/AAAAAAAACO0/rQVkmrMYnd8/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 13

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(http://2.bp.blogspot.com/_7wsQzULWIwo/SwhrZPcjY4I/AAAAAAAACRk/qOMm-cht3rw/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 14

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c7RglzI/AAAAAAAACOU/bwGBdTO2lq4/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c0v4knI/AAAAAAAACOM/S-iKAwSXT-I/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 15

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 16


blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TR3MwDiXB1I/AAAAAAAAAQo/Fi8TGwkSRNQ/s1600/quote.png") 5% no-repeat #FFF8DD; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan17

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%; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 18

blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 19

blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95); padding: 10px;}

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 20

<blockquote style="-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11); padding: 10px;">
sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba</blockquote>

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 21

<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;">
sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba</blockquote>

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 22

<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;">
sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba</blockquote>

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 23

<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;">
sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba</blockquote>

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba

Tampilan 25

<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;">
sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba</blockquote>

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba


Kalau anda memasangnya secara manualdalam artikel anda langkahnya sebagai berikut.
Klik Posting


Pada saat anda berada di posting area Klik Edit HTML


Masukkan kode berikuti ke dalamnya

<blockquote style="Silahkan masukkan kode blockquote di sini">Masukkan tulisan atau kode anda di sini</blockquote>

<blockquote style=" margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1;">sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba</blockquote>

Hasilnya akan menjadi seperti di bawah ini

sebuah percobaan adalah sebuah perlakuan untuk mencoba karena anda berpikir memang harus dicoba, namun jangan coba-coba, karena percobaan yang anda coba adalah sebuah alasan untuk mencobanya. selamat mencoba
Jangan lupa Terbitkan Entri
Selamat Mencoba dan sukses selalu

Source from bd lab and blogonol

"keep spirits and do the best"
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.