M any 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 tho...

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.