box de pesquisa flutuante no blog

Que tal um caixa de pesquisa no seu blog dentro de um box flutuante,que funciona como uma janela Pop Up que se abre assim que o leitor entra em seu blog .

Criei um script através da ajuda de outros scripts que oferece este recurso e bem simples e util para seu blog pois quando o leitor for procurar o artigo e só digitar e pesquisar.

Para colocar este script basta você seguir as instruções abaixo:

1° para adicionar basta ir em layout, adicionar gadget, e escolher a opção html/javascript e copie o código abaixo e cole de depois clique me salvar:

<style type="text/css">
#topbar
{
padding: 5px 5px 5px 5px;
visibility: hidden;
border: black 1px solid;
width: 340px;
font-family: Tahoma;
position: absolute;
background-color: white
}
</style>
<script type="text/javascript">
var persistclose = 0
var startX = 5
var startY = 5
var verticalpos = "frombottom"


function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}


function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}


function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}


window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}


if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a href="javascript:closebar();"><img border="0" style="float: right;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW0OlW6uj_KQ1iI99bigR8JNMMuIEAFv92hyphenhyphenjzrlU2sei0v7hIZ1GmQHmW0cauuOGWqxrdYNL6rxQQNNBckMijHjs7vJVJ1M6TmKSFPgyNIgRfm45kIWw9nl-ZRVhNDxnma9pADa6N-L7U/" rel="nofollow" title="Fechar janela" /></a>
<a target="_blank" href=""><img border="0" vspace="4" align="left" title="" height="48" src="http://cconsolo.files.wordpress.com/2009/10/lupa.jpg" hspace="4" width="48" /></a>
<center><font color="#000000"><b>pesquisar dentro do blog! <br />digite sua pesquisa agora,para procurar o artigo.</b> </font><form id="searchthis" action="/search" style="margin:0;padding:0;display:inline;" method="get"><input onclick="clickclear(this, 'Pesquisar no blog')" value="Pesquisar no blog" type="text" id="search-box" onblur="clickrecall(this,'Pesquisar no blog')" style="color: #999;" size="20" name="q" /> <input id="search-btn" value="Ok" type="submit" />
</form><span class="Apple-style-span" style="font-size: -webkit-xxx-large;">
</span>
</center><span style='font-size: 65%;font color: #000;text-align: right'>Widget by Rei do Bloguinho<a target='_blank' href='http://reidobloguinho.blogspot.com/2010/04/box-de-pesquisa-flutuante-no-blog.html'><font color="#000000"> Instale este widget</font></a></span></div>
<div class='clear'></div>

não retire os créditos: respeite os créditos do autor do script