12 BlockQuote Design yang Keren Untuk Blogger

Assalamuaikum Wr. Wb. sobat blogger.
Sebagian dari kita pasti sudah tau apa itu blockquote. Yups, seperti gambar diatas, gambar tersebut adalah blockquote yang saya pakai di blog saya. Blockquote dimaksukan untuk memperjelas tulisan atau mempertegas tulisan yang dianggap penting. (versi sok tau dari saya, mohon maav klo salah) 

tanpa basa basi lagi, kita langsung ke TKP aj dah..
Langka-langkahnya sebagai berikut:
1. Login Blogger seperti biasa.
2. Klik Buka Daftar Entri (disamping tombol Lihat Blog) -> Template -> Edit HTML -> Lanjutkan
3. Selanjutnya cari (tekan Ctrl + F) ]]></b:skin>
4. Klo udah ketemu, tinggal pilih salah satu kode dibawah ini, letakkan di atas code " ]]></b:skin>"

nih contoh script sama gambarnya:

Blockquote Design 1

Kode Untuk Blockquote Design 1

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9l0fcGpwiz7v1PBuHe3bBGQw_EQyoj1WtXX6mqC1y1nSBnsewuF3RBEOP2MGRjTQOzoczq1tDs5SHvpGSQwUAXdmaD4RJ5n04cXaMR6m3prddWkrmtDktSC_cOrlO1Z3oxNvX46cYC1F/s1600/rb+style+01.png) no-repeat bottom right;
font: 18px normal Tahoma, sans-serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote Design 2

Kode Untuk Blockquote Design 2

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVyPuvkzHQcgv-EbdGquonyOwgB0PTpY3bKlPGOdjGFeKWAWv1m3QkjFyTILtYwM7JUqFZUI6GRElW-FmUu8Lb57FNc-jlSZGPdrsbBAqXpHY3O5ZFnjIpVB9uwd9ozKaX4exN3qqodsX9/s1600/rb+style+02.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;
}

Blockquote Design 3

Kode Untuk Blockquote Design 3

    .post blockquote{     margin : 0 35px;     padding: 80px 0px 0px 0px;     background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhhC2v7EAcGM-c5lhPEBJKUI5vLcuJHP3xBZUEsSS2GsB3R9jxBG12jWcGorRKmckJLLs1lpbewSV9iiW9IFub5bJ9Monm_8eubU6RJVFZEjmFcrNvQHuScapB7qON24_GFnvW5X7q5rVl/s1600/rb+style+04.png) no-repeat top;     font: bold 1em "comic sans ms", Helvetica, verdana;     color : #666;     }
    .post blockquote div{     background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuLqTRDyFlwd4JOq6fmEhoEH0ttFaXS5LT1WCZrjyUi1QTAkRnA2pffP0yXASt5kQwl1QXQYA8KCVTA3vzPocJY9wUC7dZl8sfxTc17eOLUNLSIH-EKXy2xvLBqcD4oSSZW0CgdDh-7YFc/s1600/rb+style+04..png) no-repeat bottom;     padding-bottom: 50px;     }
    .post blockquote p {     margin: 0;     padding: 20px;     }

Blockquote Design 4

Kode Untuk Blockquote Design 4

    .post blockquote{     margin : 0 35px;     padding: 80px 0px 0px 0px;     background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhhC2v7EAcGM-c5lhPEBJKUI5vLcuJHP3xBZUEsSS2GsB3R9jxBG12jWcGorRKmckJLLs1lpbewSV9iiW9IFub5bJ9Monm_8eubU6RJVFZEjmFcrNvQHuScapB7qON24_GFnvW5X7q5rVl/s1600/rb+style+04.png) no-repeat top;     font: bold 1em "comic sans ms", Helvetica, verdana;     color : #666;     }
    .post blockquote div{     background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuLqTRDyFlwd4JOq6fmEhoEH0ttFaXS5LT1WCZrjyUi1QTAkRnA2pffP0yXASt5kQwl1QXQYA8KCVTA3vzPocJY9wUC7dZl8sfxTc17eOLUNLSIH-EKXy2xvLBqcD4oSSZW0CgdDh-7YFc/s1600/rb+style+04..png) no-repeat bottom;     padding-bottom: 50px;     }
    .post blockquote p {     margin: 0;     padding: 20px;     } 

