Colocando Previsão de Tempo no Blog

Acredito que, entre muitos acessórios para blogs que postei esse e uns dos melhores, pois e bastante interessante este Gadget, pois muitos visitantes tem curiosidade de olhar a previsão do tempo quando tem oportunidade.E e bastante excelente para blogs ou sites de notícias ou especificamente que fala de alguma região ou cidade.

Bom escolhi aqui três sites que fornece o Gadget de previsão de tempo.Todos eles são bem fácil de aplicar, basta gerar o código e copiar, e depois vá em "Layout" e depois "HTML/javascript" cole o código e salve, seguindo o mesmo procedimento simples.

01- Tempo Agora

02- Clima Tempo

03- Centro de Previsão de Tempo e Estudos Climáticos

Mas como falei no inicio tente associar bem esse Gadget ao tema do seu Blog, pois cada tipo de Blog exige um comportamento diferente.

Gostou da postagem ?, então deixe sem comentário e curta nossa Página no Facebook clique aqui

► Post Completo

Colocar Botões de Compartilhamento do Blog

Já publiquei varias postagens ensinando a colocar botões de Redes Sociais, Hoje vou mostrar a vocês como colocar os botões feito pelo próprio Blogger, como exemplo mostra a imagem abaixo:

Estes botões você pode mostrar entrando na página "Desing de modelo ou Layout" e clique em "Editar" na aba postagens no blog e marque a opção "Mostrar botões de compartilhamento" , Mas para funcionar perfeitamente precisa de um código html, e o que nós vamos aprender agora.

 Antes de tudo u recomendo que Faça o Backup do template, depois de fazer entre na página "Modelo" e vá em "Editar HTML' e escolha a opção "Expandir modelos de Widgets" e procure pelo seguinte código:

 <div class='post-header-line-1'/>

 Ou se não achar procure por :

 <post.body/>

 E adicione o código a seguir abaixo dela :

 <div class='post-share-buttons'> <b:include data='post' name='shareButtons'/> </div>

 Depois de ter colocado o código visualize e se ficar salve, e para mudar o lado em os botões fica troque left por right.

 Fonte:Dicas Para Blogs (Devo Todos os créditos a ele)

► Post Completo

Criando Banners Online

A utilização de banners e uma forma publicitária mais comum na internet, muito usado para divulgações e fazer parcerias entre sites, por isso e recomendado seu blog ou site ter um banners que ajuda a aumentar as visitas.


Se você não tem nenhum programa de para criar banner leia este post e aprenda a criar banners online totalmente grátis e fácil.

»Veja esse vídeo tutorial: Criando banner online

Com o site BannerFans você consegue fazer banners online em poucos minutos sem precisar baixar programa nenhum, antes de começarmos verifique se o site esta em português, de uma olhada no canto superior a direita te um menu para você escolher o idioma, assim facilita fazer o banner.

Para criar o banners basta usar umas para escolher as opções:

► Layout: lá você configura o tamanho, cor ou o preenchimento de fundo do banner e os estilos de degrade:

► Texto: use line 1 e line 2 para escrever o que desejar pode ser o nome do seu site, você também pode usar somente uma se quiser ou até mais, para alterar o tipo de letra clique sobre a seta ao lado do nome da fonte, e ajuste o texto no banner clicando e arrastando o texto.

Obs: enquanto estiver configurando o seu banner clique no botão "atualizar meu banner" para visualizar:

► Efeitos: nesta aba podemos colocar sombreamento no texto, bordas ou brilho.

► Bordas: nesta colocamos as bordas do banner e não do texto, ou seja essa borda aparecer no tamanho do banner inteiro em contorno dele.

► Formata: Aqui você vai escolher o formato que você salvará o banner(Sua imagem), recomendo que use o formato .JPG por que fica mais rápido o carregamento da imagem no blog.

depois de ter editado o banner e só clicar no botão "Banner Download" para fazer o download da imagem no formato que escolheu, ou você pode clicar em "Obter os códigos" que também e uma boa opção pois o seu banners será hospedado automaticamente no site.

Veja o exemplo do nosso banner abaixo:

