search

Loading

LATEST:

Friday, 23 August 2013

Place Code Box In Your Blog Posts

Ever wondered how many bloggers and programmers place a code box in their posts.These code boxes are used to differentiate your code from the text of your post,it also provides us to copy the code easily from the post.Follow below steps to add a professional code box to your blogger


CODE BOX TO PLACE YOUR CODE




TRICK:

1)Go to blogger click on template


2)Here we have to edit the template of your blog so first take a backup of your template


3)Now click on edit html

4)Find (ctrl+F) the ]]></b:skin> in the template


5)Add the below code ABOVE the ]]></b:skin> 



.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }


6)Click Save Template

7)Now go to your Dashboard and make a new post on the blog where ever you want to add theProfessional Code Box click oEdit HTML tab, just paste this code:


<div class="code">
 YOUR CODE 
</div>



-------------Thanks for reading for more tricks keep visiting-------------

1 comment: