14 diciembre 2013

Anuncios de texto tipo Adsense

Hoy os traigo otra forma de mostrar lo más importante de vuestras entradas, se trata de un anuncio semejante a la publicidad de Google Adsense donde podréis colocar todos los enlaces que deseéis.

En realidad, esto es sólo la manipulación de CSS y jQuery para darle un aspecto realmente parecido a la publicidad. No tengo idea si puede ser bueno o malo ya que al parecer publicidad, muchos lectores lo ignoren. Pero simpático por lo menos, resulta.

El aspecto más o menos es como la imagen de abajo, también visible en mi sidebar:
anuncios tipo adsence

Para instalarlo en vuestros blog tan solo hay que introducir el código siguiente en un gadget HTML/Javascript:
<style type='text/css'>
#contenedor { width:304px; height:259px; background-color:white; position:relative; overflow:hidden; margin:30px auto;}
#contenedor h3.info-header { cursor:pointer; background-color:white; background-image:none; font:normal 20px Verdana, Tahoma,Serif;color:blue; border-top:1px solid #d8d8d8; padding:10px; margin:0 0; position:relative; text-transform:none;letter-spacing:0;}
#contenedor h3.info-header:first-child { border-top:none;}
#contenedor h3.active {display: none;}
#contenedor h3.info-header:before{ content:"";width:0;
height:0; position:absolute; top:20px; right:15px; border:5px solid transparent; border-color:#b2b2b2 transparent transparent;}
#contenedor div { height:100px; padding:10px 70px 10px 10px; font:normal 13px Verdana, Tahoma,Serif; color:white;border-top:1px solid #d8d8d8;}
.texto {font:normal 20px Verdana, Tahoma,Serif;color:blue; margin:0 0 5px 0;}
a.texto{
font:normal 20px Verdana, Tahoma,Serif !important;color:blue !important;text-decoration:none;
display:inline-block;}
a:hover.texto {font:normal 20px Verdana, Tahoma,Serif !important; color:blue;text-decoration:underline;}
.titulo-info a{ font:normal 13px Verdana, Tahoma,Serif;
color:green;text-decoration:none; display:block;
margin-bottom:10px;}
.titulo-info a:hover{color:green;text-decoration:none;}
.titulo { padding-top:15px; color:#222;text-align:left !important;}
.panel { background: #4d90fe; border-radius: 50%;
cursor: pointer;height: 34px;float: right; margin-right: -60px; margin-top: -40px;width: 34px;text-align: center;line-height: 34px;}
.panel:hover {background: #4472bd;}
.info-icon { width:15px;height:15px; position:absolute;
top:0;right:0;cursor:pointer;}
.info-info { background:#d3d3d3;width:100px;height:15px; border-bottom-left-radius:4px;position:absolute;top:0;right:0; color:#000;font:normal 11px Arial,Sans-Serif;text-align:left; overflow:hidden; padding-right:19px; padding-left:5px;display:none;
}</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function($) {
$.fn.infoaccordion = function(settings) {
settings = jQuery.extend({
active: 1,
sUpSpeed: 0,
sDownSpeed: 0,
sUpEasing: null,
sDownEasing: null
}, settings);
return this.each(function() {
var $this = $(this),
$item = $this.children('div[data-header]'),
activePanel = settings.active - 1;
$item.each(function() {
$(this).hide().before('<h3 class="info-header">' + $(this).data('header') + '</h3>');
});
$this.children('div:eq(' + activePanel + ')').show().prev().addClass('active');
$this.find('.info-header').on("mouseover", function() { $this.children('h3').removeClass('active');
$item.slideUp(settings.sUpSpeed, settings.sUpEasing); $(this).addClass('active').next().slideDown(settings.sDownSpeed, settings.sDownEasing);
});
});
};
})(jQuery);
$(function() {
$('#contenedor').infoaccordion();
});
$(document).ready(function() {
$('.info-icon').hover(function() {
$('.info-info').toggle();
});
});
});//]]>
</script>
<div id="contenedor">
<!-- enlace1 -->
<div data-header="Título del enlace" style="border-top:none">
<span class='titulo-info'><a class='texto' href='url del enlace' target='_blank'>título del enlace </a>
<a href='url principal del blog' target='_blank'>nombre del blog</a>
<span class='titulo'>resumen de lo que trata el titulo</span>
<a class='panel' url del enlace del título' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://lh3.googleusercontent.com/-yQkI_AdVbMs/UqyWJVuplNI/AAAAAAAANxY/39v3aS181KA/w14-h22-no/icono-blanco.png'/></a>
</span>
</div>
<!-- enlace2 -->
<div data-header="Título del enlace" style="border-top:none">
<span class='titulo-info'><a class='texto' href='url del enlace' target='_blank'>título del enlace </a>
<a href='url principal del blog' target='_blank'>nombre del blog</a>
<span class='titulo'>resumen de lo que trata el titulo</span>
<a class='panel' url del enlace del título' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://lh3.googleusercontent.com/-yQkI_AdVbMs/UqyWJVuplNI/AAAAAAAANxY/39v3aS181KA/w14-h22-no/icono-blanco.png'/></a>
</span>
</div>
<!-- enlace3 -->
<div data-header="Título del enlace" style="border-top:none">
<span class='titulo-info'><a class='texto' href='url del enlace' target='_blank'>título del enlace </a>
<a href='url principal del blog' target='_blank'>nombre del blog</a>
<span class='titulo'>resumen de lo que trata el titulo</span>
<a class='panel' url del enlace del título' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://lh3.googleusercontent.com/-yQkI_AdVbMs/UqyWJVuplNI/AAAAAAAANxY/39v3aS181KA/w14-h22-no/icono-blanco.png'/></a>
</span>
</div>
<!-- enlace4 -->
<div data-header="Título del enlace" style="border-top:none">
<span class='titulo-info'><a class='texto' href='url del enlace' target='_blank'>título del enlace </a>
<a href='url principal del blog' target='_blank'>nombre del blog</a>
<span class='titulo'>resumen de lo que trata el titulo</span>
<a class='panel' url del enlace del título' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://lh3.googleusercontent.com/-yQkI_AdVbMs/UqyWJVuplNI/AAAAAAAANxY/39v3aS181KA/w14-h22-no/icono-blanco.png'/></a>
</span>
</div>
<!-- informacion -->
<span class='info-info'>NOMBRE DEL BLOG</span>
<span class='info-icon'><a href='URL DEL BLOG O URL DE LA PÁGINA DE INFORMACIÓN' target='_blank'><img alt='info' src='https://lh6.googleusercontent.com/-WVL_2p88a-s/UqyVlX5sEgI/AAAAAAAANxI/WDl1_do-EYU/s15-no/informacion.png'/></a></span>
</div>
Modificaciones:
Título del enlace: nombre de la entrada o etiqueta a mostrar
Url principal del blog: dirección principal del blog
Nombre del blog: FÁCIL NO?
Resumen de lo que trata el titulo:Un breve resumen de lo que contiene el título.
Url del enlace del título: Enlace al título



Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

