This tutorial volition demo you lot how to customize blockquotes mode inwards Blogger. Also, you lot volition accept half dozen cool examples of customized blockquote styles that you lot tin laissez passer the sack purpose for your blog.
How to add together quotes to a Blogger post |
How to Add Custom Blockquote Style In Blogger
In social club to customize the blockquote mode inwards a Blogger blog, you lot ask to access the HTML of your template in addition to add together to a greater extent than or less code within the caput section. The code tin laissez passer the sack survive constitute below each blockquote mode provided below - select a mode that you lot similar the around in addition to re-create the code to purpose it where indicated.Step 1. From Blogger's Dashboard > become to "Template" > "Edit HTML".
Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to search for this tag:
</head>
Step 3. Just to a higher house the </head> tag, re-create in addition to glue the code of the mode that you lot would similar to use:
Style 1
Lorem ipsum dolor sit down amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim promotion minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor inwards hendrerit inwards vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend pick congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<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/AVvXsEiSQjtD3ysgE5DLROrMK6ZX_rX0NWUOxAfV9uVxmsKZVhe8aau6onXHfF8paqvFZjndHzk4CbzmgrWGRes7dgZxRNUmL66Ma4qLNBJfmdwAlEkduG-3FiG_sOwDUaoRrl17WXfZLRlK70kw/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/AVvXsEhF1V8ONTLntgCg7k-GTh8M4UCgyIn3lOq5ZGyYF0rxcRp6kgPUYkYSnAYFST8EZ2wxIU3ajZTy_yn7RWVFoNH-S7k-awYxCGQZxCOM21g9PGhVslBPXhej7gceSkpaKyEh_t7wv6-j655f/s1600/hover+html+teacher.png);
background-repeat: no-repeat;
color:#F1F1F1;
}
</style>
Style 2
Lorem ipsum dolor sit down amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim promotion minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor inwards hendrerit inwards vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend pick congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<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/AVvXsEiElOUulPHXVdDCvEjl25ux9sVccBnIqX6SKoH682DyYn3G5dg-lGJ1OOB4c1Y26_PqwDn3zWQbeQGhhjT-hKM89F_IX5XET0C6fp-L9xeAiXAkGOt0FrHqqZ1tm-Hqw3DKY2iQwz5OW0gL/s1600/notepad1.gif) repeat-y overstep left;
edge : 1px enterprise #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>
Style 3
Lorem ipsum dolor sit down amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim promotion minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor inwards hendrerit inwards vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend pick congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<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 enterprise #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>
Style 4
Lorem ipsum dolor sit down amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim promotion minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor inwards hendrerit inwards vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend pick congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<style>Style 5
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px enterprise #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>
Lorem ipsum dolor sit down amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim promotion minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<style>Style 6
.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>
Lorem ipsum dolor sit down amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim promotion minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<style>Step 4. Click on the Save template push to relieve the changes. And you're done!
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px enterprise #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 enterprise #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 enterprise #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>
So these are a few amazing examples to customize blockquote mode inwards Blogger. If you lot accept whatever questions or suggestions, therefore experience gratuitous to larn out a comment below.
Comments