El Widget de Mensaje Recomendado para blogger

El proposito primoldial de el blogger es llamar la atencion con tu contenido y hacer que vuelban por mas. El Widget de Mensaje Recomendado ayuda con esto Es como una invitación al lector para leer un mensaje nuevo o post, una vez que haya leído una de las entradas del blog. Es posible que haya visto este tipo de un widget en muchos sitios web populares como New York Times, Mashable, Times of India, etc

Yo también me encantó la idea y nos enteramos de que alguien más lo había hecho ya un fragmento de jQuery que hace exactamente lo mismo.

He hecho algunas modificaciones en el código para que se cargue de forma asíncrona sin afectar a la carga de la página. La salida de diapositivas mostrar mensajes al azar de tu Blog. Los mensajes aleatorios se obtienen de su feed del blog utilizando Ajax.

Demostracion de la plataforma deslizable.
 
Cuando se mueva hasta la parte inferior de la pagina y usted debería ver la diapositiva recomendada salir como esta foto.


Agregue el este Mensaje Recomendado Widget automaticamente.

Para añadir el widget a tu blog, puedes usar este instalador con un solo click.



Personalize este widget a tu gusto:

1. End Of marcador Post - La diapositiva sale cuando el usuario se desplaza a un punto particular en su blog (la parte inferior de la página por defecto) para marcar este punto, usted puede agregar un elemento HTML. Hay. El elemento debería tener la Identificación  bpslidein_place_holder

por ejemplo: <div id='bpslidein_place_holder'> </ div> haría el truco. El mejor lugar para añadir este marcador podría ser al final del post o entrada. Si desea hacerlo asi, puede agregar este a su plantilla de Blogger.

En la plantilla de Blogger (Recuerda marcar ampliar las plantilla )Busca el siguiente script:

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

o

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

o

<data:post.body/>

Luego  debajo de cualquiera de estos, añade el siguiente 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 hacia abajo a este div, la diapositiva se abrirá.

2. Personalizar el aspecto y el estilo de la diapositiva o ventanilla de post recomendados.

 Para cambiar el diseno de esta ventanilla de post recomendados 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 en algún lugar por encima de este Widget en la plantilla. Si esta variable no está definida, una hoja de estilo por defecto se usa para darle sabor a laventanilla de post recomendados que sobresalga.

Una vez que esta variable se establece en true, usted puede agregar sus propias definiciones de CSS. Puedes añadir tu CSS en Diseñador de plantillas> Avanzado> Añadir CSS

Este es el conjunto predeterminado de las definiciones de estilo de este widget. Usted puede modificar y utilizarla.

# Bpslidein {z-index: 5; ancho: 400px; height: 100px; padding: 10px; background-color: # fff; border-top: 3px sólido # 1616F5; position: fixed; derecha:-430px; inferior: 0; -moz-box-shadow:-2px 5px 0 # aaa,-webkit-box-shadow:-2px 5px 0 # aaa, box-shadow:-2px 5px 0 # aaa; font-family: Arial, Helvetica, sans-serif ;}
# Bpslidein
# Bpslidein_title {color: # 555; font-weight: 700; font-size: 16px; margen: 10px 20px 10px 0;}
# Bpslidein una, # bpslidein a: hover, # bpslidein_title {text-decoration: none; color: # 1616F5;}
# Bpslidein cercano, # bpslidein ampliar, # bpslidein ayudar {border: 2px solid # AEE; cursor:... Puntero; color: # 9A9AA1; anchura: 13px; altura: 15px; padding: 2px 5px 0 0; position: absolute; derecha: 10px; font-size: 17px; font-weight: 700; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
. # {Bpslidein ayudar a derecha: 35px;}
# Bpslidein_title, # bpslidein_image {float: left; anchura: 80px;}
# Bpslidein_title {width: 290px;}