Thursday, 2 February 2012

How To Add Html And Other Codes To Your Blog Posts

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/AVvXsEj0Pq_5U7vkuDVEBJgPyxOxoVZZY6Pi_BJuNsOZdFT9r9TvwHCbkUA_YoCzXgL_mPJdL-Om76N_eXtDoFgJAGkm02FOoE0TWTB1REZlfmXHlrt8Q8TfrZzo4DsxOcRgotlLLOnvJ0m9LzY/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

1 comments: