Exemplos Para personalizar Blockquote Estilo No Blogger.

Exemplo:

.post blockquote { background: #f5f5f5; border-bottom: 3px solid #3C355F; color: #3C355F; font-family: tahoma; font-weight: normal; font-size: 11px; text-align: right; padding: 3px; border-radius: 25px; }

Exemplo:

blockquote { border-bottom: 1px dashed #33CCCC;/* cor da borda */ background-color: #efefef; /* cor de fundo */ padding: 10px; font-size: 11px; /* tamanho da fonte */ color: #333333; /* cor da fonte */ text-align: justify; }

Exemplo:

blockquote { border: 1px solid #c9c9c9; /* cor da borda */ background-color: #efefef; /* cor de fundo */ padding: 10px; font-size: 11px; /* tamanho da fonte */ color: #333333; /* cor da fonte */ text-align: justify; box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc; -moz-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc; -webkit-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc; -khtml-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;

Exemplo:

/* --- Blockquote simples por camilasdesigns --- */ .post blockquote { margin:1.6em 10px; padding:5px; background:#EEEEEE; /* cor de fundo, coloque a cor que quiser */ border:1px solid #CDCDCD; /* cor, tipo e espessura da borda */ font:12px 'Courier', sans-serif; /* tamanho e tipo da fonte */ font-weight:normal; line-height:1.6em; text-align:left; overflow:scroll; /* não mexa */ }

Exemplo:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } blockquote { border: 2px solid #a9c6e7; /*Tamanho, tipo e cor da borda/* background-color: #dce9f8; /*cor do fundo/* padding: 10px; /* espaço entre o texto e a borda/* font-size: 8px; /*tamanho da fonte/* font-family: 'silkscreen'; /*nome da fonte/* color: #758495; /*cor do texto/* box-shadow: inset 0 0 10px #a8c0db, 0 0 5px #a8c0db; /*configurações de sombra/* text-align: center; /*alinhamento do texto/* -moz-border-radius: 3px; /*borda arredondada/* -webkit-border-radius: 3px; /*borda arredondada/* border-radius: 3px; /*borda arredondada/* }

Exemplo:

.post blockquote { background: #f5f5f5; border-bottom: 3px solid #DAA520; color: #bebebe; font-family: tahoma; font-weight: normal; font-size: 11px; text-align: right; padding: 3px; border-radius: 25px; }

Exemplo:

blockquote { background: #6c5b5a; padding:4px; overflow: hidden; border-radius:0px; color:#fff; border-top: 3px solid #f5758d; font-family:tahoma; font-size:11px; line-height:17px; }

Exemplo:

post blockquote { background: #F5ECED; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-right: 5px solid #FF9B8B; font-size: 13px; text-align:center; }

Exemplo:

post blockquote { background: #FFF0F5; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-left: 8px ridge #FF6FBD; font-size: 13px; text-align:center; }

Exemplo:

blockquote{ border: 1px solid #c9c9c9; /* cor da borda */ background-color: #efefef; /* cor de fundo */ padding: 10px; font-size: 11px; /* tamanho da fonte */ color: #333333; /* cor da fonte */ text-align: justify; -moz-border-radius:20px 0px; -webkit-border-radius:20px 0px; border-radius:20px 0px; }

Exemplo:

blockquote { border: 3px solid #fafcfd; background-color: #fbf0ff; padding: 10px; font-size: 11px; color: #a48ead; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: inset 0 0 12px #ecebeb, 0 0 5px #d7bce2; }

Exemplo:

blockquote { border: 1px solid #c9c9c9; /* cor da borda */ background-color: #efefef; /* cor de fundo */ padding: 10px; font-size: 11px; /* tamanho da fonte */ color: #333333; /* cor da fonte */ text-align: justify; -moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/ }

Exemplo:

blockquote { background: #f5f5f5; border: 1px solid #00688B; color: #00688B; font-family: century gothic; font-weight: normal; font-size: 11px; text-align: right; padding: 7px; border-radius: 25px; } blockquote:hover { border: 2px solid #000000; }

Exemplo:

.post blockquote { background: #efefef url(http://static.tumblr.com/oiizew6/xBQly7u8f/aspas.png) no-repeat left top; /* Backgrounds */border-bottom: 2px solid #AB82FF; /* Estilo da borda */padding: 10px; /* Espaço da esquerda */font-size: 13px; /* Tamanho da fonte */color: #696969; /* Cor da fonte */text-align: justify; /* Alinhamento do texto */-moz-border-radius: 10px; /* Bordas arredondadas */-webkit-border-radius: 10px; border-radius: 10px; padding-left: 40px; /* Margem interna da esquerda */padding-bottom: 12px; /* Margem interna da parte da borda */padding-right: 15px; /* Margem interna da direita */padding-top: 10px; /* Margem interna da parte de cima */}

Exemplo:

Codigo:

.post blockquote { margin: 1em 13px; background: #9AE3ED; /*cor do fundo*/ border: 1px solid #E85A93; /*cor da borda*/ border-left: 7px solid #E85A93; /*cor da borda*/ padding: 8px; /*espaçamento do texto*/ font-size: 10px; /*tamanho da fonte*/ font-family: tahoma; /*tipo da fonte*/ color: #000000; /*cor da fonte*/ }

Exemplo:

Codigo:

blockquote { border-left: 8px solid #ff4800; background-color: #efefef; padding: 4px; color: #333333; text-align: justify; }

Blockquotes, uma maneira muito agradável para diferenciar alguns dos conteúdos do resto.

 E também é uma boa maneira de impressionar os usuários usando um estilo legal para a citação.

Aqui ainda pode aprender a adicionar a funçao  <blockquote> </blockquote> em seu Site

Neste post eu tenho dado os diferentes estilos de blockquotes de diferentes fontes basta verificar os estilos.

Exemplo:

  Blockquote Code:

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

Exemplo:1

Blockquote Code:

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

Exemplo:2

Blockquote Code:

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

Exemplo:3

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

Exemplo:4

Blockquote Code:

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

Exemplo:5

Blockquote Code:

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

Exemplo:6

Blockquote Code:

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

Exemplo:7

Blockquote Code:

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

Exemplo:8

Blockquote Code:

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

Exemplo:9

Blockquote Code:

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

Exemplo:10

Blockquote Code:

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

Exemplo:11

Blockquote Code:

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnuH2Zq_Z16QnBwnqgH_SJ9I7ZnSWSJcWEJlZwAvlJXfIpbVadhe0U9tvkTmuhgJckdjrtKrvj7v1TMpsm5-2Dhduj84wSLV-Nlht0SDXTODb-q8CGrqCE6BxFk8p7934_4Tg-ZveeUp0/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/AVvXsEgaI382wCt__hElFHXMt_cBugcHztwS6ICe7ljGj_uUp-l4PWz3rFWzLA_pl6KRqvVo69cvSbHVSeg-zckIDkamVf61-H4XMW0JGINMTDk3Oy9c67S06z5I62np_nMj3FWUIhWWbZcri5Q/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Exemplo:12

Blockquote Code:

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

Exemplo:13

Blockquote 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/AVvXsEhPoXb6FtwgjzcC0AfvYHP3_QVY83RrnC9GoDet7m8oR5qdt7vy9k9lZBwKsYrhDdoL_Lr99nxL4Z51gZy_Umz3cLEEyiSGywy6_ks-VjXupM8H5-bJg30LORUSVaPio7fQ1167rq5xwUc/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/AVvXsEg7nuF0cMxmrfPxmRlkS8w0i7KXa7r42-Q4F_IF2MDyL6d2uIRX5F_XnmDaJcd-qOlLRWbJKj2zC44ykjUTo8GbXw03UP88xSHd0UWmjc7QeVl9Rki6VSMB0L0qCy4SSeNxk2OlB5uGmDg/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }

Exemplo:14

Blockquote 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/AVvXsEhCoXS3MuOKMrCiON4df-hidCIpoZ8H_ZxwrXfvUvDiSM8QY43j0Z98kvdg2yODKLm4uX4xYtMrYf8UYvcOHeWOiOg4gOj_kmiajX0ViJIdplvyL5gcp3cGn0U3wjy2WKBdsziPo0E0nJI/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/AVvXsEiPojN0IpH3OjbEsCJ1D15g_QYFu-ODpJ51H-rxfwmolqNqXOsT4Gjz6qyoT6TWNNDJawgVvlpV-TyhTVSvYk9pWsKeM9ETyPEjWcF8mqsxb5C9-92uCYYfZyZkiIJJ0rj0kFRaSASKXHU/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Exemplo:15

Blockquote Code:

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

Exemplo:16

Blockquote Code:

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

Exemplo:17

Blockquote Code:

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

Exemplo:18

Blockquote Code:

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibo6jtJFK5WMzLygwV1AW-N-1iv6y2toMfAjOnl9XXzb06RPqlbJT0_6iIVYBXBx6yTtiC_p64LKcybsFsKA3QYnnil2IjlQnCS5dTdnyq6vJvseKSWz4LzM3va6C07TXsIrSVy0hga2k/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/AVvXsEjeOuwIjshGKxvFAzOys-AjMI0l5LoXlnZLsQvtQ1y8dfVp6KMD2FF9w_rRghfqkKNd5JxvS62Y-6tNW1937NRDZcylikZ0Os3zBCUw8hzqiS1oCDKDcb8EDWEVZkMbUbLdhA__rkjma8I/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }

Exemplo:19

Blockquote Code: .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } blockquote { background:#EFEFF7; }

Exemplo:20

Blockquote Code:

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/AVvXsEjmSZ0Gm4KQ6fZW6kU2T_R7SCo7hmMVr0wTXeh73jsea69bWed5Kq2kbGYswXV6SkFtJ4ShhyphenhyphenuKAs2Q1NUNf2raAUj6DXCbWW6-JT3DoPl5GEFfnGtOETCveneimyjeCGJqKK1y9Nei9m0t/s1600/quote.png") 5% no-repeat #FFF8DD; }

Exemplo:21

Blockquote Code:

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