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.
Você também pode pedir tutoriais. Deixe seu pedido nos comentários.
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!!!