Anúncio Flutuante Personalizado Com Fundo Transparente

Nesta postagem mostro uma versão mais moderna do código "Anúncio Flutuante". 

Se você já acompanha as postagens do blog você pode perceber que já havia mostrado outras postagens mostrando como colocar no blog outros tipos de anúncio flutuante semelhantes a este.

Veja estes outros modelos de anúncio flutuante e veja qual "combina" mais com o seu blog!

Anúncio Flutuante Versão #1

Anúncio Flutuante Versão #2

Anúncio Flutuante Versão #3

Eu coloquei este botão grande de fechar para ficar mais moderna e mais elegante e também coloquei os créditos. Por favor, não tire os créditos da PopUp.

Veja uma demonstração do código no link:

http://youtubedicashot.blogspot.com/

Para colocar no seu blog é muito simples...

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

<style type='text/css'>
#AnuncioDicasHotBody {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
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 = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //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("AnuncioDicasHotBody").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("AnuncioDicasHotBody").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("AnuncioDicasHotBody");
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='AnuncioDicasHotBody'>
<a href='javascript:void' onclick='closebar(); return false'><img align='right' border='0' src='http://acidezmental.xpg.uol.com.br/imagens/close.png'/></a><br/>
<a href='https://www.blogger.com/URL%20de%20destino'><br/>
</a><br/>
<div style='background:transparent; border: 3px solid #696969; color: white; font-size: 14px; padding: 5px; text-align: center;'>
<!-- Início do código HTML DicasHot -->

<br/>
<div style='text-align: center;'>


<div style="text-align: center;">
<object data="http://www.cursos24h.net.br/banners/flash4/250x250.swf?clickTAG=http://www.cursos24horas.com.br/parceiro.asp?cod=promocao63478" height="250" type="application/x-shockwave-flash" width="250">
<param name="movie" value="http://www.cursos24h.net.br/banners/flash4/250x250.swf?clickTAG=http://www.cursos24horas.com.br/parceiro.asp?cod=promocao63478" />
<param name="quality" value="high" />
<param name="bgcolor" value="#CCCCCC" />
<h3>
Cursos 24 Horas</h3>
<a href="http://www.cursos24horas.com.br/parceiro.asp?cod=promocao63478" rel="nofollow" target="_blank">Cursos 24 Horas - Cursos Online</a>
</object></div>

<div style="text-align: right;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;">Widget By <a href="http://dicashot.blogspot.com.br/2014/04/anuncio-flutuante-personalizado.html" target="_blank">DicasHot</a></span></div></div>
<!-- Fim do código HTML DicasHot --></div></div>

Na parte destacada de azul, substitua colando o código do seu anúncio (seu banner). E, a parte destacada de vermelho no código corresponde a cor da borda.

Não sabe qual cor colocar? Veja nossa tabela de cores:

http://dicashot.blogspot.com/p/blog-page_115.html

Tendo feito isto, basta salvar e pronto!!!

Por favor, não tire os créditos da PopUp.