12 comentarios

Hola, me gusto el artículo desde hace tiempo buscaba algo así para craer uno mismo sus publicidades. Encontré un post donde emncionan algo igual de como crear uno un adsense pero este es con html o algo asi. Te dejo el enlace igual te sirve en el futuro: http://soliloquio21.blogspot.mx/2011/06/crea-tu-propio-adsense-pirata.html Saludos

Hola sevillista, lo estado probando y es muy bueno. No lo bloquea el Adblock Plus XD. El problema que espero se pueda corregir es que cuando pasas el mouse encima, brinca mucho. Este truco me sorprendió, eres un ninja. Saludos

Raul, creo haber conseguido el que deje de temblar, en el script en lugar de 40 coloca 0, son 2.

@Amor Sevillista amigo soy el user que mas molesto pero sos el único que da respuesta en los comentarios de tu blog y por eso te admiro y de deseo mucho éxito en tu vida...

ahora paso a lo siguiente amigo gracias a usted ya pude poner mi logo en mi blog pero encontré algo muy interesante navegando por la RED y se trata de algo como últimos post como en forma de noticia y en un site regalan el gadget y queria saber si tu me puedes ayudar como lo tengo que configurar para que funcione en mi blog...

este es el site donde esta el gadget:

http://www.iblogforfood.net/2014/03/jquery-news-ticker-script-for-blogger.html

y lo quisiera poner en esta parte de mi blog mira la imagen please...

http://fotos.subefotos.com/abd990250edf6f22af56407dbc960feao.jpg

mi plantilla la deje posteada en otro post tuyo por favor ayudame...

Ok amigo muchas gracias por la repuesta...

Amigo no logro que funcione cuando le pongo la URL de mi blog...

solo cuando pongo la URL de donde copie el gadget...

por favor amigo ayúdame te doy el pass y user de mi blogger para que compruebe usted mismo please...

solo deme su email y le mando los datos.

Nitro no tengo tiempo, estoy demasiado liado.
No te preocupes que cuando disponga de algo de tiempo te lo coloco.

si amigo no hay problema pero te paso los datos para cuando tengas un tiempito libre please...

Este comentario ha sido eliminado por el autor.

Nitro, copia y pega este código en un gadget html bajo la cabecera o menú de tu blog:
<div style="width:960px;height:25px;position:relative;">
<script type="text/javascript">
var blog_url = "http://www.amorsevillista.com";
var latest_post = 10;
var scrolling_speed = "8";
var close_button = false;
var info_text = true;
</script>
<script src="https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/amor-ticker.js"></script>
</div>
<br />
<br />
<div style='clear:both;'/></div>

Cambia la url y el ancho por el tuyo.

Amigo ya me funciono 100 mil gracias, sin duda alguna este blog esta hecho por usted el 80% T.T thanks...

Mire como va quedando mi blog gracias a usted...
www.zonacatrachahd.blogspot.com


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"