Hi quest ,  welcome  |  sign in  |  registered now  |  need help ?

Recent Comments

Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

El widget de Entradas Relacionadas con fotos de Blogger

Written By andante77 on Sunday, April 21, 2013 | 5:10 PM



Mostrar los enlaces de las entradas relacionadas con una imagen de la entrada correspondiente
le ayudara ha aumentar las vista/usuarios de las paginas .Los Usuarios se sentiran temtados
a mirar las entradas relacionadas cuando se presentan atractivamente con una foto.

Tambien usa la foto generada por blogger.

Hay un truco muy útil para aumentar las páginas vistas cuando un visitante llega a nuestro blog y es ofrecerle otros artículos que le puedan interesar y es poner al final de cada post unas mini imágenes con los post relacionados al que el lector ingresó a revisar parecido a la imagen siguiente:

entradas relacionadas
Este es un proceso mas simple t facil de implementar:
1) Visitamos  Linkwithin.
2)Llenamos los datos en el formulario que hay en la parte derecha:


formulario de linkwithin
3) Cuando hayamos rellenado los datos, damos click en Get Widget!
4) Ahora en la siguiente ventana escogemos el paso 1 y damos en Install Widget

.
5) En este paso se habre el panel de control de Blogger y solo aceptamos.
6) De acuerdo a la plantilla que estemos utilizando, este gadget debemos ubicarlo al final del espacio de las entradas ingresando a Diseño.
 
 diseno blogger
7) Hasta este punto debería estar funcionando, sin embargo el mensaje que saldrá en el Widget estará en ingles y será algo parecido a esto: "You may also like stories", podemos personalizar con un mensaje en español de la siguiente forma:
8) Entraremos a Diseño y vamos a Editar el gadget de Linkwithin:
9) Ahora vamos a insertar esta línea
<script>linkwithin_text='El texto que gustes:'</script>
al inicio del código del widget, quedando así

10) Guardamos y probamos, si todo se hizo bien debe quedar al 100%
5:10 PM | 0 comments

El Widget de Mensaje Recomendado para blogger

Written By andante77 on Sunday, March 31, 2013 | 5:13 PM

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.
image 
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;}





Enhanced by Zemanta
5:13 PM | 0 comments