BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
All the tricks, hacks and treats while enjoying your breakfast.

Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

2 ways to style html codes in your blog posts

View demo.

Once you learn how to add HTML, css or javascript codes to your blogger posts (also called code snippets), the next step is to style it.

customize html codes on blogger

To customize codes, we'll use CSS. It can be done in two ways.

Technique #1. Using <PRE> and <CODE>.
Sohtanaka has given a very detailed explanation on how to dress them up using background images with <pre> and <code> tags. View example below.

add style on blogger html codes

Here is his tutorial.

To see a variety of styles, check out his demo page.

Technique #2. Using <DIV>.
The second technique is almost similar to the first one. The only difference is that, we define the code under <div>, NOT <pre> and <code> tags.

Here is how NewBloggingTipz did it.

How I Customized My Code Snippet?
I applied the first technique with a minor adjustment. Instead of a background image, I used a css trick that shows a "stitched look".

Here is my modified code.

pre {
    padding: 5px 10px;
    margin: 10px 40px 10px 30px;
    background: #2d2d2d;
    color: #fff;
    font-size: 10px;
    line-height: 1.3em;
    border: 2px dashed #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 6px 4px rgba(10,10,0,.5);
    text-shadow: -1px -1px #aa3030;
    overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/

pre code {
 margin: 0 0 0 10px;  /*--Left Margin--*/
 padding: 5px 0;
 display: block;

Here is how I called for it.

insert stylish html codes on blogger

Here is the result.

add customized javascript codes on blogger

Related Websites.
Styling Code Snippets with CSS
CSS3 Stitched Elements
share. comment. subscribe. link.


<< 1 Shared Thought >>


Copy below HTML link to quickly create a link to this post.

back to share

about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.

about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.