Blockquote Design 5

Kode Untuk Blockquote Design 5

    .post blockquote{     margin : 0 20px;     padding: 50px 30px 50px 30px;     background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifFbnqCdbfk2DFTFggKS0g3PMAC8fn0La05SviUDioFYUuZJcSmJo2z57oj_q_IOIJ79HGBafdG4hCMgwowKLbnlp6ej4GICsFezT2-zDMOLE43gKBohhATLluajqmneCbcvlZ0nHvrnS7/s320/rb+style+05.png) no-repeat top;     font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;     color : #000;     }
    .post blockquote div{     background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj45sfmPmq0oAVe2cXhJovrfY6lUSEu4kYRLsw-87DUynymFc3gOTIWl88H7i2C6Wro2BTv4rhjsWMMpZayB9bIOmuWI6hCWBC0pXbZIzObkip81jbdzDH7myae-WOucdpAJZuvNJUXYezo/s320/rb+style+05...png) no-repeat bottom;     padding-bottom: 50px;     }
    .post blockquote p {     margin: 0;     padding-top:10px;     } 

Blockquote Design 6

Kode Untuk Blockquote Design 6

.post blockquote {       font:bold italic 1em  "comic sans ms", Tahoma, sans-serif;       padding-top: 25px;       margin: 5px;       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZFu_kRfWZjVsiaSXR8z6YFPC4an6Il6tIFS2iiJnlFSwqGTMgBO5hMw-UWU1lT5Ht8eSJcjk9YV2HHw_8UnXwtfMgtRT2csOGMyHNk4BGhVr4SPvoaLa253gFqPuYv7SImesU8UEbxYO/s1600/rb+style+06.gif) no-repeat top left;       text-indent: 65px;     color:#6299E4;       }       .post blockquote div {         display: block;         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0ZS3AVjgR8S6AQe4dafds5BLfyBGrxwdxrmDPAx-owkLxjyFO7ODXYkb3n0JsyxtdU4wed3uuXt7vbxQ4a3AUcl7p08zQWqqGdscVKdqSHfQN_ieqPLm7T7qFy96ay382pfbVbgXZuA1/s1600/rb+style+06..gif) no-repeat bottom right;     padding-bottom:30px;     }
    .post blockquote p {     margin: 0;     padding-top:10px;     } 

Blockquote Design 7

Kode Untuk Blockquote Design 7

.post blockquote {
font: bold italic 1em  "comic sans ms", Tahoma, sans-serif;
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/AVvXsEhEKBj2j4feMmu5tjUNHz6MKcZXwvUM9Rrnt7XgipIujMwuOhSv2aVULO3dEvY-hNCk8IJUJyrR9ii39Fph0GlnokdY3Ntmg6gTBNSv-H4zdUHBBAZC6DQiAxzBR1qzrTa8G62F5LeBldsY/s1600/rb+style+07.png) 5% no-repeat #FFF8DD; } 

Blockquote Design 8

Kode Untuk Blockquote Design 8

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8M9p8UOIvtytKadPndMdEBUW968zDseGN12lIUh4xjo05QmoUJSC7yFZDNsVzL5H_dMwz18E2X4un9Giffn8uLmAWZtpCy6PFPvhvpXFiudl27MMCRUnvpD98zLncDCdvvx4ivD7hehf2/s320/rb+style+08.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: bold 1.1em "comic sans ms", arial, Helvetica,verdana, Georgia; } .post blockquote p { margin: 0; padding-top: 10px; } 

Blockquote Design 9

Kode Untuk Blockquote Design 9

.post blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_GVLZZnXWz_5pYixa7JwTdYBtCyrIRbpaN4BV2m8oMEfbOYgz5-_RkkS3Mxz-wofbKBj_1kJZeJiC8HHEOQiUYY-fKRpHbBL8jj7MmDUaa8EvTNUdnbx3lOxHJALN4gvWNljcB7pYJ6JJ/s1600/rb+style+09.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; -moz-border-radius: 15px; border-radius: 15px; color:#C7CACF; font: bold 1.1em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; } 

Blockquote Design 10

