Caixa de Feed Flutuante

quinta-feira, 20 de janeiro de 2011
 
Descrição: Muita Gente Me Pede Diariamente Para Como Colocar Aquela Caixinha de Feed Flutuante Igual de Muitos Blogs Por Ai Por Isso Resolvi Esse Tutorial que Garanto Vai Acabar Com Essa Duvida!
Nossa Avaliação Do Conteúdo:
Tutorial: Primeiramente Veja o Resultado Final desse Tuto!

1º Em Seu Painel Blogger Vá em Design

2º Depois  Em Elementos da Pagina Adicione Um Widget  HTML/JavaScript (Em Quaquer Lugar)
3º Feito Isso Cole O Seguinte Codigo Dentro desse  Widget:

<style type="text/css">


#topbar
{
PADDING-TOP: 5px;
MARGIN-TOP: 23px;
PADDING-RIGHT: 5px;
PADDING-LEFT: 0px;
MARGIN-RIGHT: -3px;
VISIBILITY: hidden;
WIDTH: 363px;
HEIGHT:131;
FONT-FAMILY: arial;
POSITION: absolute;
background:url(http://danielfariaptu.webs.com/New%202/flutuante2.png) no-repeat;
}

</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 5 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="frombottom" //enter "fromtop" or "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" title="Fechar janela" rel="nofollow" src="https://dl.dropbox.com/u/6009047/bt_fechar_pop.png" style="float: right; margin-right: 5px; margin-top: -35px;" /></a>
<img width="48" vspace="4" hspace="4" border="0" align="left" src="https://dl.dropbox.com/u/6009047/feed_icon.png" title="Assine nosso Feed" style="margin-left:4px;" />
<center><font style="color:#000000; font:12px arial;text-shadow:1px 1px #fff;"><b>Fique sempre atualizado! <br />Cadastre-se e receba nossos downloads em seu e-mail.</b> </font><form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify?uri=Seu-ID-FEED" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Seu-ID-FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" gtbfieldid="10" value="Digite seu e-mail..." id="fd-input" onfocus="if (this.value == &#39;Digite seu e-mail...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Digite seu e-mail...&#39;;}" name="email" size="26" /><input type="hidden" value="NOME DOSEU BLOG" name="uri" /><input type="hidden" name="loc" value="pt_BR" /><input class="Assinar2" type="submit" value="Assinar" /></form>

</center>
<center><a href="http://feeds.feedburner.com/Seu-ID-FEED"><img alt="" style="border: 0pt none;margin-top:6px;" src="http://feeds.feedburner.com/~fc/SEU-ID-FEED?bg=fabf01&amp;fg=000000&amp;anim=0&amp;label=Leitores" /></a></center>
<span style="font-weight: bold; text-indent: -9999px;"><span style="visibility: hidden;"><center><p>Atenção: É Preciso Confirmar o Cadastro no E-mail.</p></center></span></span>
</div>



4º Altere Onde Está em Vermelho Pelo Seu Nome de Usuario Do Blog Que Você  Usa No Feed Burner!!
Apos  Isso Salve o Widget e Visualize Seu Blog!

OBS: IMPORTANTE Em  Alguns Templates Ele Não Irá Funcionar! Devido Há Imcompatibilidade Em Versões  Muito Nova!

Bom é issu Tutorial Muito Bem Explicativo! Espero Que Entendam!!

0 comentários:

Postar um comentário