Blockquote is a quote in an article or post, which protrude from the main text as a paragraph, or a block of text. Using CSS, we can give a more professional look to your site or blog by adding different styles, backgrounds, colors or fonts quote.
I created this tutorial shows you how to customize blockquote style in Blogger.
Jump aja ya, this guy because I do not like basbisbus (lip rotten), but due to the overhead of the character at this writing, ya would not want me berbasbisbus.
Press CTRL + F in your HTML, Search Code </ head>. Then place the script under Right on it:
(Select one)
Style 1
Script : <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(http://1.bp.blogspot.com/-0hmGWoHIzzw/T33HKCEE6UI/AAAAAAAABoY/q-hkpq3JFAU/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/AVvXsEgZ2tYWxrEgBcxd2p6kWyMAco8s49lh1c5PyfZxI98SN7s3wbpq9SnMtit9kOaNA0kR4XyYkK4HRTB9EkXg9RqjpulwIf4YLro8sVlicHQkMmnxJIdDGRFO8gAl24E_1MsCOuozh9LCECls/s1600/hover+html+teacher.png);
background-repeat: no-repeat;
color:#F1F1F1;
}
</style>
Style 2.
Script : <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/AVvXsEi4BhMstF0lSqoxHlfdVBhGmaZ6K8YLie6Al4mChwOS6_ub-3c50jp0KUBSZf1QmpDPU3ZD2T_ATQPK3BVVIPdUPlNVoVnVuA68igllzIsv0uoIdWaSb0ZE79r1GX6jsncoWjE4Miw21-PN/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>
Style 3.
Script : <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>
Style 4.
Script : <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>
Style 5.
Script : <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>
Style 6.
Script : <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>
After you, place the code, click on save template. Ane please ente find this tutorial can help in learning How to make Blockquote for posting on the blog. If you have any questions or suggestions, please feel free to comment below. -
Learn the fundamentals of local SEO, location data management the power of SEO on your web by: http://totorseo.blogspot.com/
Posted This Article By : MRS. TOTOR
0 Komentar untuk "How to make a Blockquote to post in the blog"