► Post Completo

Twitter button para blog - Botão retweet

Twitter agora lançou uma novidade que e o seu próprio botão retweet (Botão enviar postagem do blog para o Twitter) ele veio com um estilo bem legal.
Para colocar entre na página do Tweet Button (lembrando que você deve estar logado com sua conta no Twitter)
Escolha o botão que preferir. Recomendo que não altere nada nas configurações: Twitter text, URL e language, seria interessante mudar o idioma mas não tem a opção português.

Depois de ter escolhido o modelo e de ter feito as configurações copie o código que estar no final da página e entre no blogger ► "Modelo" ► "Editar HTML" e marque a opção "expandir modelos de Widgtes" e procure por: <data:post.body/> e cole o código junto

Depois salve as alterações.

► Post Completo

Colocar artigos em áudio do blog

Imagine você colocar um recurso que o invés de ler o poste fosse ouvir.Bom, isso já e possível fazer com a ajuda do vozMe.

O vozMe é um serviço que permite transformar seu texto em áudio de uma forma bem simples.

► Instalando

Basta entrar no Blogger e ir na aba ► "Desing" ► "Editar Html", e marque a opção "Expandir Modelos de Widgets". e procure pelo seguinte trecho:

<div class='post-footer-line post-footer-line-3'>

E logo abaixo deste código cole o seguinte:

<script src='http://vozme.com/get_text.js' type='text/javascript'/><a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"pt\",\"ml\");"' href='javascript:void(0);' style='margin-left:1.5em;'>((•)) Ouça este post</a>

Obs: você pode trocar o trecho destaco em vermelho por fm, para que a voz seja feminina. E o destaco em verde e o texto que será exibido altere pelo texto desejado.

Veja o exemplo da imagens abaixo:

Para colocar outro modelo use o seguinte código:

<div id='voice'><script src='http://vozme.com/get_text.js' type='text/javascript'/> <a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"pt\",\"ml\");"' href='javascript:void(0);'><img src='http://vozme.com/img/paper_sound32x32.gif' align='left' alt='' border='0' style='margin-right:0.4em;'/></a>
<a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"pt\",\"ml\");"' href='javascript:void(0);' style='font-size:10px;'>Ouça<br/>este post</a>
</div>

Obs: Troca os texto destaco em vermelho para alterar a voz, e o verde e o link da imagem exibida.

Veja o exemplo da imagens abaixo:

Após ter escolhido o modelo salve as alterações feitas e pronto, ele traduzirá automaticamente cada artigo do seu blog.

► Post Completo

Adicionar Widget do twitter no blog

Que tal colocar um Widget que mostra suas postagens recentes no Twitter no seu blog, muito bom e fácil de colocar basta seguir as instruções abaixo.

Bom tem o modelo normal como mostra a imagem acima e você também pode fazer algumas alterações como as cores e a largura.

1° Antes de tudo faça seu para entrar no Twitter, e vá até o final da página e clique em "Goodies".

2°  Na próxima página clique em "Widgets", como mostra a imagem abaixo:

3° No menu a esquerda escolha a opção "My Website" e depois em "Profile Widget", nessa tela que aparecerá você verá logo de cara o Widget ao lado, mas você pode alterar o modelo usando os menus:

Settings ► Se nome de usuário de Twitter
Preferences ► Exibir ou não o avatar e o número de Tweetes mostrados e outros
Appearance ► Modifique a cor e aparência
Dimensions ► Tamanha (largura)

Enquanto você faz isso clique no botão "test settings" para visualizar as mudanças feitas, depois que terminar clique em "finish & Grad code" que mostrará o código para pegar, feito isso e só você ir em "Design" ► "Adicionar Gadgte" ► "html/javascript" e cole o código dentro e salve!


Agora que esta tudo feito os seus visitantes poderão ver e acompanhar pelo seu blog as suas atualização no Twitter.

► Post Completo

Widget Botões Sociais Sexy Bookmark

Que tal colocar ícones das principais redes sociais Bookmarks no final de todas as postagens do blog.
Quando você criar um post, se o visitante gostar ele pode ele pode adicionar ou "favoritar" o seu artigo compartilhando com outras redes sociais compartilhando com outros usuários.

