Pages

How To Add "Code" And "Blockquote" Blocks in Blogger Blog Posts

1)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...



1)Adding a blockquote block 

To put a “blockquote” 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 piece of code:

blockquote { background:url(http://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:

<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.


 

 





 

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

1 comments: on "How To Add "Code" And "Blockquote" Blocks in Blogger Blog Posts"

K3LVIN MITNICK said...

Not working,
Even i do it word by word. How to fix ?
Demo:
http://www.k3lvinmitnick.co.cc/2011/04/how-to-create-facebook-like-button.html

Post a Comment