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

<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>