Este acessório foi criado por Digão, do Blogando 2.0 E agora vou esta repassando pra vocês.

Bom e bom lembra que antes de qualquer alteração, e sempre bom backup do seu Template para evitar certas coisas.

1° Passo
Entre na edição html do seu blog e marque "Expandir Modelos de Widgets" e procure pela tag </head>
e cole o código abaixo logo ACIMA dela:

<style type='text/css'> div.sexy-bookmarks { height:54px; background:url('http://i33.tinypic.com/2bdy8k.png') no-repeat left bottom; position:relative; width:540px; }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom; position:absolute; right:-17px; }
div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; }
div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; }
div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; }
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important; }
.sexy-furl { background-position:-300px top !important; }
.sexy-furl:hover { background-position:-300px bottom !important; }
.sexy-digg { background-position:-500px top !important; }
.sexy-digg:hover { background-position:-500px bottom !important; }
.sexy-reddit { background-position:-100px top !important; }
.sexy-reddit:hover { background-position:-100px bottom !important; }
.sexy-stumble { background-position:-50px top !important; }
.sexy-stumble:hover { background-position:-50px bottom !important; }
.sexy-delicious { background-position:left top !important; }
.sexy-delicious:hover { background-position:left bottom !important; }
.sexy-yahoo { background-position:-650px top !important; }
.sexy-yahoo:hover { background-position:-650px bottom !important; }
.sexy-blinklist { background-position:-600px top !important; }
.sexy-blinklist:hover { background-position:-600px bottom !important; }
.sexy-technorati { background-position:-700px top !important; }
.sexy-technorati:hover { background-position:-700px bottom !important; }
.sexy-myspace { background-position:-200px top !important; }
.sexy-myspace:hover { background-position:-200px bottom !important; }
.sexy-twitter { background-position:-350px top !important; }
.sexy-twitter:hover { background-position:-350px bottom !important; }
.sexy-facebook { background-position:-450px top !important; }
.sexy-facebook:hover { background-position:-450px bottom !important; }
.sexy-mixx { background-position:-250px top !important; }
.sexy-mixx:hover { background-position:-250px bottom !important; }
.sexy-script-style { background-position:-400px top !important; }
.sexy-script-style:hover { background-position:-400px bottom !important; }
.sexy-designfloat { background-position:-550px top !important; }
.sexy-designfloat:hover { background-position:-550px bottom !important; }
.sexy-syndicate { background-position:-150px top !important; }
.sexy-syndicate:hover { background-position:-150px bottom !important; }
.sexy-email { background-position:-753px top !important; }
.sexy-email:hover { background-position:-753px bottom !important; } </style>

2° Passo
Agora vamos aplicar os ícones no seu blog, para isso temos que fazer uma pequena configuração no seu template, volte na edição html do seu blog e marque "Expandir Modelos de Widgets" e procure pela tag <div class='post-footer'>
E cole o código a seguir logo ABAIXO desta tag:

<!-- NÃO RETIRE OS CRÉDITOS!!! -->
<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks'><ul class='socials'><li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Delicious'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Digg This Post'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Technorati'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Reddit'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumble This Post'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on DesignFloat'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Twitter'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Furl'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/naeemnur' rel='nofollow' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Email'/></li>
</ul><span class='sexy-rightside'/></div><div class='sexy-link'><span style='font-size: 60%'>Widget by <a href='http://blogando20.blogspot.com/' target='_blank' title='Dicas,Templates e Tutoriais'>Blogando 2.0</a></span></div></b:if>
<!-- NÃO RETIRE OS CRÉDITOS!!! -->

Agora salve !


Este botões que eu postei agora eles tem um efeito que ao passar o mouse em cima cada icone sobe.


E bem legal espero que gostem !

► Post Completo

Tradutor com bandeirinhas redondas

Tradutores no blog e um recurso que você não pode deixar de usar pois e sempre bom ter por que nunca vamos saber quando alguém de outro país vai acessar o seu blog.

