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 h... thumbnail 1 summary

10:58:00 AM

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

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.

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJyXbM7y2hQIiLAKuIBhz4JOoKLMDdPpK39Ye3Jv8d_q2ATmkK3uVc0YmiadAPb-jiUE7D26oVAOlJOIXlZ1GcRiz_NWvmCGA1iQ5zYXoyJTig79RnhOz4x3QC-2i6ukbVZSGDuBZ_Qs/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;
}