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

Tagged as: Blogger