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:
Para instalarlo en nuestros 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzBbG9tluO_GbtjLWBRxSLjBtFqNtn9vF56QqWaSS2lSx9PpfqBNz0niDsZIc2wGSV2ekjWusGuipt6isicJMZxP2VAz2BJJD98s2O9jx9H7w4BgrQYJtZZqvBs7dxyhOUtq_fwblq-Wg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzBbG9tluO_GbtjLWBRxSLjBtFqNtn9vF56QqWaSS2lSx9PpfqBNz0niDsZIc2wGSV2ekjWusGuipt6isicJMZxP2VAz2BJJD98s2O9jx9H7w4BgrQYJtZZqvBs7dxyhOUtq_fwblq-Wg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzBbG9tluO_GbtjLWBRxSLjBtFqNtn9vF56QqWaSS2lSx9PpfqBNz0niDsZIc2wGSV2ekjWusGuipt6isicJMZxP2VAz2BJJD98s2O9jx9H7w4BgrQYJtZZqvBs7dxyhOUtq_fwblq-Wg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzBbG9tluO_GbtjLWBRxSLjBtFqNtn9vF56QqWaSS2lSx9PpfqBNz0niDsZIc2wGSV2ekjWusGuipt6isicJMZxP2VAz2BJJD98s2O9jx9H7w4BgrQYJtZZqvBs7dxyhOUtq_fwblq-Wg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-QhtqhTpkxARn5rOC_L97IrUm6m23-GRAHICDqmiZDZ5sDnexUHGuxLexrqV9QZpT1tBvET30yf8GwO7dnuLYe7aK2ucAkzhSD-L3fOHHEUdJT0QyAK4zRdpYzVQIl2pWorgn6cRtTc/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
