• Home
  • Services
  • Facebook
  • Privacy Policy

TricksDaddy

  • Home
  • Services
  • Facebook
  • Privacy Policy

How to Show HTML/CSS Codes on Colored Background in Blogger Posts

Bloggers who own blogs related to web design and development or WordPress or blogger tutorials often write tutorials where they use HTML, CSS, JavaScript or any other code in their posts. If you are among such bloggers then you can show these codes on a colored and professional looking background. It will not only help you to give your blog a professional look but it will also help your readers to easily distinguish the codes used in the post from the other content.

Here are few simple steps to show HTML or CSS code on colored background:

Just follow these simple steps:

Step 1: Sign in to your blog and go to your Dashboard -> Layout -> Edit HTML

Step 2: Now copy the following code and paste it before ]]></b:skin>

.csscode {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #EEEEEE;;
border-top : 2px solid #AAAAAA;
border-right : 2px solid #AAAAAA;
border-bottom : 2px solid #AAAAAA;
border-left : 2px solid #AAAAAA;
}

Have a look at the screenshot:

Step 3: Save your template

Step 4: From now onwards whenever you want to insert some codes in your posts always put it between <div class=’csscode’> and </div>

<div class="csscode">

HTML Code Here

</div>

That’s all.

Now you can show your code on colored background and give a professional look to your blog 🙂

Share On
 Previous Article Give Your Firefox A Look Of Office 2007 With Office 2007 Black Theme
Next Article   Easily Generate Animated Scrolling Typewriter Text

12 Comments

  1. Gagan
    March 20, 2009 at 8:00 pm

    GR8 tutorial !! going to use this now !!

    Thanks Simran

  2. Bariski
    April 5, 2009 at 12:16 am

    Nice tut mate. Thanks, I have also made one on my own, hope you like it. See ya around.

    Professional Looking Code Box:
    Professional Looking Code Box

    Regards:
    TutZone

  3. Simran
    April 5, 2009 at 9:14 am

    @ Bariski

    Its really nice 🙂

  4. indomaniac
    May 7, 2009 at 11:01 am

    hi Simran thanks for this tricks

    indomaniac’s last blog post..Tindakan Pemerintah terhadap Seranagn Flu Babi

  5. Wasim Mughal
    August 17, 2009 at 12:05 am

    Buddy!

    This is not working in my template!

    Check it!
    .-= Wasim Mughal´s last blog ..Best Men ever in the World =-.

    • Simran
      August 17, 2009 at 11:26 pm

      I have visited your blog. You are not using this code there !!!

  6. Bruce Thompson
    January 26, 2010 at 12:09 pm

    Working nicely on my my blog.

    Thanks Simran
    .-= Bruce Thompson´s last blog ..Enter Vim… =-.

  7. Priyank Ahuja
    March 16, 2010 at 11:17 am

    Gr8 man thanks for this……i was searching for long ….Thankz again

    • Simrandeep
      March 16, 2010 at 11:47 am

      I’m glad that you find it useful 🙂

  8. outsource website design delhi
    April 5, 2010 at 4:31 pm

    This is really worthy for me. Thanks for sharing such a nice information.

  9. Sanjay
    May 8, 2010 at 5:06 pm

    This will surely help to make a look of the professional and attractive at the same time.

  10. Atif
    February 26, 2011 at 12:40 pm

    So much useful tutorial you post. Thanks

© Copyright. Theme by BloomPixel.