How To Customize Blogger Blockquote


How To Customize Blogger Blockquote on your blog easily?
Today we are providing you how to highlight the Html codes on your blog. You
can highlight the html codes on your blog with change inbuilt Blogger Blogckquote.
Blogger have already blockquote feature but it’s provide white background so
you need might changes to show blockquotes in your post. In this article we will
help you to customize blogger blockquote.
Customize Blogger Blockquote

Customize Blogger Blockquote

First please search a good looking background image for your
blockquote, after search an image please follow below steps to customize
blogger blockquote:

Step 1

Go to Blogger dashboard and click on Template at the left panel
than click on Edit HTML button as shown in below picture.Blogger Blockquote

Step 2

Now search below code with the help of CTRL + F:

.post blockquote

Step 3

Now replace above code to below code:
.post blockquote{
background:#ffffff url(“http://3.bp.blogspot.com/-oJNflSBHEV0/T3XdRIksU7I/AAAAAAAAAVU/Mhcx5iVZHgU/s1600/bt+html+holder.jpg“);
float:right;
padding:0;
border: solid 1px #EFEFEF;
margin-right:4px;
margin-left:4px;
margin-top:15px;
margin-bottom:30px;
width:570px;
max-height:650px;
overflow:auto;
padding:10px 0;
}
.post blockquote p{
padding-left:55px; margin:0;
}
.post blockquote:hover {
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

Tips: Replace Image link with your image link. You can also change
width and height as your website.

Step 4

Now click on Save Template button.

You can add blockquote with click on blockquote icon to
select/highlight codes which you want to blockquotes.

Leave a Reply

Your email address will not be published. Required fields are marked *