Saturday, 23 April 2016

How to customize blockquote in blogger



Blockquote is very useful in blogger. It allows you to highlight a particular text in the page such as HTML code, css code, js, etc. Most of the time if you use a web development language such as HTML in blogger then it is difficult to show the code as the blogger
assumes that you are using the code for giving instructions and the code is used up. So blockquote can be used up for this purpose. But the default blockquote in very simple and not so good looking. So here is a post which will guide you on how to customize blockquote in blogger.



3 styles are given below, but if you can change the color, border, background,etc in order to come up with your own unique blockquote style and your blog will get an authentic look.

STYLE 1

 <style>
.post blockquote { /* blockquote style by TTZ */
background:#d9f1e5;
border-left:8px solid #23e885;
font-family: Georgia, Times, "Times New Roman", serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
.post blockquote:before {
color:#ccc;
content:open-quote;
font-family: Georgia, Times, "Times New Roman", serif;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
.post blockquote p {
display:inline;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 10px;
}
</style>

STYLE 2

<style>
.post blockquote{ /* blockquote style by TTZ */
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #000000;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>


STYLE 3


<style>
.post blockquote{ /* blockquote style by TTZ */
background-color: #f7f2f2;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 4px #af3e30;
border-left: solid 4px #af3e30;
border-right: solid 4px #af3e30;
border-bottom: solid 4px #af3e30;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>