Kode Untuk Blockquote Design 10

    .post blockquote {       font: bold italic 1em  "comic sans ms", Tahoma, sans-serif;       padding-top: 10px;       margin: 5px;       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg1ueLY4Y_x_NdpXTgrDy5ukhtrdLyL0RKueyFPSiZySXJ82JjZ9Nk91bgLazleBypRGKKBMEU-NRXw-YKp5ecH136KmIgNGaNZQpBX2X6_TB-CWo6IQ-242tUfctmee6pnZ349dSFPufp/s1600/rb+style+10.gif) no-repeat top left;       text-indent: 65px;       }       .post blockquote div {         display: block;         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JTY6wxmi_aaS6r1BC-wvcnF2cnCcJ-_uhaK6j109n8Dp4iovj61qksttUuvBhrWfG7zLt3MNhX70bQDIxqdN1LTzGiLXdgiyFskEj244ASS3QgJDRPO6El2tzA8JuImCr1tPb3EaLmku/s1600/rb+style+10..gif) no-repeat bottom right;     padding-bottom:10px;     }
    .post blockquote p {     margin: 0;     padding-top:10px;     } 

Blockquote Design 11

Kode Untuk Blockquote Design 11

    .post blockquote {       font: bold italic 1em  "comic sans ms", Tahoma, sans-serif;       padding-top: 10px;       margin: 5px;       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGYKjON_mqXtEk9-hFtgKfJEM1dOeHwUfScOoF1GmcuOpyswIzsVdsliyNpf_9seusuwegFX4xk43os3fy1Dg4TzL7YGOGiWU6GHYZon-7qNb-X63fp_cVOlOnV2rU7pH844MDLT3qMu7w/s1600/rb+style+11.gif) no-repeat top left;       text-indent: 65px;       }       .post blockquote div {         display: block;         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhc6vO680AzPehPI7evffDYwBUiCQAvV5Bdu0KhPA9xzkCwXRJtv8cwv_KGeJNJcaWq8HIX3feRlancZ01ZlXp6PZw3Q2jCbn1jdYNpEXMUm733HKN79lVLaciNQk2vQkw9VFuXYxqu3z/s1600/rb+style+11..gif) no-repeat bottom right;     padding-bottom:10px;     }
    .post blockquote p {     margin: 0;     padding-top:10px;     } 

Blockquote Design 12

Kode Untuk Blockquote Design 12

.post blockquote {     margin : 0 20px;     padding: 10px 20px 25px 20px;     background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjswQwFrdv2Kiyv7odO2ztUnp9ip6zckDvvPdtu7_scQEprBMCqfun_2QOajM1qBJ4vcIadYz4pA77uSUi5kU_M4DEJxWde_xz6VQacFTYu12K0nxJSIUGWlsS2H1UljRLk8yxoa9y6ZfvT/s1600/rb+style+12.png) no-repeat right bottom;     font: bold 1.0em "comic sans ms", arial, Helvetica,verdana, Georgia;     color : #484848;     border: 5px dashed #fff;     }
    .post blockquote p {     margin: 0;     padding-top:10px; }

Untuk penjelasan dasar dari kode-kode tersebut, saya akan mengambil contoh kode pada blockquote design no 1

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9l0fcGpwiz7v1PBuHe3bBGQw_EQyoj1WtXX6mqC1y1nSBnsewuF3RBEOP2MGRjTQOzoczq1tDs5SHvpGSQwUAXdmaD4RJ5n04cXaMR6m3prddWkrmtDktSC_cOrlO1Z3oxNvX46cYC1F/s1600/rb+style+01.png) no-repeat bottom right;
font: 18px normal Tahoma, sans-serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

*Pada tulisan yang berlabel kuning, itu merupakan jarak antara text dengan pinggir blockquote border. Urutannya 20px 60px 80px 20px : Atas Kanan Bawah Kiri/div>

*Pada tulisan yang berlabel biru muda adalah warna background blockquote

*Pada tulisan yang berlabel merah adalah url dari gambar backroung blockquote, untuk melihat gambarnya ketikan alamat tersebut pada address bar.

*Pada tulisan yang berlabel hijau adalah besar tulisan, dan jenis font yang dipakai.


sumber : http://www.realcombiz.com/2012/09/12-awesome-ways-to-customize-blockquote.html

Artikel Terkait Lainnya :