Add HTML and java Scripts Inside Blogger posts in a Display Box

It is very difficult for anyone using Blogger blogs to show HTML codes and JavaScript inside the blog posts . You might have also seen people showing the scripts in small display boxes of fixed length and width. Now after applying this Blogger trick , you would be able to show HTML and JavaScript inside Blogger posts with custom display boxes .



Click on layout of the blog in which want show HTML or JavaScript and now select edit HTML .Before you apply any Blogger hack ,remember to download and save your full template.Now tick the expand widget templates and move onto the selection shown below ( towards the end of CSS code )

Otherwise you can press Cntrl+F and paste ]]></b:skin> on appearing search box then enterPaste the following CSS code above that line .

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

The above code is for drawing a display box inside the Blogger post to show HTML and JavaScript.You can change the length ,width ,size and color of the box , back ground image etc. by editing the CSS code. After adding this code you can call the display box anytime into your post by following next step

<pre>

"your HTML or JAVA script"

</pre>

In Blogger in draft , there would be a problem with this HTML and JavaScript display box . For fixing that,Expand Post options from the Blogger text editor ( On the bottom left corner ) . From the compose settings, select Interpret typed HTML . Now everything would appear fine

Before you add "your HTML or JAVA script " make it post friendly by following this linkInside the box provided paste the script and click make it friendlyNow copy the generated code and paste between

<pre> & </pre>

to keep it inside display box

Making the script postable is the only requirement if you plan to show the HTML or Java Script alone , without a display box.

Please leave a comment if you like this post or subscribe to this blog via RSS or Email.

Add HTML, CSS, or Any script in Blogger Posts

I thought to post about Adding Scripts to Blogger posts as i think many of the people are facing problem, when they add a Html script to their post then that post after publishing comes to its layout........... to stop blogger from doing that you should do a simple and an easy step with your html.

Add < instead of < and > instead of >

For example

you i wanna add this html to blogger post

<p align="left"><form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">

I would change those starting and ending tags

like this:

p align="left" > form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get"

Please leave a comment if you like this post or subscribe to this blog via RSS or Email.

Adding Blogger Search Box

Hi Friends...
This post is about adding a Blogger blog search box to your blog. Although Google Blogger have a Nav Bar at the top of blogs.... But if you want to add another search Box ( blogger search box) to the area of your then let me show you

Go to your Blogger account->Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-


<p align="left"><form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get"><strong>NAME OF YOUR BLOG<br/></strong><input id="b-query" maxlength="255" name="q" size="20" type="text"/><input id="b-searchbtn" value="Search" type="submit"/></form></p>

Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size. The above example of a width size="20" and value="Hit" will give you this:-

Search Here

Whereas a width size="30" and value="Go" will give you this:-

search here

The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.

Please leave a comment if you like this post or subscribe to this blog via RSS or Email.