{
height:0px;
width:auto;
background: #000 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:-0px;
}
#bsadsbase{
height:0;
margin:0auto;
width:0px;
background:#fff;
border-bottom:0px #333333 solid;
border-right:600px #333333 solid;
border-left:600px #333333 solid;
text-align:center;
padding:0px;
}
#bsadsheadline{
opacity:0.8;
height:auto;
width:auto;
position:fixed;
top:0px;
left:400px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#000;
padding:0px;
z-index:1001;
font-size:0px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("bsadsheadline").style.display = 'none';
}
</script>
<br />
<div id="bsadsheadline">
<div id="">
<span style="color: white; font-size: 13px; font-weight: bold; text-shadow: black 0.1em 0.1em 0.1em;"></span>
<span style="color: white; float: right; font-size: 20px; font-weight: bold; padding-right: 3px; padding-top: 3px; text-shadow: black 0.1em 0.1em 0.1em;">
</span><br />
<div id="banner">
<div id="fechar">
<span style="color: white; float: right; font-size: 20px; font-weight: bold; padding-right: 3px; padding-top: 3px; text-shadow: black 0.1em 0.1em 0.1em;"><a class="fechar" href="https://www.blogger.com/blogger.g?blogID=3132808329280245103#" title="Fechar">X</a></span></div>
<div class="link">
<span style="color: white; float: right; font-size: 20px; font-weight: bold; padding-right: 3px; padding-top: 3px; text-shadow: black 0.1em 0.1em 0.1em;"><a href="https://www.blogger.com/blogger.g?blogID=3132808329280245103#"> </a></span></div>
<span style="color: white; float: right; font-size: 20px; font-weight: bold; padding-right: 3px; padding-top: 3px; text-shadow: black 0.1em 0.1em 0.1em;">COLOCAR IMAGEM NESTE LOCAL</span></div>
<span style="color: white; float: right; font-size: 20px; font-weight: bold; padding-right: 3px; padding-top: 3px; text-shadow: black 0.1em 0.1em 0.1em;">
</span></div>
" target="_blank" onclick="getValue()">close(x)
</div>
<div id="bsadsbase">
<h3>
</h3>
<div align="left">
</div>
<h3>
</h3>
<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $conteudo = $('#conteudo').width(); // largura do div principal
var $banner = $('#banner');
$banner.animate({ left: ($conteudo /4)}, 900).show(); // aplicando efeito de deslocamento
// para ajustar o posicionamento do banner, basta aumentar o número da divisão
// #conteudo tem 1000px dividido por 4 = 250 - então, left será 250
$(".fechar").click(function(event){
event.preventDefault(); // previne o evento clique
$("#banner").hide(); // ocultando o banner
});
});
</script>
<style type="text/css">
body{ font-family:Arial, Helvetica, sans-serif }
#conteudo{
margin:0 auto;
width:0px;
height:300px;
background-color:#DDD;
}
#banner{
position:absolute;
top:50px;
left:0;
float:left;
width:600px; /* largura */
height:550px; /* altura */
background-color:#0066CC; /* cor de fundo */
-webkit-border-radius: 8px; /* canto arredondado */
-moz-border-radius: 8px; /* canto arredondado */
border-radius: 8px; /* canto arredondado */
z-index:999999; /* posicionando sobre os demais */
display:none;
color:#FFFFFF;
}
#banner a{ color:#FFFFFF;text-decoration:none }
#banner p { padding: 5px 10px 0; }
p.link{ text-align:center;clear:both }
#fechar{
position:relative;
float:right;
width:20px;
height:20px;
background-color:#000000;
color:#FFFFFF;
text-align:center;
}
</style>
<br />
<div id="conteudo">
<div id="banner">
<div id="fechar">
<a class="fechar" href="https://www.blogger.com/blogger.g?blogID=3132808329280245103#" title="Fechar">X</a></div>
<div class="link">
<a href="https://www.blogger.com/blogger.g?blogID=3132808329280245103#">JQuery - Banner Flutuante</a></div>
</div>
</div>
</div>
VIDEO DO YUTUBE EXPLICANDO COMO PROCEDER VIDEO