Criei esse novo esse novo modelo muito bom e util para você, bom para colocar o Gadget no seu blog vá em layout, adicionar gadget, e escolha a opção html/javascript e insira o código abaixo, o bom de tudo e que você não precisa fazer nenhuma alteração basta colocar e salvar.

<div align="center"><table border="0" cellspacing="0" cellpadding="0" width="262"><tbody><tr><td>


<table border="0" cellspacing="0" cellpadding="0" width="260"><tbody> <tr> <td align="center" valign="top"><a href="http://www.blogger.com/rearrange?blogID=5272967381127903624&action=editWidget&sectionId=footer2&widgetType=null&widgetId=HTML6#" onclick="window.open('http://translate.google.com.br/translate?hl=pt-BR&sl=pt&tl=de&u='+window.location.href)"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Traduzir para Alemão" border="0" src="http://public.bay.livefilestore.com/y1pEXyZCQvumrcV_gWcZYyYbwsWdLpAtBhhXbBoahfkmRcOWLUXkH8dbXrRJ6hVp0m5BbpAc34xI71qi6LeVAIyNA/flag-German1.jpg" width="38" height="38" /></a><span style="font-family:Microsoft Sans Serif;font-size:78%;">


Alemão</span></td> <td align="center" valign="top"><a href="http://www.blogger.com/rearrange?blogID=5272967381127903624&action=editWidget&sectionId=footer2&widgetType=null&widgetId=HTML6#" onclick="window.open('http://translate.google.com.br/translate?hl=pt-BR&sl=pt&tl=zh-CN&u='+window.location.href)"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Traduzir para Chinês Simplificado" border="0" src="http://public.bay.livefilestore.com/y1prKsFkJoTbZ2BVctXUXnaeWDXtWROW6x0SMN7nezjTThx-aBgVhCpEYBL9vgdeCSucLuWs43l0NcrmEo_NMr57Q/flag-Chinese.jpg" width="38" height="38" /></a>


<span style="font-family:Microsoft Sans Serif;font-size:78%;">Chinês</span></td> <td align="center" valign="top"><a href="http://www.blogger.com/rearrange?blogID=5272967381127903624&action=editWidget&sectionId=footer2&widgetType=null&widgetId=HTML6#" onclick="window.open('http://translate.google.com.br/translate?hl=pt-BR&sl=pt&tl=es&u='+window.location.href)"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Traduzir para Espanhol" border="0" src="http://public.bay.livefilestore.com/y1pEXyZCQvumrfgvCp7KlnCeyR8L-yf0tU-DCUIBIwSegMv7otuJxSZkqqtRQdtw7f9XQEhHqBa-gCUIaVrV2pwgA/flag-Spanish.jpg" width="38" height="38" /></a><span style="font-family:Microsoft Sans Serif;font-size:78%;">Espanhol</span></td> <td align="center" valign="top"><a href="http://www.blogger.com/rearrange?blogID=5272967381127903624&action=editWidget&sectionId=footer2&widgetType=null&widgetId=HTML6#" onclick="window.open('http://translate.google.com.br/translate?hl=pt-BR&sl=pt&tl=en&u='+window.location.href)"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Traduzir para Inglês" border="0" src="http://public.bay.livefilestore.com/y1pEXyZCQvumrco74eK-6FDBxz3aT-0uoBbVlWFqgqbUaWNiMikvY30PdecHGl6NJFW-fl7EjV0me8BTsNgHSrSzQ/flag-English.jpg" width="38" height="38" /></a><span style="font-family:Microsoft Sans Serif;font-size:78%;"><br />


Inglês</span></td> </tr> </tbody></table></td></tr></tbody></table></div><div style="text-align: center;"><a href="http://reidobloguinho.blogspot.com/2010/05/tradutor-com-bandeirinhas-redondas.html" target="_blank">Widget Custom By Rei do Bloguinho</a></div>

Feito isso e só clicar em salvar !


►Se você não gostou desse modelo veja aqui alguns modelos:
tradutor bandeirinhas animadas

► Post Completo

Widget de exibir a Data e o Dia da Semana

Este Widget e bem legal pois ele exibi a data e o dia da semana em texto um script bem simples e no seguinte formato:Quinta-Feira, 05/05/2010, muito util quando queremos exibir data na sidebar ou até mesmo no título do blog, além de deixar o leito informado tipo um blog de jornal ae você uma este Widget.


1° Para instalar basta acessar sua conta no blogger, ir em layout escolher o local do Widget e clicar em adicionar gadget e escolha a opção html/javascript e coloque este código abaixo lá e salve:

<script type="text/javascript" src="http://sites.google.com/site/reidobloguinho/datascript/widgetbyreidobloguinho.js"></script>

► Post Completo

criando mapa do seu site/blog

Essa dica e super util hoje para blogueiros pois este widget permite mostrar uma lista de artigos por categorias no seu blog , este script foi criado por Abu-farhan, E afora estou passando para vocês.

1°Para adicionar este script no seu blog basta ir na edição html da postagem e inserir este código abaixo:

<script style="text/javascript" src="http://sites.google.com/site/reidobloguinho/mapadoseublog/mapadoseublog.js"></script>
<script src="http://NOME-DO-SEU-BLOG.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<span style="font-size: 70%">Custom <a target="_blank" href="http://reidobloguinho.blogspot.com/2010/04/criando-mapa-do-seu-siteblog.html">Instale no blog</a> |Widget by <a target="_blank" href="http://www.abu-farhan.com/">Abu Farhan</a></span>

2°E altere onde esta escrito NOME-DO-SEU-BLOG pelo o nome do seu blog.

► Post Completo

Janela de boas vindas e feed no blog

Criei este widget que permite mostrar uma mensagem de saudação no estilo (estilo pop up) que fica rolando na tela conforme você abaixa a tela e sobe com o botão fecha:

Esse código e bem simples e fácil de adicionar vá em layout, adicionar gadgets e escolha a opção html/javascript e copie e cole o código abaixo:

<style type="text/css">
<!--
#popjan {border: 2px solid #000000;
background-color: #ffffff;
width: 320px;
top: 200px;left: 100px;
text-align: center;
z-index: 450;position:fixed;visibility: visible;}
-->
</style>
<div id="popjan"><a style="float:right" href="#" onclick="document.getElementById('popjan').style.display='none';">[Fechar]</a>
<div style="clear:both"></div><div style="width:300px; text-align:center; margin:auto"><table style="text-align: left;"><tbody>
<tr><td><img height="65" src="http://i40.tinypic.com/21e5hcj.jpg" style="padding-bottom: 10px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" width="65" /></td><td><span class="Apple-style-span" style="font-size: small;">Bem vindo, visitante! Se você é novo por aqui, </span><a href="URL DO SEU FEED" style="color: #999999; text-decoration: none;"><b><span class="Apple-style-span" style="font-size: small;">Subscreva nosso RSS Feed</span></b></a><span class="Apple-style-span" style="font-size: small;"> e acompanhe nossas novidades.</span></td></tr>
</tbody></table></div><div style="clear:both"></div><br />
<a style="font-size:80%" href="http://reidobloguinho.blogspot.com/2010/04/janela-de-boas-vindas-e-feed-no-blog.html" target="_blank">Widget Rei do Bloguinho</a></div>

E altere onde esta URL DO SEU FEED pelo endereço do seu feed e depois clique em salvar.

► Post Completo

Lista de postagens relacionadas

Este código mostra uma lista de postagens relacionadas ou seja postagens recentes do meu blog, postagens sorteadas aleatoriamente.E o melhor essas dicas são automaticamente trocadas cada vez que eu posto algum novo no blog ai ele atualizará automaticamente no seu blog sem precisar fazer nada.


1°Para colocar no seu blog basta ir em layout, adicionar gadget e escolher a opção html/javascript e copie esse código abaixo e cole dentro e depois clique em salvar.

<div id="random-posts"><script type="text/javascript">
quantidade = 7;
</script>
<script src="http://sites.google.com/site/reidobloguinho/listadepostagens/listadepostagens.js" type="text/javascript"></script>
<script src="http://reidobloguinho.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script></div>

► Post Completo

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

► Post Completo