Receive all updates directly in your mailbox.For joining our NewsletterClick Here!

Liked Us?

X




Beautiful display box for adding HTML and JavaScript Codes inside blogger posts

How to add HTML and JavaScripts to your blogger posts


We quite often require to add the HTML and Javascript codes to the blogger posts.These codes are useful to make your blog more functionable.Now in order to make them distinguishable from the normal posts,we usually highlight them with the different background,so that users find it easy and friendly to use the code in their blogs.Here I present the code that you can add in your blog if you want to add the codes in your blog posts.

* First of all backup your template

* Go to Design>>Edit HTML>>Download Full Template

* Search for  ]]></b:skin>

* Just above that code place the following code

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;
}




* Save the template and you are done

How to Use the Display Box

You can add the display box anytime to your blog posts simply by adding


<pre>

"your HTML or JAVA script"

</pre>


Secondly,in order to make the HTML and JavaScript code user friendly,replace all "<" with &lt; and all ">" with &gt;

And You are done..!!

Further Customization

* If you want to change the background color of the display box,then change "#efefef" to whatever color you want.

* If you want to change the border from "solid",you can make it either "dotted" or "dashed".

* If you want to change the border color then simply replace "A6B0B5" to whatever color you like.


Liked my article?Please Join my Blog Here to stay updated with lots more. 


Having any query,feel free to ask me..!!
 

4 comments:

  1. How can use a beautiful comment box? Like you.

    ReplyDelete
  2. The more web traffic you get, the more money they lose and that revenue has to come after he
    has done the work on himself first. Online or student loan
    based company.

    Also visit my site; Student Loans for People with Bad Credit

    ReplyDelete
  3. rosacea laser treatment Goldthwaite

    Look into my web blog :: Holtville rosacea specialist

    ReplyDelete
  4. Such a nice information about comment box. Thank you for sharing with us.

    Display Boxes

    ReplyDelete