Stripe ad no seu blog

Mais um sabadão e, como sempre, mais uma dica para blogs!

 

Já viu aquelas caixas retangulares geralmente com os dizeres “assine o nosso feed” na parte de cima ou debaixo do navegador? Se você entrar aqui no Geralidades da Vida consegue ver o stripe ad. Um retângulo verde localizado na parte inferior do seu navegador. Quer fazer isso também no seu blog?

O passo a passo foi tirado do blog Everything About Blogging (em inglês):

 

1- Acesse no Blogger “Layout > Edit HTML”

Antes que qualquer mudança no template faça o backup clicando em “baixar modelo completo”.

 

2- Localize no seu template (Ctrl+F) ]]></b:skin> e cole o código abaixo logo acima dele:

 

• #mta_bar {
  background:#003366;
  border-top: 3px solid #6699ff;
  margin: 0;
  padding: 7px 0;
  z-index: 100;
  bottom:0px;
  right:0px;
  width: 100%;
  overflow: auto;
  position: fixed;
  }
  * html #mta_bar{
  /*IE6 hack*/
  position: absolute;
  width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
  }
  #mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
  #mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
  #mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
  #mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
  #left_bar a {background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SRtNzbvDqPI/AAAAAAAAAXk/KxbvrpJ1DE4/ico-rss-trans_thumb%5B1%5D.png?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
  #left_bar a:hover { text-decoration: underline; color: #fff;}

 

3- Localize agora </head> e cole o código abaixo logo acima dele:

 

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]></script>

 

4- Localize agora </body> e acima dele cole o código abaixo:

 

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='Url do seu feed' target='_blank'>Frase que você quer que apareça</a></span></div>
<span class='right'><img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://img6.imageshack.us/img6/5207/closethumb1.png?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

 

5- Troque o que estiver com as cores vermelho, azul e verde

 

Vermelho: Troque pelo endereço do seu feed

 

Verde: Frase que você quer que apareça.

 

6- Visualize pra ver se ficou tudo certo. Dando certo é só salvar.

 

Sábado que vem tem mais!