Writing code in post part 2/2.
In first part we told you how to write html/javascript code in blogger blog post. In this part we will show you how to properly write the code in post i.e. how to make your code standout the regular text.
After you have placed your code in the post, highlight it so that users can easily spot it. Often while reading others post I have face this peculiar problem. The authors do not highlight their code. This is specially problematic when they are referring to a single line of code. You can apply a lot of styles make it bold, increase or decrease font, change the font altogether... Pretty old stuff...isn't it. This is how we like it.Consider this (Style 1)
//your code here
Or this (Style 2)
//your code here
Or even this... (Style 3)
Title here
//your code here
Neat code presented elegantly. Read on to know how to apply these styles.
Code container style 1
- Copy the code
- Goto your template. Dashboard > layout > Edit HTML
- Search the line (just ctrl+f it).
- and immediately above it paste the code copied in step 1.
- Save your template.
/* Code container by http://bloggerfunda.blogspot.com */ .codecp{ border: rgb(79,129,189) 1px dotted; background-color:#efefef; padding: 3px; min-width: 98%; }
]]></b:skin>
<div class='codecp'>
//your code goes here
</div>
For e.g. if you are writing <html></html>, you need to write it as//your code goes here
</div>
<div class='codecp'>
<html></html>
</div>
<html></html>
</div>
Code container style 2
- Grab the image from here and upload it to your mydatanest account. Make sure you keep the image access public. Copy the hotlink url.
- Replace url of image here text in the code below with url of image uploaded in step 1.
- Copy the above modified code.
- Goto your template. Dashboard > layout > Edit HTML
- Search the line (just ctrl+f it).
- and immediately above it paste the code copied in step 3.
- Save your template.
]]></b:skin>
<div class='codes'>
//your code goes here
</div>
For e.g. if you are writing <html></html>, you need to write it as//your code goes here
</div>
<div class='codes'>
<html></html>
</div>
<html></html>
</div>
Code container style 3
- Grab the image from here and upload it to your mydatanest account. Make sure you keep the image access public. Copy the hotlink url.
- Replace url of image here text in the code below with url of image uploaded in step 1.
- Copy the above modified code.
- Goto your template. Dashboard > layout > Edit HTML
- Search the line (just ctrl+f it).
- and immediately above it paste the code copied in step 3.
- Save your template.
]]></b:skin>
<div class='code'>
<p>Title here</p>
<div>
<code>
//your code here
</code>
</div>
</div>
For e.g. if you are writing <html></html>, you need to write it as<p>Title here</p>
<div>
<code>
//your code here
</code>
</div>
</div>
<div class='code'>
<p>HTML example</p>
<div>
<code>
<html></html>
</code>
</div>
</div>
<p>HTML example</p>
<div>
<code>
<html></html>
</code>
</div>
</div>
Very useful post. I was searching a lot about how to show source code, before I settled on my format. I like the input boxes. That's also a good alternative sometimes to display code.
ReplyDeletewhy this is not working on my blog http://techstap.blogspot.com/
ReplyDeletehelp admin please
hai frnd ...i need some help .if i want to dispaly my code with color for all post how can i do it..
ReplyDeleteits not working dude
ReplyDeletefantastic job on writing this...
ReplyDeleteIndian Business Directories of Manufacturers Exporters&Suppliers
Very good one and helpful.
ReplyDeletepeeptrendz