Modelos personalizados de blockquote para Blogger

Views:
CÓDIGO DA FONTE ESPECIAL

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

CÓDIGO DO MODELO 1

<style>
blockquote {
position: relative;
color: #000000;
border: 5px solid #FF4081;
border-radius: 100px;
padding: 30px 60px;
margin: 0em 60px 60px;
text-align: center;
font: 16px Cambria,Georgia,serif;
font-weight: 600;
}
blockquote:before {
display: block;
border: 10px solid #D81B60;
position: absolute;
background: none repeat scroll 0 0 #FFFFFF;
content: "";
height: 50px;width: 50px;
right: 100px;
bottom: -40px;
border-radius: 50px;
z-index: 10;
}
blockquote:after {
position: absolute;
background: none repeat scroll 0 0 #FFFFFF;
display: block;content: "";
height: 25px;
border: 10px solid #D81B60;
bottom: -60px;
right: 50px;width: 25px;
border-radius: 25px;
z-index: 10;
}
@media only screen and (max-width: 500px) {blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}
</style>



CÓDIGO DO MODELO 2

<style>
blockquote{
margin:0 auto;
position:relative;
line-height:24px;
padding:24px 20px 24px 45px;
text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);
background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);
}
blockquote:before{
content:'';
position:absolute;
top:0;
bottom:0;
left:20px;
border:4px solid rgba(139,207,173,0.7)}
blockquote:after{
background:rgba(242,246,193,0.9);
z-index:-1;
left:0;
right:0;
transform:rotate(2deg);
border:1px solid rgba(170,157,134,0.7);
}
</style>



CÓDIGO DO MODELO 3

<style>
blockquote.tr_bq{
background-color:#f9f9f9;
font: 15px Arial, sans serif;
color: #222222;
font-style:italic;
padding:10px 20px;
margin:0;
border-left:4px solid #fc385a;
text-align: justify;
}
blockquote.tr_bq:before,blockquote.tr_bq:after{
display:inline-block;
font-family:FontAwesome;
font-weight:400;
color: #fc385a;
font-style:normal;
line-height:1;
}
blockquote.tr_bq:before{content:'\f10d';margin:0 10px 0 0}
blockquote.tr_bq:after{content:'\f10e';margin:0 0 0 10px}
</style>


CÓDIGO DO MODELO 4

<style>
blockquote.tr_bq{
font-style:italic;
font-size: 14px;
font-family: Arial, sans serif;
color:#444444;
border-top:1px solid #ffabb9;
border-bottom: 1px solid #ffabb9;
background: #fff9fa;
margin-left:0;
padding:10px 15px;
}
blockquote.tr_bq:before{
content:'\f10d';
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
margin-right:10px;
color:#ffabb9;
font-size: 17px;
}
blockquote:after{
content:'\f10e';
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
margin-left:10px;
color:#ffabb9;
font-size: 17px;
}
</style>


CÓDIGO DO MODELO 5

<style>
blockquote{
background:#BA68C8;
margin-left:2em;
padding:1em 1em;
margin-right:2em;
color:#ffffff;
border:3px solid #9C27B0;
font-size:15px;
font-family: Helvética, Verdana, sans-serif;
box-shadow:5px 5px 0 rgba(0,0,0,0.1);}
blockquote:before {
font-family:FontAwesome;
content:"\f10d";
font-style:normal;
padding-right:4px;
text-decoration:inherit;
color:#ffffff;
font-size: 20px;
font-weight:normal;
}
</style>


CÓDIGO DO MODELO 6

<style>
blockquote{
padding:20px 30px;
text-align:left;
background: #757575 no-repeat right;
color: #ffffff;
font-size: 16px;line-height: 1.4;
border: 0;
border-radius: 10px;
margin: 0 30px 10px;
display: block;
box-shadow: 11px 10px 0px #212121;
}
</style>


CÓDIGO DO MODELO 7

<style>
blockquote::before {
content: '';
background-image: url(https://1.bp.blogspot.com/-efjyOgee7qw/XVxpzQFVFcI/AAAAAAABmsQ/BUx4e0DBz_gthvOrZWnqcqGXALUntGhkwCLcBGAs/s1600/post-divider.png);
display: block;
margin: auto;
background-size: 100%;
width: 350px;
height: 36px;
margin-top: -60px;
margin-bottom: 30px;
}
blockquote {
padding: 40px;
font-style: italic;
font-family: Courier, Georgia, serif;
font-size: 12pt;
margin: 0px;
color: #000;
background-color:#f5f5f5;
margin-top: 10px;
margin-bottom: 10px;
}
</style>


BÔNUS: MODELO 8 COM VISUALIZAÇÃO AO VIVO


Olá!
Eu sou uma citação, ou blockquote.
No meu caso eu estou personalizado, pra ficar lindão e combinar com o blog.
Também sou uma demonstração ao vivo, passe o mouse sobre mim e veja o efeito fofinho que aparece!
Sou fofo?

CÓDIGO DO MODELO 8


<style>
blockquote.tr_bq {
padding: 5px;
font-size: 11px;
color: #696969;
background-color: #f5f5f5;
border-right: 12px solid #FF4081;
border-left: 12px solid #FF4081;
text-align: center;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}
blockquote.tr_bq:hover {
border-right: 5px solid #444444;
border-left: 5px solid #444444;
-webkit-transition-duration: .50s;
}

</style>