Now Reading
How To Customize Blogger Blockquote and highlight codes with it

How To Customize Blogger Blockquote and highlight codes with it

by AdminAugust 27, 2016

Firstly get a big size image of your own or you can even use some best texture background for blockquote. After preparing an image for it, kindly go through the below tutorial.


1. Go to blogger dashboard –> Template –> Edit Html.

2. Find for .post blockquote and you will notice some style codes like this.

.post blockquote{
.post blockquote p{
.post blockquote:hover {

3. Replace it entirely with the code specified below.

.post blockquote{
background:#ffffff url(““);
border: solid 1px #EFEFEF;
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;

Above lies the style sheet for your blogger blockquote.

Blogger Blockquote Customization

Replace IMAGE LINK with the Url of your desired image.
Change width:570px; to your desired width.
Change max-height:650px; to the maximum height of you prefer and a scroller starts after this height.
Modify padding-left:55px; to get your text inside blockquote to stand away from the left corner and fit inside the blockquote.

4. Save the Template.

Using the Blockquote for highlighting codes.

5. Go to a new post or edit an older post.
6. In the post editor, write some bulk codes –> select/highlight all those codes and click on the blockquote icon shown like this.


7. Just before publishing your blog post, switch to HTML mode of the post editor and search for <blockquote> tags, make the changes specified below.

Include <p> tag to opening <blockquote> i.e., <blockquote><p>
Include </p> tag to closing </blockquote> i.e., </p></blockquote>

8. Finally publish your blog post and view it.


This is one of the very easy tutorials and this saves you from using slow loading syntax highlighters on your blog and also allows you to write the style of it on your own. Suppose if you get messed up while specifying the margins, paddings or anything., feel free to ask Me in the comment section below and I will help you further. Till that take care.

Happy blogging!!!

Please wait...
About The Author

Leave a Response