Header Ads Widget

ad728

5 Stylish BlockQuote Code For Blogger Blogspot Tutorials

 Stylish BlockQuote Code For Blogger a blockquote or block quotation is an extract in a written document, set off from the foremost text as a distinct. We all quote excellent authors however we all should current these gorgeous words in a more everyday way the use of a stunning blockquote. We have created easy CSS codes for round 14 Blockquotes, which are exceptional in seem and feel. These blockquotes will provide you thinking of how to create your own personalized blockquote for your blogs and net pages. 

5 Stylish BlockQuote Code For Blogger Blogspot Tutorials


These are Following Steps:- 

How to Apply Blockquote Styles in Blogger?

Step 1: At first, backup your template and sign in to your Blogger account and go to the “Theme” section. Now click on the “Edit HTML” button.
5 Stylish BlockQuote Code For Blogger Blogspot Tutorials

Step 2: Find the “<b:skin></b:skin>” and expand it.
5 Stylish BlockQuote Code For Blogger

Step 3: Scroll all the way down and find the ending “]]></b:skin>” code.
5 Stylish BlockQuote Code For Blogger

Step 4: Choose your desired blockquote style from the list below and paste it right above the “]]></b:skin>” as shown in the following image.
5 Stylish BlockQuote Code For Blogger Blogspot Tutorials


Blockquote Style 1:-

5 Stylish BlockQuote Code For Blogger

.post blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;}
.post blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
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;}
.post blockquote em{
font-style: italic;}

Blockquote Style 2:-

5 Stylish BlockQuote Code For Blogger Blogspot Tutorials
 .post blockquote {
background:#f9f9f9;border-left:6px solid #ccc;font-family: Georgia, serif;margin:1.5em 10px;padding:.5em 10px;quotes:"\201C""\201D""\2018""\2019";}.post blockquote:before {color:#ccc;content:open-quote;font-family: cambria, Georgia;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;}

 Blockquote Style 3:-

5 Stylish BlockQuote Code For Blogger
blockquote {
font-size:20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
padding:15px;}

Blockquote Style 4:-

5 Stylish BlockQuote Code For Blogger Blogspot Tutorials


 blockquote {
font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
border-left:3px dashed #9b9b9b;
padding-left: 20px;
padding: 5px;
background-color: #BAC7D3;}

Blockquote Style 5:- 

5 Stylish BlockQuote Code For Blogger Blogspot Tutorials
blockquote:before {
content: "";
font-family: FontAwesome;
margin-right: 4px;}
blockquote {
background: #f4f4f4;
padding: 20px 25px;
margin: 25px 25px;
font-style: italic;
border-left: 4px solid #dfdfdf;
color: #555;}
blockquote:after {
content: "";
font-family: FontAwesome;
margin-left: 3px;}

I hope you enjoy this post and the photos.
Categories:
Similar Videos

0 Comments: