How To Add Html And Other Codes To Your Blog Posts

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

Bloggers often do many hacks to their blog themes or templates to give it a professional look. If you run a blog where you post tutorials and use HTML, CSS, JavaScript or any other codes in your posts 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.

 The result will look like this:

As usual,Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

]]></b:skin>

And immediately before it, paste this code:

.rtcv {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV015eMhlVR1VyDuGF5eSvSSNAQLkRZJQXKAYTnVpWYrq2J00xCeCNAE4Urrowt_vZ93tj8wzek7THflBythafof1Atj8zJK-KIgZGHh47DuIRyb8jXIujiKFjARHob3bsZtF9StGB4mk/s1600/royal+tutor+code.gif) repeat-y top left;
border-top : 1px solid #AAAAAA;
border-right : 1px solid #AAAAAA;
border-bottom : 1px solid #AAAAAA;
border-left : 1px solid #AAAAAA;
}

Now save you template to make the changes apply

From now onwards whenever you want to insert some codes in your posts always put it between <div class=”rtcv”> and </div> like these as Shown below:

<div class="rtcv">
HTML Code Here
</div>

That’s all.

Now you can show your code on nice background and give a professional look to your blog .