7 blockquote keren untuk blog

  Dalam dunia blogging tak lepas dengan yang namanya script kode, dari script HTML templat ,animasi ,dan lain lain, bahkan yang namanya blockquote juga ada scriptnya,nah ! kali ini saya akan menulis tentang cara membuat blockquote yang keren, blockquote atau kotak khusus dalam postingan berfungsi sebagai kotak yang didalamnya akan diisikan kode kode / script  ataupun tulisaan pantun , kata mutiara,dll.

Sebetulnya blogger sudah menyiapkan fasilitas blockquote standard /default untuk membuat text box yang berguna untuk memeisahkan text agar terlihat berbeda tampilannya, karena biasanya merupakan bagian isi konten yang penting, Blockqot keren ini juga banyak variasinya, tampilan blockquote ini bermacam macam ,anda tinggal pilih mana yang cocok untuk dipasang diblog.

berikut ini adalah beberapa tampilan blocquote dan kodenya;

1.

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

2.

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

3.

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

4.

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

5.

Code; blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzX_3LBul-yR50zqJRSguRunKEJL9PA0hwQZwCdcXha1u9ob8jOk_gFpLC9d9xzDWt8Z2Mo2IXra6FctgjaLCxbhqrBCZQSbFkud94KMcikdegWLtuvV2SlOcw2QhgjOZ1PM-EINSIBlY/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; }

6.

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

7.

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

* Anda juga bisa mencoba beberapa script blockquote dibawah ini;

Baca ; Cara memasang dan menggunakan blockquote secara otomatis

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

Code; blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLy-XizcujQjvU4-8vRyvGfm2JjTWZPK5spp-hSDaiu9pWN_Uwh9J0U3ay4vb_e8FiuVXB55YtaV0yQtNseb0GtIud4OPnZa11m6qw2tFNfz-a3qUqgkhNNQd1yITaQGQiluF9UEEi1wQ/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; }

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

Code; .post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpioW5LLNvCG0v4CihOz27uEiUDAHiLY1FnbfgSqzRjPTct-xRtYdztCpglnMerCz9jB7JX79n7HAUZgZ8Z97_CmtExN-6JBg_Zu14CL4wCW3OJ-zwrBNdxeQtURqySPTNEdphrQ5vYo8/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/AVvXsEirZOsJ2-UNtQtan9mVBJqAhoQvb_72NQPWEMVHs0O09b2TdaWVFZIMJ5MUjoYT4GgkFjFcQEM61oNyRJhi8wmk8WuMHEozzEnmQ2eGN9IzMK5IuGTiNWruQvHH1dfTBqG83Rp3UQFnUes/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Code;

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19r2x69H1u20dE6GsdfVv7y0bUvuDPDdVONY3pALY7YvGy-XYVLZd5hdl3M-_W4LTNNeqVkGlT4-TFmqr2k_AdgEZpq6ioCdMwJO-yluYAAdQR6lyK6w7WEvvghv5Sj1aAtc93ZnLm2I/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/AVvXsEgOIfqBOxKHIiR4EgASAq2rgET4r_8TkNVEhoVf1MzK6MDXW3kbDZEyH8gWJUdM_ZsSokkqlU__IU3dY1eUrIODMFBZERhaMFE8_RHQv95So4Kj63PFHLjK4rMg5y_p7MWXv6d204wGIHY/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Code; .post blockquote { font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMTCssc7Dp-EXlnWeOZrSU2bARt2kRL3PRRfJfr2hTpGXeeBsIrEp0z6IE__0dYu0SyEkZinz0GY4TcQvRWW1EkyLXHC-QMLA-8GYC42LxEG78GS686rMNaI_1-Lav-yL-5mAi0ocTDBE/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKvrf1J4xUTesxqHvaX0xvRJW6GzFULqDH8cOhpG1UcMMgQLSw4EDLAwF1dx9yuenjcDLfoitF3Y7KUBP5paQM2qPuq6xubw-V3E89W5RT2pCHZsjxBvDXjop7JUH3q0iRjQvNiXDJd4/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }

Code;  .post blockquote { font: italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudjrW3iE4qiN0oLcPS32r4nObpUOYzknAsDgmnr1TKqCgfimwAno1YQa47t99CuLPg1TlWWfY5m1cgfXALS2vejkGZh5Gvsi4VZg9cxmcAjOc0eIoMqq03ig82qtR81fVIPZ4juQmDk0/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZdg0tUgu2ZgMuI5ECQ_yS02OmDmA0O6jhgTtEIoKyuvK9D_9dwQRXCagOgZ9xgkiT5EcYXn74yUbgoLiNk6EEwHhe8QWEBQDy0YQUQcftM5a8rYXjLhyfiCN0nWapZ6qvFp8Z4ekmNY/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Code;

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

Baca ; Cara memasang dan menggunakan blockquote secara otomatis

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

Code;  .post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfAyL03q1xymT7uaAe6cCVWkbmDtUGtLSMQ2HD3Brj811-gakaZFQAxX-e9w5egGaNkKV4xpgvJzZCijR4V2K6HDOurlvLVD8gFeUkHIUcBRFp5AQrd5Wld2wgwhtmPsjekI04eJVdLOE/s400/block3331.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; } .post blockquote p { margin: 0; padding-top:10px; }

Sekian dari saya tentang beberapa kode blockquote keren yang bisa bagikan, semoga beberapa script blockquote diatas bisa membuat tampilan konten blog menjdi lebih indah, , semoga bermanfaat dan terimakasi atas kunjungannya.