How to Display HTML and Java Script Inside Blog Post

flickr.com

For beginner or amateur blogger like me, will be very difficult to make posting that contains the HTML, CSS, or JavaScript. You might have ever seen a blog post which showing html script in a display box.
So, how to make our blog post able to show HTML or Script?. You don't need to have headache about it. You only need doing some simple steps as follow:

1. Log in to your blogger account
2. Click Layout
3. Then click Edit HTML
4. Backup your template
5. Find ]]></b:skin>
6. Add below script right above ]]></b:skin> section.



pre { background:#c0c0c0; border:1px solid #A6B0BF; font-size:120%; line-height:100%; overflow:auto; padding:10px; color:#000000 } pre:hover { border:1px solid #efefef; } code { font-size:120%; text-align:left; margin:0;padding:0; color: #000000;} .clear { clear:both; overflow:hidden; }



7. Save your template

The code above is for drawing a display box inside the post to show HTML and Java Scripts you want to post. Hemmm.... You can change the length , width ,size and color of the box as well by editing the code . Even you can add an image background by adding image url following color code of display box background.

Now you able to post HTML and Java Script code in your blog post. You can call the display box anytime into your post by writing below code:

<pre> Place your HTML or JAVA Script Here </pre>

But, before you place your HTML or Java Script code, you need to make your code postable by generate your HTML or Java Script  using Parser Tool to make it friendly. Paste your HTML or Java Script inside the box provided and then click make it postable.

And then, copy the generated code and paste between <pre></pre>to make it posted inside display box. The result in your post will be like below image.

Result

Baca Juga: