Could not EMBED the HTML text in your posts! WORRIED???
Use this Utility HERE!

Monday, June 8

EMBEDING THE HTML & JAVASCRIPT CODE INSIDE POSTS USING DISPLAT BOXES

Last time I told HOW TO EMBED HTML TEXT IN BLOGGER POSTS, there an APPLICATION was used, here this is also used.

Today I will tell you the way to show that HTML & JavaScript Code in Custom Display Boxes. The thing to do is that some code should be pasted in the template code.

HOW?

Here is the PROCEDURE!

NOTE: Before doing this, you must download your template code, so if some mistake took place, you could reload your template.

-Go to LAYOUT
-Select EDIT THML
-Tick the box just before Expand Widget Template
-Find ]]></b:skin> in the template code and press ENTER Button at start of this line.
-Paste the following CSS code above that line (as shown in picture):


pre
{
background:#efefef;
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;
}





This Trick will draw boxes for HTML & Javascript codes with fix width & hieght, but you can fix it by editing the values in the given code as per your requirement. The boxes are not shown automatically, ou have to call them with some easy step as follows:

<pre>
"Your HTML or Javascript Code"
</pre>

Now here is the usage of that APPLICATION, i told at the start of the post. This utility provides you the translated HTML code of your desired HTML Code which you want to show in the post. Get that translated code, paste it between <pre> & </pre>.

If you like this post just DIGG IT!

0 Comments:

Post a Comment

Type Your Words Here!