How To Customize Blogger Blockquote

Many of My blog readers asked Me which syntax highlighter am I using?, how I'm highlighting the Html codes on my blog?, etc. So I thought of presenting a detailed post on it today. The highlighter which highlighting the html codes on my blog is nothing but the inbuilt Blogger blockquote. I hope most of you might know about the blockquote feature in blogger but however most of you might be struggling while the html codes inside blockquote might spreading out of the blockquote!!. So this tutorial is gonna help both the newbies to blogger blockquote and the one who is struggling to get his blockquoted codes stay inside the blockquote.


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 throught the below tutorial.

How To Customize Blogger Blockquote and highlight codes with it

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

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


3. Replace it entirely with the code specified below.Above lies the style sheet for your blogger  
 blockquote.

.post blockquote{
background:#ffffff url("");
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;
}

.post blockquote{
--------------------
--------------------
--------------------
}
.post blockquote p{
---------------------
---------------------
}
.post blockquote:hover {
---------------------------
--------------------------
-------------------------
}

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 left corner and fit inside blockquote.

4. Save the Template.

Using the Blockquote for highlighting codes.

5. Go to new post or edit 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 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.

Categories: css , Javascript