Cara Mempercantik Blockquote

Posted by Tips Trick Blogger Tuesday, April 26, 2011 0 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; }

Tampilan 2

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

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

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

Tampilan 5

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmHIIyJeLowyjEnZ7YnnOaBp6sC_F4Ae_4eBpeh-rlwIh-Jp2Q69J1UdtM7EtasAyvMmAhzobxYgwHz_FIJJzYV-JqevRu-qQhUxTNZEoP65gwNo24ycs6fZAZiwZ7vbYbYa-b3jqDF8/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; }

Tampilan 6

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDP2zMbTexgorga4L5DJo4coQSP2U5APJuomxK7u1SMSzLBRwSAzUT0eJMu2r38YR9448mX4FKUk1cxmMf1kqxeHdcuHAl0HGN0ugOSRy5iuG1N-gWPHPPDF04HEjXrJ6y2sI4S9rDx0/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; }

Tampilan 7

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzbg_FTR-z1sNJo7YzQmSH7unSdgtdnDFRXfxkcEj-g2PJnNYB1ZfFOPas1MYTHtofosl1Yw_UEr67PbZuqbq8YvInHsw8mCh7aKJ6iSVcdHmBUdAa-FT-9ndfP8n_VMJnMsUdMABFBsk/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; }

Tampilan 8

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcgqmlsHyCThNzu786A1_4w6lGZ2EW8Znhm2iHFburWH0DpH-fc2ANvgB8AqFUdHrLwO0P1vbp2QTSQB8KNfi_pAWOyYUOExqp2q0Df3F1HaPTrbtXHgVKO_QnRP2btfQZmqFM_K4ff8/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; }

Tampilan 9

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMQtuJfZzMVzn9xz9-cPKeUYPsMTIaSWRUJU1Xgzikilfcxe-llk8JynfVG7MKdrAWvUx3NZOIqvGCow6dN7nUnOgFflS-DYI8eLEJQhMVZSkJcgDKoxNC4xiE6RMz7tVWEbyuHuTE48/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; }

Tampilan 10

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpV8bsaa1pGtSnz1CqQcB9YmA3KHq4OWjTGaYU6wKTwKfsbNCrzMdSdF0bd7SRDgSlA_yIBTS5KvWKy2kEZYmgteMtzDS3S6RI_ghKsLgyNhYoW4Xa_mkPJPQ74ZZPXzqPqoyY8dmkZI/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; }

Tampilan 11

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizlsO3sOP60FAgArxIUY0Wb1yBBVCKDf4LpPH3cvioycXXpBEn0FdvU2XX7wJ8ADSj06QJVR1aGw6ZfMPiriLe_vsQ0i6qD4vxvk58QSfjLOkeRILdF0Xx1OkQEV9qUvbVW0HkMzAcJJ0/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3mQDANCllD9OUU20hbvOIH1EwYJKBkWA4tw1mGIOwZ2gXE0OCVnEJ_tJD7s8b7wRd0aZyfZiIIbGk6ad94RiP2KU7rR8ZKwNfZafyjLi7yLYipb0afttClVFbKH8xj9nZV4UHl3rhfg/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Tampilan 12

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUmn4_Eq4ajMFOznWbfsMF0DPETQI4DMKwPRfEdbOxiUtSzZKBv6Je7lvimUjHqSFKOMewCs1t0A0bqS05pRLYBqw1HlvBYR4qsjmC83EtwYjSZkYhnejNm4Rc0kUnhsvj-Thb2KQHUyw/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZq40F7HIm4rLwIZClBJ6xZJoue0hsaGH2J3dJIISM77opzPwATXBybyHfOKTRQlXsFFKFpvIFNkOhLJPFp4K3VENfFRqqwLi44r8XPrIsXeCOYPN3sgHW_H3Fu5KeXYSdlGOk_nk9BY/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Tampilan 13

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5VSGzQE4dynuQjR2rMoFxBCw1mGMuSvhhMZ95eHyXJLiYW2ltzfYoRvXlLHn_yI_iPsHRp33bVRhGJNmPk_6edEpFGTSV669uWooq90P3OoPemqrv-zLf-biUTutj3YfdNIE-iedA4bo/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; }

Tampilan 14

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj93tDhuLnZuKyGyqtA7W6E6ZjS6RrO3pK_g3UpJ1JkuWehvMK2k-ignVmSmevCxhS9iVim_yDn2fHYBky8wQjqTra2z35f1PqhrWc5g_fKdzidPGo3U7Ohpyzv8L7k32CgSohg52KudaY/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg71wTvG1yv2gGKN2xjOw_vmJVIL1DaltM1AJLapYx-d5sGyAj9iLBZaiAyy5lwH9SmBcKqVKKsyx0LdbvhD5zY302URv-3f-DnZK6I-MmnPutwDMQBaK75LDP_vzM9_u4-Q0hQ7h-PT4Q/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

Tampilan 15

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnVtHtIdoV5faU9oLZNa5Nr4vZc-HEy8EgvUDHuCzxeCEm-3qZKhnkYeSnmN-Z-MhNgUVqcRnKRQbjNYwgjaRNTfyj7zcBLzJjC9t66QT83cWxkREB8w5CmJQa4t7u9fbn1_OrkeCaR0/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaVt1ZOEwE0UyQtB3wvPUMgwxl9wLbdxP2gkwV3Eh-4GWvV7T_X3xN-6cHpOi9I19PCQjMptn-QBPbCxRZAVwyQ-Ew9agMJgFTIl8W-7tP0-8DNtRaqOBBEtcIAoE2QoVXA7I_vzFMVQA/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }

Tampilan 16

blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM7Mt-mPAKMxLu5L97a-bFVsC-lXmRuuNZgcp8ijYrY_n3udfB73QvXiS5vEYrGW2M2MILNWaYTxddBbjs226S4F3gSLJb7EPaWRuo2Kyknlc_Z9Ac40LMeIimq72azHy5hTUWao8tMIyW/s1600/quote.png") 5% no-repeat #FFF8DD; }

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

Tampilan 18

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

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

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>

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>

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>

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>

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>

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

Jangan lupa Terbitkan Entri
Selamat Mencoba dan sukses selalu

Source from bd lab and blogonol

"keep spirits and do the best"

Adsense Content. bottom of article