Post Link Sharing: Blockquote

Showing posts with label Blockquote. Show all posts

5 Stylish BlockQuote Code For Blogger Blogspot Tutorials

January 13, 2021

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.

Step 2: Find the “<b:skin>…</b:skin>” and expand it.

Step 3: Scroll all the way down and find the ending “]]></b:skin>” code.

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.

Blockquote Style 1:-

.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:-

.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:-

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:-

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:-

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.