Banners para publicidad con efecto spotlight y tooltip incluido

Si ya has decidido dar un paso más en tu blog y estas por comenzar a poner publicidad en el hoy te traigo estos banners de 125 x 125 y que puedes ponerlos y configurarlos a tu gusto. La publicidad es indispensable en los blogs y paginas ya que ellos te generan dinero. Los puedes poner en tu sibear o en la columna lateral y con un poco de css y jQuery, se consigue un efecto 'spotlight'al momento de pasar el mouse en una de las imágenes.


Mira el ejemplo de los banners

Para añadir este widget a tu blog, copia y pega el siguiente codigo en un gadget HTML. Lo que está en color azul lo cambias por la dirección URL que desees, como por ejemplo tu pagina de contacto. En color rojo están las URLS de los banners, en este caso están las que he puesto en la demo, sustitúyelas por las de las imágenes que quieras poner para los anunciantes. Si quieres añadir más de 4 banners Mira el ejemplo.

<div id="banner"> <a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EDOzMYK8N0w49GT4GJ3AoX_qM1bcIzEISBB-oosD68IqzXO1c_s7lUSUElYG4BSbkTD3BI6ExvVTQknmO9ilTx_0WjXvnO65HU4l8TcHbIm0vJaztqCdjgH9oWAf90SGa4vGmWBaoOo/s1600/anunciateaqui.png"/></a> <a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EDOzMYK8N0w49GT4GJ3AoX_qM1bcIzEISBB-oosD68IqzXO1c_s7lUSUElYG4BSbkTD3BI6ExvVTQknmO9ilTx_0WjXvnO65HU4l8TcHbIm0vJaztqCdjgH9oWAf90SGa4vGmWBaoOo/s1600/anunciateaqui.png"/></a> <a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EDOzMYK8N0w49GT4GJ3AoX_qM1bcIzEISBB-oosD68IqzXO1c_s7lUSUElYG4BSbkTD3BI6ExvVTQknmO9ilTx_0WjXvnO65HU4l8TcHbIm0vJaztqCdjgH9oWAf90SGa4vGmWBaoOo/s1600/anunciateaqui.png"/></a> <a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EDOzMYK8N0w49GT4GJ3AoX_qM1bcIzEISBB-oosD68IqzXO1c_s7lUSUElYG4BSbkTD3BI6ExvVTQknmO9ilTx_0WjXvnO65HU4l8TcHbIm0vJaztqCdjgH9oWAf90SGa4vGmWBaoOo/s1600/anunciateaqui.png"/></a> </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>

Agrega la linea <a class="anuncio" href="TU ENLACE" title="Anúnciate aquí Tamaño 125 x 125" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EDOzMYK8N0w49GT4GJ3AoX_qM1bcIzEISBB-oosD68IqzXO1c_s7lUSUElYG4BSbkTD3BI6ExvVTQknmO9ilTx_0WjXvnO65HU4l8TcHbIm0vJaztqCdjgH9oWAf90SGa4vGmWBaoOo/s1600/anunciateaqui.png"/></a> a continuación de las otras, tantas veces como quieras.

Estos banners los compartí de http://redeando.blogspot.mx/2014/02/banners-publicidad-css-jquery.html una pagina muy buena donde pueden encontrar muchas cosas para su blog. Yo las estaré poniendo aquí pero respetando los derechos de autor como debe de ser. Los invito a que visiten esta página que tiene muchas cosas muy buenas. Espero y les sirvan de utilidad para poner más atractivito su blog.

El internet siempre será el medio de comunicación más poderoso del mundo y jamás será superado por nadie ni las empresas que tienen poder en lo terrenal y se actualicen en la internet y quieran mentir con amarillismo ni con todo su poder ni todo su dinero Podrán superar el poder de los miles de bloggers que hemos estado a lo largo del tiempo. Nosotros somos el futuro. Jonny_Sm.

Share: