Banners para publicidad con efecto spotlight
La publicidad es tambien algo importante para nuestro blog, por lo tanto tambien debemos cuidar su aspecto como cualquier otro elemento de nuestra pagina. Por eso mismo os traigo este diseño pensado para los tipicos banners de 125x125 que ponemos en la sidebar o columna lateral. Con un poco de CSS y otro poco de jQuery, se consigue un efecto 'spotlight' al pasar el cursor por uno de los banners.
Esto quiere decir, como podeis ver en el ejemplo de mi sidebar que al pasar el raton por una de las imagenes, esta es la que se ve principalmente, mientras que las demas se ven casi transparentes con una opacidad muy baja. Ademas, aparece un 'tooltip' (texto informativo) que indica el tamaño de la imagen, en este caso como ya he dicho, de 125x125.
Si quieres añadir este widget a tu blog, copia y pega el siguiente codigo en un gadget HTML. Lo que esta en colo rAzul lo cambias por la direccion URL de tus imagenes PNG, En este caso estan las que he puesto en la demo, sustituyelas por las de las imagenes que quieras poner para los anunciantes Y si quieres redirigir a alguna pagina o lugar en particular coloca la URL donde dice "TU ENLACE" como por ejemplo tu pagina de contacto. , Si quieres añadir mas de 4 banners, agrega esta linea
<a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125" target="_blank"><img src="http://1.bp.blogspot.com/
F7v0oVCWDpg/UvJzftKr3iI/AAAAAAAALpQ/7QGHXSCu_hA/s1600/anunciateaqui.png"/></a>
A continuacion de las otras, tantas veces como quieras.
Para instalarlo tienes que seguir mis pasos.
1º Ir a blogger
2 Da un clic en “Diseño”
3 Abre el gadget que dice “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de
2 Da un clic en “Diseño”
3 Abre el gadget que dice “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de
<div id="banner">
</div>
<style>
div#banner a { text-decoration:none; color:#fff; text-align:center;padding:3px;}
div#banner { width:262px; margin:0 auto; }
#banner .anuncio { display:block; width:125px;height:125px;float:left; position:relative;}
#banner .anuncio img{ display:block;width:125px;height:125px;}
#banner .anuncio .textoinfo { position:absolute; top:90px;left:8px;font:bold 10px arial; width:110px; display:none; background:#000;border-radius:5px;color:#cdcdcd !important;padding:2px;}
.effect { box-shadow: 0 0 10px #cdcdcd;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript"> $(document).ready(function () { $('#banner .anuncio').each(function () { title = $(this).attr('title'); $(this).append('<span class="textoinfo">' + title + '</span>'); $(this).attr('title',''); }); $('#banner .anuncio').hover( function () { $(this).siblings().css({'opacity': '0.1'}); $(this).css({'opacity': '1.0'}).addClass('effect'); $(this).children('.textoinfo').show(); }, function () { $(this).children('.textoinfo').hide(); } ); $('#banner').mouseleave(function () { $(this).children().fadeTo('100', '1.0').removeClass('effect'); }); }); </script>
Y por ultimo haz click en guardar
Esto es todo
Fecha:23/12/2016
Publicado por:
Fuente: redeando
No hay comentarios:
Publicar un comentario