Cara Buat Variasi Blockquote

Dalam menulis sebuah postingan blog, biasanya kita juga menunjukkan aksentuasi pada bab terpenting yang menjadi isi utama dari goresan pena yang kita buat. Tujuannya yaitu biar menciptakan pembaca lebih gampang dalam menangkap inti dari goresan pena yang sedang kita sajikan tersebut. Dalam menciptakan aksentuasi tersebut ada banyak cara yang biasanya digunakan oleh blogger, sebagian ada yang memakai border untuk tampilan khusus, sebagian juga ada yang memakai blockquote.

Sebelum beranjak lebih jauh, apa sih bergotong-royong blockquote itu? Blockquote merupakan sebuah kotak yang membingkai goresan pena tertentu yang membuktikan kalau goresan pena itu merupakan sebuah goresan pena penting yang perlu mendapat perhatian dari pembaca untuk mendapat inti dari bacaan secara keseluruhan. Berbicara mengenai blockquote, kita kadang merasa bosan dengan tampilan blockquote default yang hanya itu-itu saja. So, adakah cara untuk menciptakan variasi blockquote dalam blog kita ini? Yup, tentu saja ada. Dengan variasi blockquote yang lebih menarik tidak hanya akan memperjelas pembaca dalam menemukan dan memahami inti bacaan kita, tetapi juga akan menunjukkan daya tarik tersendiri bagi pengunjung yang tidak terbiasa banyak membaca untuk lalu mengamati dan membacanya. membuat postingan sebuah blog, jangan menuliskan blockquotenya di bab compose. Akan tetapi, tuliskan blockquote tersebut beserta arahan HTML untuk menampilkannya pada bab edit HTML (letaknya sempurna di sebelah kiri bab compose).

Adapun arahan HTML yang perlu kita masukan untuk menampilkan blockquotenya yaitu ;

<blockquote style=" Masukkan arahan HTML blockquote yang ingin kita tampilkan di sini "> Masukkan goresan pena yang akan kita jadikan blockquote di sini </blockquote>

Beberapa bentuk variasi blockquote beserta arahan HTMLnya yang sanggup kita pilih untuk lalu di tampilkan dalam postingan blog kita antara lain sebagai berikut ;

Bentuk 1.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 2.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 5.

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKF63ZpS0qOAFG-6KWXzsyIF5654tbFGeBGfsQFVlZG6rwwbvaGkF3F2GJCJTBdINYUV-T6ZNH_SC9vWOMTwXBqkQ4vmUxFZFUjF0-f6E9Km2kU9fG7SgQrgTEQMZcpTSNXxo1-GRwLYg/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; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 6.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 7.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 8.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 9.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 10.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 11.

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYir9jzXQ9UP-lCMWXCgXryPwLxd6LMYTMDp-2_FcAlFayUs_pibM3kYycqkPYj13ga3RtvC20U-lsFuluMInoKr9Pkr_Q9koZFXdm5oGP_PHZZWLZHShCkhSKdXUAQx9HRTHlmdD70s/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/AVvXsEjWHIPUYdmymes0qV3-dy3wTwNgzzpyQhVLKDQNSX-O8Leal3DTBL_oPThSImZwYRC9MJ9MBYO7DtJKJaq8PMa-iyXG8WCK9gFt0haTy8q86ww7OrcMaoKQXy34WU3ymaD1k_Yru4hduQQ/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 12.

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNYaFq1mH7NUWg811cZNFfeITWyNlG_e0bDBbl94pV_qbfbPPzmOYDXtzgFaezJBuxHTvVWxJSMAKAjSuxTX52H-k8VQRgdbLabTr3IqDlXjIGwS9cUzZ-cVw-P6zBhVXgJNJvW3Gjak/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/AVvXsEhk4T_jHupHPO5qc7cWUAAxE0eylQ2OTh_0uJf6FwElCBl-k0U0z7PRr5mGmCUKVrBs4-1JtoWJCxvjfML1YK8UbKZiPDSG7iQoxnMLoTduzzZl5GQIeJYbOR38O0a-yMmkvKz9SuzztHQ/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 13.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 14.

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOUBfOEbUDsIw_cG5FralCTPA4kWPVIkitwDnFD2S7BEUNcJjfzkadCjrCVzrl8I8bHGO_yMdXVgoMx7aA-1D9-bQ2lwZMSdKttcENlQCEqJ3Wm2EUgYK_oy41Xk9e6Cxey2iZvhMbzN4/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/AVvXsEjZciZWgXArk9C91hlMYFbv1ypDiqBj4s8usntJoz8UXXxq15TQl2no1gS-YTpReLXPvHWJ7i_4JLIJK4DeH_bkuMFJybg_BOayHUBsCUbEavg3C9rm4JXNPfEfG-WWwe5u4a5wz5L914w/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 15.

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMCqMWQ3cuXgmNDhKwBUUtgpzm5PAYp9-DbkmgvcIBVHIOzRi80xEEDyJHStkgWd9fGOYzlfDo0ftxqL7Cg5eaWkMffAKJfh7FQkDzXDu_8Jd1H2a_Qe91-hmgCQAmUtQyfG-HqZkZFHs/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/AVvXsEjkUpPbXaFzZ-eRrDme64ZEhJ9gdP2gaXihDSyoiTE1BYLkK-CryKJ7rmYs6YYZ4YpseAPN0_Bcv1yUNt7bw06TpAhYhtnqtz5ElImG3FR11YhkewD_NwtMJrysbBpPQySGSTnOcaMCUjY/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 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/AVvXsEik52u_RKySnZpR862QKP-3zKpwt37PVflmp7QBhyphenhyphenWrIfEimDx2JxJWa1RYMqYisL1imgN_Wvnps_Go7plCs1_KxxK-e6ekwV32mT42w9b6rgch4iQD5gVUUveIEyAlcuosY0_07XYi5YF-/s1600/quote.png") 5% no-repeat #FFF8DD; }

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 17.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 18.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 19.

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

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 20.

blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 21.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 22.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 23.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Bentuk 24.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;}

Contoh hasil tampilannya.

Blog merupakan sebuah situs langsung yang memuat tulisan-tulisan sebagai konten atau isi pokoknya, di mana goresan pena yang sebagai postingan tersebut berisi wacana suatu topik tertentu yang di publikasikan oleh pemiliknya guna mendapat reaksi dari pembaca dan diperbaharui secara berkala.

Nah, bagaimana kawan? Praktis bukan?
Dengan beberapa langkah singkat dan gampang kita akan mendapat tampilan blockquote yang lebih menarik dari biasanya. So, hal ini akan lebih menarik minat pengunjung untuk membaca secara lebih mendalam wacana postingan blog kita.

Ada komentar? Ada tanggapan? Ada masukan? Yuk kita bagi-bagikan unek-unek yang ada dalam pikiran kita kepada orang lain. Mari kita berlomba-lomba untuk membuatkan kebaikan!
Salam blogger!

Share this post