Cómo mostrar autómaticamente los posts de Blogger en Twitter




Socialize de Feedburner es una excelente herramienta para mostrar a nuestros seguidores de Twitter los posts que publicamos en nuestro Blog. De seguro han visto plugins, scripts y demás, pero la mejor, la que utilizo y nunca he tenido problemas es esta.
Para activar esta herramienta nos vamos a nuestra cuenta de Feedburner, seleccionamos el Feed que queremos utilizar en Twitter, de ahí le damos clic a Publicize, después a la opción de Socialize.




De ahí hay que seleccionar la opción de Add a Twitter account donde tenemos que iniciar sesión en Twitter, pero si ya lo están entonces les abrirá una ventana avisándoles si queremos conectar la cuenta con Feedburner, le damos permitir.




Una vez que veamos que nuestro usuario de Twitter estará seleccionado, solo falta darle unas modificaciones, como tipo de visualización de los títulos (solo el titulo, titulo y texto de la entrada, solo texto de la entrada), así como agregar el enlace hacia el post, texto adicional.
Mientras estemos modificando las opciones, nos mostrara una vista previa de los cambios hechos.




Una vez satisfechos por los cambios, activamos la herramienta y por ultimo le damos en guardar.
Ahora cada vez que publiquemos un post, se mostrara también ha nuestros seguidores de Twitter.




Si quieres recibir las actualizaciones del momento, te invito a suscribirte a nuestro Feed, al igual que nuestra cuenta deTwitter :D

Enlace V-Junker

Cómo crear un formulario de contacto con EmailMe form






Un lector de V-Junker nos mando un correo mediante contáctanos, preguntando cómo crear un formulario como el que tenemos, y la verdad es que es muy fácil.
Vamos a utilizar la herramienta online llamada Email Me Form, primero tenemos que registrarnos es gratis, una vez hecho esto iniciamos sesión y nos dirigirá a nuestro panel, ahí mismo le damos clic a la opción de Templates.
Ahora nos darán un formulario pre-hecho con los requisitos esenciales como Nombre, email, asunto y comentario, viendo esto, arriba le damos clic al botón Customize.

EmailMeFormVJ
*Dale clic a la imagen para ampliar.



Después en la opción de Opciones del formulario (Form Settings) podemos cambiar varias opciones como Titulo del formulario (ejemplo Contacto TuBlog), en opciones de confirmación (Confirmation options) ya sea que seleccionemos si cuando envíen el comentario aparezca un mensaje de confirmación o cuando envíen el comentario los re direccione al sitio de nuevo, lado de las celdasnombre del botón (Enviar) así como la posición del botónAnti-spam on/off.

EmailMeFormVJ5-1
*Dale clic a la imagen para ampliar.



También podemos seleccionar cada celda del formulario para cambiar el nombre de ingles a español (ejemplo Message por Mensaje), indicar si es requerido o no lo que nos pide, y cambiar el tamaño de la celda si es necesario, pero yo que ustedes lo dejaría como esta.

EmailMeFormVJ1
*Dale clic a la imagen para ampliar.



Una vez terminado nuestro formulario le damos a la opción de Save Form, y nos mandara de nuevo a nuestro panel, ahora para agregar el formulario en nuestro Blog, en las opciones de nuestro formulario le damos clic en donde dice Code y ese será nuestro código para colocarlo en nuestro Blog.

EmailMeFormVJ2
*Dale clic a la imagen para ampliar.




EmailMeFormVJ3
*Dale clic a la imagen para ampliar.



Para colocarlo en tu Blog de Blogger, tendremos que crear una nueva entrada y pegar ahí el código, para que en esa entrada no halla comentarios no deseados, le desactivamos la opción de Comentarios de los lectores y para que la entrada no se vea en los primeros lugares del Blog, le damos una fecha antigua (por ejemplo una fecha anterior a la de nuestro primer post) y publicamos.

EmailMeFormVJ4
*Dale clic a la imagen para ampliar.



Y para WordPress es distinto, en este caso no sería agregar nueva entrada, tendrán que agregar una nueva página.




Espero que les haya servido este tutorial para crear un formulario para tu Blog, si tienen más dudas no duden en comentarme :)

Formulario Kontactr, hecho en un dos por tres, recomendación por CB


Como siempre, las entradas del Potro de Ciudad Blogger son la perfección. Yo he hecho varios formularios de contacto tanto en emailme.com y con yourmailinglist, pero nada se compara a 
la sencillez y la rápidez con que se hacen con Kontactr. Como siempre, sin desperdicio.



Hay muchos sitios que ofrecen formularios de contacto, pero este en particular me gusta por lo rápido que es para obtenerlo. Pero además de lo fácil y rápido que es, tiene una gran ventaja sobre la mayoría de los formularios de contacto gratuitos: que no tiene un límite de envíos mensual, así que que puedes dejar de preocuparte si te excedes o no.

El servicio no cobra ni un solo centavo, pero tiene una desventaja, y es que si bien podemos personalizar los colores no podemos cambiar el nombre de los campos ni agregar o eliminar más. Aun así, es muy intuitivo y básico, por lo que a muchos puede servir en caso de que no requieran algo muy sofisticado.

Para tener este formulario de contacto en tu blog entra a la página de Kontactr y regístrate, no te lleva ni 30 segundos. Una vez hecho eso te enviarán un correo de confirmación.

Cuando confirmes tu cuenta podrás iniciar sesión y copiar el código de tu formulario, pégalo donde quieras y listo.


No hay que hacer nada más, pero puedes personalizar sus colores si lo deseas. Para ello haz click en Customize y cambia los colores que desees para cada área.

