 |
| Customize Blockquote in Blogger | 6 Blockquote Style Codes |
In this article you will learn How to Customize Blockquote in Blogger? You can also see 6 blockquote style codes which you can use in you blog or website.
Blockquote is used to add quotations in post. Blockquote make your quotations different from other text in you blog. Reading this tutorial you will be able to customize blockquote in blogger. There is also 6 blockquote styles which you can use in your blog.
Important Note: You can also use these styles on any website.
How to Customize Blockquote in Blogger?
Step 1. Go to Template > Edit HTML.
Step 2. Search for the following code.
</head>
Step 3. Above the searched code paste the style code for blockquote. You can see the list of blockquote styles below with codes.
6 Blockquote Style Codes
Blockquote Style 1
Geeking Nerd blockuote styles for you.
<style>
.post blockquote {
overflow:auto;width:250px;height:260px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#ffffff;
margin : 15px 35px 15px 15px;
padding : 5px 8px 15px 165px;
clear : both;
list-style-type : none; word-wrap:break-word;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbSEe8Ff3y8048AN-nRJhy9LNmAhibJeXkPMJ3dwDbaLrznRGgJiOTYOqbag0YZ3SSHmnIrA6WiSjRSe9Mbb30ffXR4wtHpZUkcbzz-L-3owLEEvZinikGwIS145_pcxlm4laQ6HciNi3/s1600/teacher.png);
background-repeat: no-repeat;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;
}
.post blockquote:hover{
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEZdHyfqRzSD-VdbPbPdpwZB4FwG1pJbQoRercTeJfTngBR0cGcOOAeePYj8mC7MH7HsO6NyP-QZqJdNZTkx3jDX3uYwRqxO8jWPtSMU-05HP5wYP-91bE2Bvai2qSeAGSLfRoKLeGHVo/s1600/hover+html+teacher.png);
background-repeat: no-repeat;
color:#F1F1F1;
}
</style>
Blockquote Style 2
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
<style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiR2vwYvFC5K4jY-MKR5qBSgPST05EnsOjqpCzBiWz59GBZwCn9lmBWc-AcDQVZwqnhtrHG5f7gluZN6HYuUQ5wfz7nzgX-RIB3VkU22U0RcxzwQhu5biHCtHDnEz8V3hz9fezPmIaHWca/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
}
</style>
Blockquote Style 3
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
<style>
.post blockquote {
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 14px;
line-height: 1.5;
color: #446578;
text-align: justify;
border-left: 15px solid #EBF2F8;
border-right: 1px dotted #EBF2F8;
-moz-box-shadow: -1px 2px 5px #ccc;
-webkit-box-shadow: -1px 2px 5px #ccc;
box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before{
content: "\201C";
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #8DACC0;
position: absolute;
left: 10px;
top:5px;
}
.post blockquote:after{
content: "";
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}
</style>
Blockquote Style 4
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
<style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>
Blockquote Style 5
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
<style>
.post blockquote {
background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #B5D928;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}
</style>
Blockquote Style 6
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
Geeking Nerd blockuote styles for you.
<style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>