Carregando atualizações...

X

Banner Fixado No Canto Direito da Página do Blogger


Já tenho mostrado em tutoriais passados vários outros formatos de banners fixados em varias diferentes partes da página do blog. Veja:

Anúncio Flutuante Personalizado Com Fundo Transparente

Anúncio Fixado No Rodapé do Blogger

Anúncio Fixado Em um Só Lugar Da Página

Anúncio Flutuante no Blogger



Neste tutorial trago outro estilo de anúncio flutuante. Esse trago a pedido de um comentário de um anônimo, Ele pediu um banner que fique fixado no canto direito da página. 


Você também pode pedir tutoriais. Deixe seu pedido nos comentários.


Veja uma demonstração do código:
https://dicashotteste2.blogspot.com/


Para colocar o anúncio em seu blog vocês precisarão deste código:

Faça o seguinte...

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

<style type="text/css">
div .ban_lateralDicasHot{
float:left;
height:35px;
width:35px;
background-image: -moz-linear-gradient(100% 100% 90deg, #ff6600,#ff9933);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9933), to(#ff6600));
-webkit-border-radius:20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
font-family:"arial black";
background-color:#ff9933;
display:block;
text-align:center;
font-size:22px;
margin:5px 5px auto 5px;
text-decoration:none;
color:#ffff00;
position:absolute;
z-index:3;
left:-20px;
top:-30px;
}
div #ban{
position:fixed;
right:2px;
top:50px;
width:120px;
height:600px;
border:0px solid red;
display:block;
z-index:5;
background:none;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

</style>
<script language="JavaScript">
//Para resetar quando fechar a janela use

// sessionStorage

function fecha_banner(valor){

sessionStorage.lastname=valor;
document.getElementById('ban').style.display=sessionStorage.lastname

}
document.getElementById('ban').style.display=sessionStorage.lastname
</script>
<!-- ==== Banner Lateral === -->
<div>
<div id="ban" >

<a href="javascript:void(0)" onclick="fecha_banner('none')" class="ban_lateralDicasHot" >X</a>

<div style="width:120px;height:600px;position:absolute;z-index:1;">

<!-- Início do código HTML Cursos 24 Horas -->
<a target="_blank" href="http://www.cursos24horas.com.br/parceiro.asp?cod=promocao48544"><img alt="Cursos com Certificado - Cursos 24 Horas" style="border:none;color: hsla(0,100%,50%,0.2)" width="120" height= "600" src="http://www.cursos24h.net.br/banners/gif1/120x600.gif" /></a><br />
<a target="_blank" style="font-family:Verdana, Geneva, sans-serif; font-size:10px; color:#028ACC; text-decoration:none;" href="http://www.cursos24horas.com.br/parceiro.asp?cod=promocao48544">Cursos Online</a>
<!-- Fim do código HTML Cursos 24 Horas -->

</div>
<div style="text-align: right;">
<span style="font-size: xx-small;"><span style="color: white;">Widget by </span><a href="http://dicashot.blogspot.com/" target="_blank"><span style="color: #eeeeee;">DicasHot</span></a></span></div>
</div>
</div>
<!-- ==== Banner Lateral === -->

Na parte destacada de azul, cole o código do seu anúncio no formato 120x600.

Tendo feito a modificação, está pronto!!!

Cursos On-line 24 Horas - Educação a Distância de Qualidade

NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0