FERRAMENTA DE FEEDS FLUTUANTE NA LATERAL DO SEU BLOG
Desde que comecei a promoção, para dar aos assinantes de feed via email, um domínio .COM.BR, resolvi divulga-la através de uma Pop-up, que se abre ao entrar no blog, oferecendo a assinatura do feed via email, parecido com que alguns blogs que usam WordPress vem fazendo.
O fato é, que desde a inclusão da Pop-up, recebi uma porrada de emails(mentira…foram uns 8 ou 9) me perguntando como criei e como fazer uma igual, teve até comentário aqui mesmo no blog onde o amigo disse:
Olá, sou o dono da WallpapersClock(*?HREAL) e da RecursosClock.(*?HPLAY )
Gostaria de pedir o código dessa janelinha dos feeds...
Obrigado
Baseado nisso resolvi criar um tutorial para criar uma Pop-up de inscrição do Feed via email, ENTÃO, VAMOS LÁ !
Entre no seu blog e vá em LAYOUT/EDITAR HTML não precisa expandir modelos de widget.
Procure por
Antes deste código insira o código abaixo
#topbar{
position:absolute;
border: 2px solid green;
padding: 5px 0px 0px 0px;
margin: 100px 0px 0px 200px;
background-color: #ffffff;
font-size:12px;
width: 450px;
visibility: hidden;
z-index: 450;}
Feito isto precisamos criar a div, localize a sessão abaixo
<div id=’outer-wrapper’><div id=’wrap2′>
Pode estar um pouco diferente em seu template, mas procure logo depois de
que acaba achando a sessão, depois de achar insira o código abaixo logo depois da sessão citada
<div id=’topbar’>
<a href=” onClick=’closebar(); return false’><img border=’0′ src=’http://img526.imageshack.us/img526/3991/botodefechar.jpg’/></a>
<img src=’http://img30.imageshack.us/img30/6428/50694460.jpg’/>
<center><form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open('http://feedburner.google.com/fb/a/mailverify?uri=ComoFazerWeb', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true’ style=’BORDER-BOTTOM: #228b22 0px solid; TEXT-ALIGN: center; BORDER-LEFT: #228b22 0px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BORDER-TOP: #228b22 0px solid; BORDER-RIGHT: #228b22 0px solid; PADDING-TOP: 3px’ target=’popupwindow’><p><b>Coloque seu email:</b></p><p><input name=’email’ style=’WIDTH: 250px’/></p><input name=’uri’ type=’hidden’ value=’REAL PLAY DOWNS‘/><input name=’loc’ type=’hidden’ value=’pt_BR’/><input type=’submit’ value=’Assine grátis’/> <p>Delivered by <a href=’http://feedburner.google.com/’ target=’_blank’>FeedBurner</a></p></form></center><p/><a href=”http://realplaydowns.blogspot.com/2011/10/pop-up-assinar-feed-via-email-no.html”>Widget by REAL PLAY DOWNS</a></div>
visualise, e se não houver erros, salve!
Agora volte ao Layout, e clique em adicionar um gadget, pode ser em qualquer lugar, isto é de menos, escolha HTML/Java script, não coloque título, copie o código abaixo cole e salve, pronto!
<script type=”text/javascript”>
var persistclose=1 // Se coloca en 0 o 1. 1 significa que una vez que la barra es cerrada, entonces permanece cerrada en el resto de la sesión
var startX = 20 // Tamaño horizontal de la barra en pixeles
var startY = 5 // Tamaño vertical de la barra en pixeles
var verticalpos=”fromtop” // “fromtop” o “frombottom” para definir si va arriba o abajo.
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.left=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>
Agora faça as alterações necessárias, aquelas que marquei em vermelho, os tamanhos não tem necessidade de mudar, mas a parte que aparece em laranja é obrigatório trocar, exemplo meu feed é http://feeds.feedburner.com/REALPLAYDOWNS, então em value está a parte laranja, verifique o seu feed, pegue o fim e cole lá no local marcado em laranja.
É importante que a assinatura via email esteja habilitada no
Google FeedBurner, se não estiver habilite para que possa funcionar.
Brinque bastante com o código, use um blog de testes, depois de tudo pronto insira no seu blog, só pra lembrar, não retire os créditos, pra fazer algumas coisas a gente soa um pouco, se tiver dúvidas comente!
1/18/2012
realplaydowns
