4/01/2012

Recommended Slide Widget


"Mantener a los visitantes interesados en su sitio por mucho tiempo" Eso es lo que todos los bloggers quieren lograr. El Slide o diapositiva con el mensaje de recomendación de post hace precisamente eso. Es una especie de invitación al lector para leer un mensaje nuevo, una vez que haya leído una de las entradas de su blog. 
Puede que hayan visto este tipo de widget en muchos sitios web populares como el New York Times, Mashable, Times of India, etcA mí también me encantó la idea y cuando me enteré de que alguien más lo había hecho con un fragmento de jQuery lo primeo que hice fue copiarlo. Usted puede leer acerca de este código increíble en el blog de Mary Lou en http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/He hecho algunas modificaciones en el fragmento de lo que se carga de forma asíncrona, sin afectar la carga de la página. El widget mostrará mensajes al azar sobre post de tu Blog. Los mensajes aleatorios se obtienen a través de Ajax.Si quieres verlo en acción simplemente avanza hasta el fin de un post en el siguiente blog.

Desplácese hasta la parte inferior del postey usted debería ver la imagen de post recomendado.

Cómo agregar el widget

Para añadir el widget a tu blog, puedes usar este programa de instalación con un solo clic.



 
Te aparecerá el widget instalado en un elemento HTML

Personalización del widget
1. Final de la marca Post - La diapositiva sale cuando el usuario se desplaza hasta un determinado punto de su blog (la parte inferior de la página por defecto) para marcar el punto, usted  debe tener la bpslidein_place_holder Identificación activada

Veamos por ejemplo: con <div id='bpslidein_place_holder'> </ div> se haría el trabajo. El mejor sitio para añadir este marcador sería en el extremo final del post. Si desea hacerlo fácilmente, puede agregar esto a su plantilla de Blogger de la siguiente manera.

En la plantilla Buscar, (Usted tendrá que ampliar las plantillas de artilugios)

<div class='post-footer-line post-footer-line-1'>

o
<p class='post-footer-line post-footer-line-1'> 
o
<data:post.body/>

Inmediatamente por debajo de cualquiera de ellos, añadir el siguiente fragmento de código y guardar la plantilla


<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'> </ div>
</ B: if>
Ahora, cuando el lector se desplaza hasta este div, el widget se abrirá automáticamente.

2. Personalizar el aspecto y el estilo de la diapositiva.

Usted puede ajustar el estilo del widget de Recomendaciones. Pero antes de hacer eso, usted tiene que añadir esta definición de la variable a la plantilla

<script> bpslidein_custom_css var = true; </ script>
Esto se debe agregar algún lugar por encima de la plataforma deslizable Widget o luego de la sentencia ]]></b:skin>. Si esta variable no está definida, será usada una hoja de estilos por defecto  

Una vez que esta variable se establece en true, usted puede agregar sus propias definiciones CSS. Puede añadir su CSS en Diseñador de Plantillas> Avanzado> Añadir CSS o aplicar el siguiente conjunto y realizar las modificaciones sobre él.Este es el conjunto predeterminado de las definiciones de estilo aplicado a la widget. Usted puede modificarlo o utilizar el mismo.




#bpslidein{
z-index:5;
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #1616F5;
position:fixed;
right:-430px;
bottom:0;
-moz-box-shadow:-2px 0 5px #aaa;
-webkit-box-shadow:-2px 0 5px #aaa;
box-shadow:-2px 0 5px #aaa;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#bpslidein_title{
color:#555;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;
color:#1616F5;
}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;
font-size:17px;
font-weight:700;
font-family:Arial, Helvetica, sans-serif;font-size:12px;
}
#bpslidein .help{
right:35px;
}
#bpslidein_title,#bpslidein_image{
float:left;
width:80px;
}
#bpslidein_title{
width:290px;
}
3. Otras cosas que se pueden editar

Puede editar el título del widget y el texto que viene por definición . Solo tiene que abrir el elemento html "Recommended Slide" buscar el texto "Recommended for you" y cambiarlo por ejemplo por "Seguramente le interesará leer..."


Espero lo disfuten
Post

4 comentarios:

  1. ¿Qué pasa si en mi plantilla no encuentro los 3 códigos que mencionas para poner el widget? ¿Hay alguna otra forma?

    ResponderEliminar
  2. Los códigos mencionados corresponden a lugares donde se sugiere ubicar el widget dentro de la plantilla pero no son mandatorios. Si encuentras un lugar mejor quedará perfecto.
    Sin embargo en cualquier plantilla blogger (al menos en la mayoría) existe alguno de los tres códigos, tal vez con pequeñas variaciones, pero allí están. Lo más probable es que hayas olvidado expandir la plantilla de artilugios mediante el botón superior del editor de la plantilla HTML.
    Márcalo con el mouse y luego de expandirlo busca con la combinación Ctrl más F

    Suerte.

    ResponderEliminar
  3. no me funciona http://www.enummi4liferesearch.com/

    ResponderEliminar
    Respuestas
    1. Como puedes observar en el post, el widget es autoinstalable desde el propio Blogger y lo único que hacemos es personalizarlo.

      En este y otros de mis blogs puedes verlo funcionando perfectamente.

      Supongo que se trata de alguna incompatibilidad con las plantillas de Jonhny, que según creo están originalmente diseñadas para Joomla, a diferencia de la gran mayoría del resto de plantillas que están basadas en la Mínima de Blogger.

      Si me preguntas, me quedaría con la plantilla de Jonhny ;)

      Un saludo

      Eliminar

Nota: solo los miembros de este blog pueden publicar comentarios.