If you want to put some HTML, JavaScript or code of any programming language in your blogger blog posts then entering that as a simple text will mix it with plain text and that would be pretty hard for readers to differentiate between plain text and code block. To make the code look different from plain text you need to highlight it or simply put it in a frame or a bordered box.

Adding a code block

To put a “code” block in any of your blogger blog posts, you have to first modify your template a bit.

1. Login to your blogger account
2. Go to Layout > Edit HTML

3. Find ]]></b:skin>

and just ABOVE it, add this line of code:

code {background:#EEEEEE; font-family: Trebuchet MS; display:block; border:1px solid #999999; padding:10px;}


Now whenever you want to show some piece of code in your blog post, just put opening and closing <code> tags around the code. Like;

<code>
Put any CODE between these code tags…
</code>

Above code will create a block like this:


Put any CODE between these code tags...


Adding a blockquote block

A “blockquote” block is used when you put some quote. By default almost every blogger template has this blockquote tag included which inserts a left indentation to the quoted text. But in case if your blogger template doesn’t have any blockquote or you want to modify it with a fancy quotation marks around quoted text, then follow the instructions below.

1. Login to your blogger account
2. Go to Layout > Edit HTML

3. Find ]]></b:skin>

and just ABOVE it, add this piece of code:

blockquote { background:url(https://1.bp.blogspot.com/_L3S3cG5x4ys/SwBc0pPQ2MI/AAAAAAAABDM/O64aLmDM8cA/s400/blockquote.jpg) no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;}


Now whenever you want to show quotes in your blog post, just put opening and closing <blockquote> tags around the quoted text. Like this:

<blockquote>
Put a quoted text in between these blockquote tags.
</blockquote>

Above code will show something like this:

Put a quoted text in between these blockquote tags.