El formulario lo puedes pegar en una entrada, en una página estática, o un gadget HTML/Javascript. Los correos que te envíen através de él te llegarán al correo con el que te diste de alta.

Lo dicho, es un formulario rápido de obtener, fácil de usar y sin tantas pretensiones. Su punto débil es no poder editar los campos, pero al ser gratuito y sin límite de envíos es un formulario de contacto que definitivamente hay que considerar.

-Por el Potro de Ciudad Blogger

Enhanced by Zemanta

Mostrar todas las entradas y comentarios del blog en un cartel


Como habíamos visto en otra entrada anterior sobre cómo poner un script para mostrar todas las entradas y comentarios de nuestro Blog, esta es otra opción pero con un icono para cada sección y también tendrá un contador de días online desde que empezó el Blog, así se vería:

Para colocar este script solamente van Diseño > Elementos de la página > Añadir un elemento HTML/Javascript y pegamos el siguiente código:
<div class='widget-content'> <p><p> <img src="http://i147.photobucket.com/albums/r308/alb3rto_williams/txt.png" /> <script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script> <script src="http://TUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> <strong>Entradas</strong> <p> <p><p> <img src="http://i147.photobucket.com/albums/r308/alb3rto_williams/folder_apps.png" /> <script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script> <script src="http://TUBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> <strong>Comentarios</strong> <p> <p><img src="http://i147.photobucket.com/albums/r308/alb3rto_williams/Globe-icon-1-1.png" /> <script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() – Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(18, 05, 2010, "Días Online" );</script> </p> <p><span style="font-weight:bold;"> </span></p></p></p></p></p></p></p></div>
Ahora solamente cambiamos los valores que están en color azul por el nombre de tu Blog y la fecha en que se inicio. Eso sería todo, solamente guardamos y listo.

Poner un aviso de "cargando página"


Esta es una nueva forma para darle estilo a tu Blog, poniendo un icono diciéndole al visitante que se está cargando la página, y se quita el anuncio cuando se halla cargado totalmente, se basa en un elemento Script, fácil de colocar en tu plantilla.
Imagen Cargando Página Cargando página

Realmente seria para los que tienen muchas imágenes, scripts, gadgets en su Blog y tarda algo en cargarse, y con este anuncio el lector se esperara un poco para que puede cargarse la página.
Para colocarlo en tu plantilla nos vamos a Diseño > Edición de HTML y justo antes de </head> pegamos lo siguiente:
<script type='text/javascript'> window.onload = detectarCarga; function detectarCarga(){ document.getElementById("imgLOAD").style.display="none"; } </script>
Vemos la vista previa, y si todo está bien guardamos, ahora nos vamos Diseño > Elementos de la página > Añadir un elemento HTML/Javascript y pegamos el siguiente código:
<div id='imgLOAD' style="TEXT-ALIGN: center"> <b>Cargando página…</b> <IMG src="http://i147.photobucket.com/albums/r308/alb3rto_williams/cargandoimagen1.gif"> </div>
Solamente cambiamos lo que está en negrita por la url de la imagen de carga que quieras, en Ajaxload puedes encontrar varios diseños de carga, una vez obtenida la imagen deseada la subimos a nuestro alojamiento de imágenes y pegamos la url, ya con esto guardamos y listo.

Por V Junkie

Poner una faviconera en Blogger


Como habíamos visto anteriormente de cómo colocar una faviconera en la cabecera del Blog, ahora les mostrare comoponerla en la sidebar, abajo de las entradas, al final del Blog o donde ustedes quieran.
faviconeria sidebar

Es muy fácil colocarla, lo primero que tenemos que hacer es irnos a Diseño > Elementos de la página > Añadir un elemento HTML/Javascript, y ahí pegamos el siguiente código:
<style type="text/css"> #faviconera { width:300px; text-align:center; margin:10px auto 10px auto; } #faviconera .contimg img { padding:1px 1px 1px 1px; border:1px solid #8C8984; } #faviconera .contimg a:hover img{ border:1px solid #ffffff; } </style> <div id="faviconera"> <div class="contimg"> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> </div> </div>
Si quieren cambiar el tamaño de la faviconera lo pueden hacer en la opción de width, así también como el tamaño delborde y el color del mismo.
Luego debemos cambiar lo que está en color azul por lo que nos pide, el código lo coloque para 4 favicons pero para mostrar más, tenemos que agregar: <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> Guardamos y listo.

Personalizar los links Entradas Recientes y Entradas Antiguas

Image representing Blogger as depicted in Crun...
Image via CrunchBase

En Blogger podemos ver al pie de las entradas unos links de navegación "Entradas más recientes", "Página principal" y "Entradas antiguas", para que el visitante tengas más facilidad de navegar en tu Blog, pero para que se vean de una forma diferente podemos personalizarlos poniendo un icono para cada link.
Links de Navegación
Primero nos vamos a Diseño > Edición de HTML > Expandimos los Artilugios y buscamos los siguientes códigos de cada link de navegación:
Entradas antiguas
<b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'&gt;<data:olderPageTitle/></a> </span> </b:if>
Página principal
<b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if>
Entradas más recientes
<b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if>
Ya encontrado los códigos para cada navegación, lo que está en negrita tenemos que remplazarlo por el siguiente código:
<img src='URL de la Imagen'/>
Solamente tenemos que cambiar donde dice Url de la imagen por tu imagen que quieres colocar. Donde podrás encontrar iconos my buenos para la navegación serian en Find Icons o Icon Finder.

Artículo por V-Junker

Enhanced by Zemanta
Related Posts Plugin for WordPress, Blogger...