Agregar Entradas Recomendadas En Blogger Con Efecto jQuery

Parte importante de un blog desde mi perspectiva, son las sugerencias del cheff, es decir, aquellas entradas que consideramos destacadas y que podrían interesar a gran parte del público que nos visita, estas recomendaciones deben ser visibles y atractivas para motivar a que nuestros lectores den el ansioso "clic".

Hoy presentare una manera muy sencilla de agregar a nuestro blog las entradas recomendadas con un bonito efecto de jQuery, que consiste en que cuando se pasa el mouse sobre la imagen, esta se desliza y muestra una descripción breve de la entrada.

Habiendo dicho todo este choro, procedamos a cocinar nuestro platillo de hoy :) y lo realizaremos en 4 sencillos pasos:

• Intalación del script jQuery (no te espantes, solo es copiar y pegar un código que sirve para dar el efecto deslizante).
• Agregar maquillaje CSS... de pond's (para que se vea chulo!).
• Agregar las entradas en donde queremos.
• Configuramos los enlaces y las imágenes de las entradas.

Manos a la obra...

Mandamiento Blogger: Antes de iniciar guardaré una copia de mi plantilla, Todos: Amén.

Paso 1. Instalación del script jQuery.

Decíamos que para dar el efecto que queremos, es necesario instalar el script, que en pocas palabras, es el que hace la magia.

Para instalarlo sólo tienes que copiar y pegar el siguiente código justo antes de < /head > :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

Si ya lo tienes instalado no es necesario que hagas este paso.

Paso 2. Efecto y Maquillje CSS

En este parte vamos a agregar los colores, formas y sabores de nuestros platillos recomendados y para ello, vamos a copiar y pegar el siguiente códido inmediatamente después del script que acabamos de instalar, es decir, el de jQuery.

<script type='text/javascript'>
 $(function() {
  $(&#39;ul.hover_block li&#39;).hover(function(){
   $(this).find(&#39;img&#39;).animate({top:&#39;182px&#39;},{queue:false,duration:500});
  }, function(){
   $(this).find(&#39;img&#39;).animate({top:&#39;0px&#39;},{queue:false,duration:500});
  });
  $(&#39;ul.hover_block2 li&#39;).hover(function(){
   $(this).find(&#39;img&#39;).animate({left:&#39;300px&#39;},{queue:false,duration:500});
  }, function(){
   $(this).find(&#39;img&#39;).animate({left:&#39;0px&#39;},{queue:false,duration:500});
  });
 });
 </script>

<style media='screen'>
body { background: #fff; }

ul.hover_block { display: block; overflow: hidden; height: 1%; padding-bottom: 15px; }
ul.hover_block li, ul.hover_block2 li {
list-style:none;
float:left;
background: #dedfde;
padding: 10px;
width:190px; position: relative;
margin-left: 30px; }

ul.hover_block li a, ul.hover_block2 li a {
display: block;
position: relative;
overflow: hidden;
height: 100px;
width: 158px;
padding: 16px;
color: #346c8c;
font: 1.6em/1.3 Helvetica, Arial, sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-align:center;
}

ul.hover_block li a, ul.hover_block2 li a { text-decoration: none; }

ul.hover_block li img, ul.hover_block2 li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
</style>

Y luego buscamos ]]></b:skin> y justo antes pegamos lo siguiente:

#recom {
background-image:url(http://sites.google.com/site/bloggertemplateplace/delight/featured_bg.gif);
border:1px solid #dedede;
margin-top:15px;
margin-bottom:15px;
position:relative;
padding-top:10px;
padding-bottom:0px;
overflow:hidden;
background-color:#fcfcfc
}

.featuredbg {
background-image:url(http://i45.tinypic.com/2iuewjr.jpg);
background-repeat:no-repeat;
background-position:top left;
width:21px;
height:83px;
position:absolute;top:0px;left:0px
}

Paso 3. Agregar las entradas en la plantilla.

Ahora vamos a colocar las entradas en algún lugar de nuestra plantilla, mi sugerencia es usar el espacio que hay entre las entradas del blog y la barra de menú o cabecera. en esta parte no puedo ser muy especifico en decir que código de la plantilla buscar puesto que cada una es distinta, sin embargo, no creo que les resulte complicado encontrar el espacio si usamos la técnica del ensayo-error ;)

el código que debemos pegar en donde queremos las entradas es:

<!--featured-->
<b:if cond='data:blog.pageType != "item"'>
<div id='recom'>
<div class='featuredbg'/>
<ul class='hover_block'>
<li><a href='http://adiccionblogger.blogspot.com/2009/09/plantillas-o-templates-para-blogger-5.html' ><img alt='Plantillas Blogger' src='http://aviary.com/viewfull?fguid=d11f258e-6875-102d-92fe-0030488e168c'/> Los mejores lugares para descargar plantillas para Blogger</a></li>
<li><a href='http://adiccionblogger.blogspot.com/2009/12/cosas-que-hacer-despues-de-instalar.html'><img alt='Instala Debian' src='http://i49.tinypic.com/2elvxhg.jpg'/> Cosas que hacer despues de Instalar Debian Lenny 5.0</a></li>
<li><a href='http://adiccionblogger.blogspot.com/2009/06/descarga-series-peliculas-y-anime-con.html'><img alt='Series y Películas en HD' src='http://i46.tinypic.com/n5rec0.jpg'/> Descarga series y películas con calidad en HD completamente ¡¡Gratis!!</a></li>
<li><a href='http://adiccionblogger.blogspot.com/2010/01/para-recibir-una-invitacion-googlewave.html'><img alt='Invitaciones Google wave' src='http://aviary.com/viewfull?fguid=fe545fc6-6959-102d-92fe-0030488e168c'/> ¿Quieres probar esta nueva herramienta de google? Solícita aquí tu invitación.</a></li>
</ul>
</div>
</b:if>
<!--/featured-->

Ahora aplicamos vista previa (oramos para que no salga error ¬¬) y ya deben aparecer las entradas igual que en la imagen (al menos cerquita, si esto no ocurre, regresamos y pegamos en otro lado hasta ubicarlo en donde queremos):

Paso 4. Configurar los enlaces y las imágenes a mostrar.

Cuando agregues esté código, notaras que las imágenes y enlaces son entradas de tu servidor, si quieres puedes dejarlas, así me promocionas :P pero si quieres poner tus enlaces entonces deberás cambiar el código en función de lo siguiente:

• Lo que esta en rojo es la URL del enlace, aquí debes poner el tuyo.
• Lo que esta en verde es un comentarios que saldrá cuando pongan el cursor sobre la imagen.
• Lo que esta en azul es la URL de la imagen, la cambias por la tuya.
• Y lo que esta en negrita es la descripción, es decir, lo que leerán cuando se deslice la imagen al pasar el mouse, trata de que sea muy breve, directa y atractiva.

¡Listo! Ya tienes las sugerencias del cheff en tu blog, espero que te sirva, si necesitas ayuda adicional, contáctame a través de este enlace o deja un comentario y en breve me pondré en contacto contigo.

Por último, este truco esta configurado de tal manera que sólo aparece en la pagina principal y desaparece al entrar a leer un post, de esta forma se aprovecha mejor el espacio del blog.

Entrada basada en la idea de este blog que presenta el efecto hover con jQuery: INCG