Yusuf Ozturk » bing search on your website

Blogroll

Badges

Community

Bing search bar for your website

Posted in Hayattan | No Comment | 1,970 views | 03/06/2009 10:40

You can add bing search on your website.

HTML Codes:

1
2
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml dir="ltr" class="ltr SignedIn IE IE_Win Win6 IE_M7 IE_D0  Unmanaged BottomUnmanaged">
<div class="c_hf" style="background-image:url(http://www.yusufozturk.info/wp-content/themes/limauorange/images/sl_bing.png);background-position:center right;background-repeat:no-repeat;"><form id="c_search" action="http://www.bing.com/search" method="GET" target="_top"><label for="c_hsv" style="display:none;">Search on Web</label><input id='c_hsv' class="c_ml TextItalic" value="Search on Web" autoComplete="Off" type="text" name="q" onmousedown="try{if($menu.current != this.menu){$menu.closeCurrent()}}catch(e){}" onmouseup="try{if(this.menu){menu.show();return $f.cancelEvent(event)}}catch(e){}" onfocus="if(this.s!='t'){this.value='';this.className = 'c_ml c_fia';this.s='t';this.parentNode.parentNode.style.backgroundImage = '';}" onblur="if(this.value ==''){this.value='Search on Web';this.className = 'c_ml TextItalic';this.s='';this.parentNode.parentNode.style.backgroundImage = 'url(http://www.yusufozturk.info/wp-content/themes/limauorange/images/sl_bing.png)';}" /><input name="form" value="WLMLQB" type="hidden"/><a id='c_hsbt' href="#" onclick="document.getElementById('c_sbt').click()" class="c_nootl glyph"><span><img src="http://www.yusufozturk.info/wp-content/themes/limauorange/images/bing.png" alt="Search" title="Search" /></span></a><input id="c_sbt" style="display:none" type="button" onclick="searchTheWeb()"/></form></div>

CSS Codes:

.c_hf{border:1px solid #888;padding:2px 30px 4px 5px;display:inline;background:#fff;position:relative;}
.rtl.IE .c_hf{top:1px;}
.IE_M6 .c_hf{padding-bottom:2px;top:1px;vertical-align:top;zoom:1;}
.rtl.FF_M2 .c_hf{top:-6px;}
.c_hf form{display:inline;}
.Safari .c_hf{padding-top:1px;padding-bottom:3px;display:inline-block;}
.Safari .c_hf input{margin:0px;}
.IE_M7 .c_hf{padding-top:1px;padding-bottom:1px;zoom:1;}
.c_hf input{border:none;width:190px;background:transparent;color:#555;line-height:1.2em;}
.glyph{display:block;position:absolute;height:16px;width:16px;top:50%;right:3px;}
.Firefox .glyph{top:45%;}
.glyph span{height:16px;width:16px;display:block;overflow:hidden;position:absolute;top:-8px;left:0px;}
.glyph img, .IE_M6 .glyph span span{display:block;position:absolute;top:0px;left:-18px;}
.c_hf input.c_fia{color:#000;}
.c_hf .c_m{width:226px;}
.Firefox.rtl .c_hf .c_m{width:219px;}

You can optimize codes. Maybe some of them could be unnecessary. Have fun with Bing!