Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Add Html And Other Codes To Your Blog Posts. And How To Style And Customize The Code Box.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add Html And Other Codes To Your Blog Posts. And How To Style And Customize The Code Box.

How To Add Html And Other Codes To Your Blog Posts. And How To Style And Customize The Code Box.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


Hi all, few days ago i made and added here a new tool called Html Character EnCoder., For more info about this tool and to know more about how to use it please Check out this tutorial.
The previous tutorial let you know in general way how to add a code, for example HTML code. to blogger posts.
But today we’ll discuss and learn how to make you code box looks better and how you can make it looks very professional.

So, what’s now in this tutorial

In the previous tutorial i told you how to add code to your blogger post but in this tutorial i’ll teach you how to style your code box and how to post the code in a professional way.
If you still don’t understand please click here to see a demo for the final result.

so please concentrate with me and lets do it.

Step 1. Adding the box style code for your template.

In this step the first thing to do is to choose on of the following four styles for your code box.
Once you see your suitable one, please copy it’s code and continue reading.

Box Style 1

Blogger Code Box Style 1

The box style 1 code

.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://3.bp.blogspot.com/_JwD5r652h00/Sz4Esk9Y2RI/AAAAAAAAATw/xFgoODUfT-o/s1600/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
Box Style 2

Blogger Code Box Style 2

The box style 2 code

margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://4.bp.blogspot.com/_JwD5r652h00/Sz4NtBq_x2I/AAAAAAAAAUQ/Yhuy_jUjoGg/s1600/codeview2.gif) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
Box Style 3

Blogger Code Box Style 3

The box style 3 code

.code {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4PoFSlT4I/AAAAAAAAAUg/OxL6lQ-En1I/s1600/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;

Once you Choose your favorite box, copy it’s code and go to your blogger account, navigate to Dashboard >> layout >> edit html > and find the following code and paste your code box af

Box Style 4

Blogger Code Box Style 4

The box style 4 code

.code {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4WJqXLy5I/AAAAAAAAAUo/tl0XwXfvErQ/s1600/codesbg1.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;

After you find your favorite codebox please copy it’s code and go to your blogger account. navigate to Dashboard >> layout >> edit html, and find the following code then paste your codebox code before it.


Note that, you have to copy and paste your code box code before the above code.

Step 2. Customizing your code box style.

In this step you can customize your code box style to give it your unique colors, And you can pass this step, it’s not a must to do step.

If you’ll pass this step please click Save Template
Now and move to step 3, Or just keep reading.

To customize your box first you have to open our html hex color codes generators.

Then if you have noticed that the box code have three values in red, green and blue color, you can change this values to your favorite by generating your color code using our color codes generator.
and here is what each value responsible for

Red : Box Main Background.
Green : Text Color.
Blue : Border Color.

After making you modifications Please click Save Template

Step 3. How To Add Any Code For Your Blog Posts.

This step explained in my previous Click here to see it, .
But the difference here is that you wont paste the generated code directly in your post, you have to put it between the following tags,

<div class="code">
Your generated code should added here

I hope you all got it and understood how is it work,

and Again here is the a demoblog to see it in action, and please don’t hesitate to leave your comments for any questions.

Liked It ? Please Share


14 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Ocim says:

    great tips, very interesting for me thanx

  2. BEBEN says:

    wkwkwkwk…ocim you here???
    max…nice, i like your pic

  3. SmashDesign says:

    Great post for every blogger !
    im using SyntaxHighlighter

    Thanks alot

  4. HayHay says:

    Hey Max, I’m not quite sure what this does… can you explain?

  5. Max says:

    @ Ocim, Cemination, BEBEN and SmashDesign Thanks for your amazing comments, i’ll keep up all my work for you.

    @ HayHay please read the info again, this is help you to add html code to your post without being transleted to a styled text or area.

  6. Sachin says:

    Great Job Great Job love u……….

  7. snzz says:

    cannot add css codes!

  8. snzz says:

    this style is using in PunBB3

    /* Code block */
    dl.codebox {
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #d8d8d8;
    font-size: 1em;

    dl.codebox dt {
    text-transform: uppercase;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 3px;
    font-size: 0.8em;
    font-weight: bold;
    display: block;

    blockquote dl.codebox {
    margin-left: 0;

    dl.codebox code {
    /* Also see tweaks.css */
    overflow: auto;
    display: block;
    height: auto;
    max-height: 200px;
    white-space: normal;
    padding-top: 5px;
    font: 0.9em Monaco, “Andale Mono”,”Courier New”, Courier, mono;
    line-height: 1.3em;
    color: #8b8b8b;
    margin: 2px 0;

    /* Code block */
    dl.codebox {
    background-color: #FFFFFF;
    border-color: #C9D2D8;

    dl.codebox dt {
    border-bottom-color: #CCCCCC;

    dl.codebox code {
    color: #2E8B57;

    html code

    Code: Select all<style type="text/css">body{background-image:url("/images/image.gif");background-repeat:no-repeat;background-attachment:fixed}</style>

    and it works!

  9. laxman says:

    hey ..admin…sick of this problems …am seacrh this problem in google also but didnt find….my problem is ..code are not shown in proper way in my posts.they go higleady-pigleady…….see myblog posts amd help me .plz …..if u solve this problme ..i will put your banner in my site ….plz help me

  10. Max says:

    @ laxman, don’t worry dude, i’m ready to help, but i don’t understand what exactly do you need, it’ll be easier if you can send me screen shot.

  11. Dwi Wibowo says:

    thank you for the information….

  12. Michal says:

    When i want to save blogger post, blogger show me that LINK is not alowed… What can i do?

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here