Simple code highlighter for Blogger blog

I have designed a simple and light code highlighter for blogger blogs. It has only few lines of codes. I am pretty sure that your page load speed won't be effected by this small css code. In this description I have came out with two styles, one is grey coloured
and other is a shade of black. It also have an ease hover, which makes your code more professional. The code has been kept so simple that anyone can modify it and highlight their codes in their own way. As for example changing the hex color of background-color results a new background for you. Similarly, changing the font-family results a new font style, so on.

Lets have a look what I am going to show

DEMO

Follow the following steps
1) Find out the tag ]]></b:skin> on your template and place the following codes just above it

.post blockquote {
background:#eeeeee;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-radius:5px;
font-size: 0.9em;
font-family: Courier New;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}
.post blockquote:hover{background:#f9f9f9;
}

For the black background

.post blockquote {
background:#3a3a3a;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-radius:5px;
font-size: 0.9em;
font-family: Courier New;
color: #F2F2F2;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}
.post blockquote:hover{background:#585858;
}

2) Now whenever you want to highlight codes in your post use the blockquote symbol available in the post editor tool

That's all about highlighting codes with the help of post blockquote. If you get any problem. Write below in the comment section.