• OPINTEMPLATES

    OPINTEMPLATES

    Plantillas Blogger gratis hechas como mejor podemos.

  • Trucos

    HTML

    Pequeños arreglos que pueden mejorar tu blog.

  • Widgets y Gadgets

    HTML

    Muchas pequeñas cosas que pueden llegar a gustarte.

  • Servicios y SW free

    Servicios Free

    Algunos servicios gratuitos que le pueden interesar.

  • Imágenes

    >Imágenes

    Iconos, fondos y aquello que me parece original.

  • Caligrafía

    Fuentes

    Algunas buenas fuentes para decorar tus sitios web.

Mostrando entradas con la etiqueta Servicios. Mostrar todas las entradas
Mostrando entradas con la etiqueta Servicios. Mostrar todas las entradas

5/02/2014

Widget con humor

Frases cómicas, irónicas y para pensar se acumulan en el blog Tirando Piedras Mentales (http://piedrasmentales.blogspot.com.ar) del cual mantengo los Feed a la vista en varios de mis blogs. Lamentablemente con esa modalidad se muestra de manera permanente la misma frase hasta que se publique la siguiente.
Para hacer más dinámica y divertida esta entrega de humor es que implenté un widget que muestra de manera aleatoria una frase diferente cada vez que refresquemos la página o ingresemos nuevamente a nuestro blog.

 Sólo debes copiar y pegar este código en un elemento HTML/Javascript de tu blog.



Leer más

2/05/2014

Añadir botones sociales a todas las imágenes

 

Fotos e imágenes se han convertido en una parte tan integral de los blogs que muchas imágenes son tan importantes como los textos. Ésto no solo es válido para los blogs de fotografía pues cualquier visitante podrá compartir la información de un post en base a la foto asociada al mismo.En el mundo moderno una imagen vale más que mil palabras  .

En este post vamos a ver cómo utilizar las imágenes para conseguir que los visitantes compartan tu posts agregando botones de social bookmarking adheridos a las imágenes de tu blog e ir directamente a compartir la imagen (de ahí el post) en Facebook , Twitter , Pinterest y otras networks.

Para ello vamos a utilizar el gadget de SlingPic que ofrece un servicio para los usuarios de Blogger. péguele un vistazo a la demo a continuación , simplemente coloque el cursor sobre las imágenes para ver las opciones :

View Demo Button

Añadir a Blogger

Usted puede recurrir al sitio web de
SlingPic y allí elegir las opciones que más le gusten o utilizar las siguientes combinaciones pre-hechas.

Nota: Debe haber iniciado la sesión en tu Blogger para poder ingresar el widget.


Default Theme










Dark Theme










Light Theme










Advertencia: En muchos blogs al introducir este servicio se observa un cambio de posicionamiento de las imágenes. Hace más de tres meses que envié la pregunta al servicio de soporte técnico y no han respondido, así que aconsejo usarlo siempre y cuando no altere la alineación de las imágenes.

Suerte.

Fuente:  http://www.spiceupyourblog.com


Leer más

12/04/2013

Medir la velocidad de tu blog


No le voy a negar que existen infinidad de herramientas para verificar el desempeño técnico de su blog o página web.
Por lo general se miden diversas variables que son útiles a la hora de seleccionar nuestros proveedores de servicios. Como en Blogger nuestros proveedores gratuitos son el propio Blogger (y Google) así como también Picassa, no tendremos mucho que analizar más que cambiar de proveedor de servicio de Internet.

¿Cuales son los factores que afectan la velocidad de mi blog?

Hosting

Sin duda el principal factor. Dónde está ubicado el servidor, la latencia del mismo, el número de saltos (tracert) hasta llegar al mismo, el tiempo de respuesta, la velocidad del disco duro que tiene instalado, los recursos del servidor (RAM, Procesadores, etc), tipo de tarjeta de red, Sistema Operativo, ancho de banda asignado, etc. Un hosting de calidad es necesario, a ser posible en el mismo país hacia el que va dirigida la web, con unas características suficientes y a ser posible dedicado (muy importante este detalle).

Red

No es lo mismo la red donde está conectado nuestro servidor, al igual que la red a la que se conectan nuestros clientes. Que tu centro de datos tenga contratada una red de calidad es muy recomendable, tanto por fiabilidad como por velocidad. A veces se redireccionan a otros nodos por averías en la red o mantenimiento, y pasamos de tener un tracert de 8 saltos a tener uno de 13 saltos. Cuanto menos nos pase, mejor. El operador de ADSL (o similares) con el que trabajen nuestros clientes también influirá en la velocidad a la que ellos cargarán nuestra página web, aunque este factor escapa totalmente a nuestro control .

Programación

Otro factor muy importante. En igualdad de condiciones, una web bien programada y optimizada, sobre todo en temas de diseño y consultas a bases de datos, correcto uso de la cache, etc, influye enormemente en la velocidad de carga de la misma. Hay que cuidar cada vez más estos detalles.

Una vez conocidos los factores que determinan el tiempo de carga de tu página web, es hora de ver las herramientas para poder hacer dicho proceso, pero para mí hoy en día hay na que me resulta eficiente y les vengo a recomendar sin dejar de lado a las otras:

Pingdom Tools es, sin duda, la herramienta online mas completa para medir y mejorar la velocidad de carga de tu página web. Su funcionamiento consiste en testear tu página web por completo rastreando todo el contenido a través del código HTML (es capaz de detectar imágenes, CSS, Javascripts, RSS, Flash y frames/iframes).

http://tools.pingdom.com/fpt/
Click para probar tu blog
 
De hecho, imita la manera en la cual se cargaría tu web normalmente. El funcionamiento es realmente sencillo, solo ingresamos la url y listo, le damos clic en “Test now!”, pero no todo queda ahí, ya que, de forma gratuita, te permite medir 3 bloques importantes de tu página web:
  • Test total de la página web: Aparte de mostrarte el tiempo total de carga de la página web, te muestra individualmente cada uno de los elementos de tu pagina (en forma de grafico de barras), desde que hacen contacto con tu servidor hasta se descargan.
  • Salud DNS: Comprobación rápida de la conexión con tu servidor, algo muy útil cuando tienes problemas de carga.
  • Ping y Traceroute: Son comandos muy útiles que nos permiten acceder a información básica de nuestro equipo para poder, por ejemplo, comunicarnos vía remota o con otros equipos de la red.
  •  
Muy util sin dudas ya que su gráfico de barras nos permite apreciar el orden en que se cargan los elementos, su tiempo y su peso. Con esa información deberias poder decidir que puedes eliminar de tu blog para mejorar la carga y que no.
También incluye un historial estadístico para ver el avance en la optimización en el paso del tiempo, pero también requiere un dominio propio para que no aparezcan resultados de otros blogs con la terminación .blogspot.com.

Fuente  http://ignaciosantiago.com


Leer más

10/13/2013

Coloreando con imgr.co


Cuando nos ponemos a trabajar en nuestros blogs se pone de manifiesto que para un buen diseño hace falta no solo un toque de buen gusto sino conocer bien que paleta de colores usaremos a la hora de colorear.
Los mismos generalmente obedecen a un criterio previo o a una imagen que hemos tomado como principal.
Así resulta que nos pasamos mucho tiempo tratando de encontrar los colores que corresponden a alguna imagen y así poder continuar con el diseño.

Todo esto se soluciona con un servicio gratuito anidado en la Red imgr.co nos pertime subir una imagen específica, sea un diseño o una captura de pantalla para luego encargarse de analizarla hasta darnos la paleta total de colores con su correspondiente código hexadecimal.


http://imgr.co/imgr.php

Espero les sea de utilidad


Leer más

8/31/2013

Cómo ven mi blog en otros dispositivos?

No solo quienes tratamos de diseñar templates necesitamos ver como aparece nuestro blog en los diferentes aparatos que poseen los usuarios. De la disposición, velocidad y claridad en que nuestro blog aparezca depende que los usuarios o visitantes se queden un rato más o quieran regresar.
En las últimas semanas he estado practicando un poquito de lo que se llama Responsive Design y que realmente nos permite llegar de la mejor forma posible a todos los terminales sacrificando la belleza o personalización que a muchos nos gusta usar para decorar y hacer especial a nuestro blog.
El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es la técnica de diseño usada  que mediante el manejo de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al mayor tipo de los entornos del usuario.
Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado se mostrará de diferentes maneras, preferiblemente la mejor adaptada en cada tipo de dispositivo: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles y la pantalla queda con letras e imágenes tan pequeñas que casi no se pueden leer.
Así los desarrolladores se evitan tener que diseñar aplicaciones ad-hoc para versiones móviles, por ejemplo, una aplicación específica para iPhone, otra para móviles Android, etc.
Como hoy en día, la variedad de dispositivos existente en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación es muy pobre, les recomiendo la utilización de un servicio web gratuito que les permite confirmar de qué manera se ve nuestro blog en cada aparato que se encuentra en el mercado. Claro, si se ve muy mal habrá menos visitas y necesitarán usar mi próximo template, que será full Responsive.


Para comprobar como se ven nuestros blogs sin tener que pedir prestado otros aparatos para hacerlo, visiten http://resizemybrowser.com/ , elijan una medida o aparato (unos en posición vertical y horizontal) hagan click y en la ventana de URL del navegador que se les abrirá peguen la dirección de sus blogs. Click y verán cómo los ven a ustedes los demás.

Otro sitio donde pueden obtener similares ( o mejores ) resultados es  http://responsivetest.net


Leer más

7/22/2013

Presentación de diapositivas con Picasa



Sé que son muchos los lectores que se hacen malasangre con el tema de las presentaciones en Blogger. Incluso he incluido en mis tutoriales una descripción para cambiar el tamaño del widget que viene de base en Blogger. (Aquí) y que forma parte del top five de los post más frecuentados o populares en este blog.

Sin embargo la cosa es más simple desde hace un tiempo (largo). No hace falta recurrir a ninguno de los diferentes sistemas de almacenamiento de imágenes que proveen widgets de presentación, sinplemente hay que usar lo que uno tiene de regalo gracias a Google: Ésto es , por supuesto, Picasa.

Hágame caso y entre en su escritorio de Blogger.

Si usted hace Click en la imagen de su perfil en la esquina derecha superior, seguramente le aparecerán algunas opciones de entre las cuales le sugiero haga click en "Configuración de la cuenta".

Se abrirá otra ventana en la que a la izquierda y bien abajo se observa la palabra "Productos" Haga click allí.

Le aparecerá entonces una lista con todos los productos que usted está usando y entre ellos debería encontra uno llamado "Álbumes web de Picasa". Hagame caso y haga click allí.

Al entrar le aparecerá una frase que dice "Haz clic aquí para volver a Álbumes web de Picasa." hágale click porque en el nuevo formato aún no he jugado lo suficiente como para indicarle el camino.

Arme un álbum nuevo o seleccione un álbum existente. Ábralo.

En la extrema derecha le aparecerá un texto que dice "Enlazar a este álbum" hágale click.

Se desplegará un nuevo menú con una linea que dice "Incrustar proyección de diapositivas" si, adivinó, haga click

Al fin le aparecerá un menú para preparar su presentación.


Coloque la medida deseada.

Indique Reproducir automáticamente y copie el código resultante que el sistema le entrega más abajo.

Presione la tecla "Listo" y su código deberá pegarlo en algún elemento HTML, o como yo lo hago aquí, directamente dentro de un post.


Y de paso le muestro mis pinturitas.









Suerte.



Leer más

5/16/2013

Por que Paypal no es buena idea



Nadie duda de la revolución tecnológica que ha desencadenado el uso masivo de Internet, incluso podemos afirmar que ha cambiado los hábitos de compra de millones de personas en todo el mundo. Debido a este boom tecnológico es cada vez más habitual utilizar servicios bancarios on-line, hasta el punto de que hayan surgido entidades bancarias virtuales sin oficinas físicas que permiten realizar transacciones a cualquier parte del mundo por medio de la Red.

Una de estas empresas surgida para satisfacer las necesidades de consumidores y comerciantes es PayPal. Esta empresa permite a sus usuarios la realización de pagos y cobros de forma instantánea. Las personas que se dedican a realizar transacciones en Internet, por ejemplo en e-Bay, generalmente encuentran en Paypal la forma idónea para realizar sus actividades comerciales. Por eso es habitual que cada vez sean más las tiendas electrónicas que acepten PayPal como otra forma más de pago más.

El sistema de pago por Internet es extremadamente simple: cuando el usuario quiere pagar, sencillamente introduce una cuenta de e-mail y el vendedor carga el importe. PayPal retira entonces ese dinero de la cuenta del usuario y lo traspasa a la del vendedor, si el dinero de la cuenta Paypal no cubre el total del importe, Paypal carga la diferencia a la tarjeta de crédito asociada.

Hasta aquí parece que todo son ventajas, pero existen como poco 7 razones fundamentales por las que no se aconseja utilizar Paypal:

1 - Paypal NO es un banco, es un empresa privada que presta unos servicios financieros y no está respaldada por ningún sistema bancario, si Paypal quiebra pierdes tu dinero.

2 - Según las condiciones de servicio de Paypal, al hacerte usuario renuncias a los derechos de reembolso por utilización fraudulenta o no autorizada de tu tarjeta de crédito.

3 – Falta de cobertura legal, al ser una empresa estadounidense, cualquier contencioso que alcance la vía jurídica deberá resolverse en Estados Unidos, presentando cuanto menos dificultades para que los usuarios extranjeros puedan defender sus derechos por la vía legal.

4 – Las condiciones de Paypal son abusivas y cambian constantemente, entre sus páginas de condiciones se aprecia la falta de legislación internacional sobre este tipo de empresas. Según sus condiciones PayPal puede bloquear preventivamente las cuentas de un usuario sin tener quedar más explicaciones. Hay numerosos hilos en foros que explican este tipo de abusos por parte de Paypal e incluso hay constituidas asociaciones de usuarios que han interpuesto demandas judiciales.

5 – Paypal puede embargar el saldo de la cuenta indefinidamente, del mismo modo que en el punto 4 para recuperar las cantidades embargadas se necesitarán muchísimos trámites y paciencia, ya que su servicio de atención al cliente es casi tan eficiente como el de e-Bay. Y por supuesto las cantidades embargadas serán custodiadas por Paypal mientras dure la “investigación”.

6 – El usuario siempre tiene las de perder ante cualquier problema que surja, al ser PayPal el único juez tomara la decisión que más le convenga a la empresa. Si el usuario recibe un pago realizado con una tarjeta de crédito robada los fondos le serán embargados, si el dinero se pierde al gestionar el cobro el usuario tendrá que realizar innumerables trámites para optar a recuperarlo, si como comprador no recibe el producto solo recibirá una parte del importe siempre que puedan embargar esos fondos al vendedor.

7 – Las cuentas de Paypal son un botín muy deseado por los ciber-delincuentes, es frecuente recibir correos falsificados haciéndose pasar por eBay o Paypal con la esperanza de tener acceso a las cuentas de sus usuarios. Aunque PayPal no es la única empresa que ha sido víctima del spoofing sí que es cierto que es una de las que más lo sufre.

La utilización de PayPal significa tener que aceptar la ética comercial de esta empresa y esperar que actúe honestamente por razones de prestigio, pero debido a la falta de un marco legal que abarque este tipo de actividades no es una institución que ofrezca garantías a sus usuarios.

Carlos Cabezas López

Vía: Solotutoriales.com


Leer más

4/10/2013

El nuevo editor de Blogger para Dummies



Para muchos el nuevo Editor de Blogger resulta atemorizante, pero para decirles la verdad se asemeja mucho a cualquiera de los editores de uso comercial que podemos utilizar para diseño Web.

No solo su estructura es la misma, sino que ahora aparecen esos números de línea que siempre nos daba como ¿ayuda? para encontrar donde había una inconsistencia que no nos permitía guardar la plantilla.

Pero yo no voy a describirles las mejoras. Para eso están nuestros mejores Bloggeros técnicos tales como Jmiur, Oloman o El Potro.

Como siempre Jmiur es un poco más críptico pero fue el primero en informar. Oloman es muy práctico en su descripción y El Potro como siempre lo describe de muy buena forma.
 
Les dejo los enlaces para que descubran que podemos seguir trabajando como hasta ahora y con algunas mejoras que con el tiempo dominaremos y si nos las fueran a quitar, extrañaríamos mucho.


http://vagabundia.blogspot.com/2013/04/mejoras-en-el-editor-de-plantillas-de.html

http://www.oloblogger.com/2013/04/nuevo-editor-html-blogger.html

http://ciudadblogger.com/2013/04/el-nuevo-diseno-en-la-edicion-html-de.html


Leer más

3/05/2013

Widget de suscripciones estilo Mashable


Hoy les traigo un widget orientado al tema de suscripciones a nuestro blog. La idea es agrupar en una sola área la totalidad de botones de enlace para que nuestros lectores se conviertan en seguidores.
Existen muchos de estos artilugios de estilo Masheable, pero éste en particular es una adaptación propia que hace uso de los colores fuertes para llamar la atención del visitante.

Mashable (Mashable Inc.) es un blog de noticias de Internet, fundado por Pete Cashmore en julio de 2005. Con un ranking de tráfico de 346 (170 a nivel de Estados Unidos), según Alexa, se ubica como uno de los blogs más importantes en Internet. Mashable trata regularmente temas relacionados con las redes sociales, tales como YouTube, Facebook, Google, Twitter, MySpace, asì como sobre empresas tecnológicas (como Apple), aunque también informa sobre sitios y redes sociales de perfil más bajo. Mashable es popular en muchas redes sociales. Según lo publicado en su homepage, para diciembre de 2011, tenía más de 2,6 millones de seguidores en Twitter, más de 730.000 seguidores en Facebook y más de 572.000 suscriptores de RSS.

En esta adaptación personal de otros artilugios similares también he colocado la aplicación de Facebook pero en su modalidad con imágenes de los seguidores. Si ya los tienes así, simplemente deberás suplantar mi codigo por el tuyo.

Seguramente podrás hacer las adaptaciones necesarias para que se ajuste a tus requerimientos y servicios que tienes contratados. Por lo pronto si copias el siguiente código y lo pegas en un elemento HTML/JAVA contarás con una versión funcional de uno de mis sitios.
Para adaptarlo sige las indicaciones que te dejo más abajo.

 
 
Hay una parte del código que deberás llenar con tus datos personales para que el widget te funcione correctamente.

Realiza estos cambios
1 <div class="g-plus" data-height="69" data-href="//plus.google.com/106558400164530258627" data-rel="author">
</div>

Los números que están marcados de color rojo 106558400164530258627 debes remplazarlos por los números que se definen tu perfil de google +.

2 <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPlano-Creativo/149021465232802#&send=false&layout=standard&width=280&show_faces=true&action=like&colorscheme=light&font=arial&height=80px" style="border: none; height: 80px; overflow: hidden; width: 280px;"></iframe>

El link que esta marcado de color verde
 http%3A%2F%2Fwww.facebook.com%2Fpages%2FPlano-Creativo/149021465232802 debes remplazarlo por el link de tu pagina de Facebook fanpage.

3 <div class="g-plusone" data-href="http://www.planocreativo.blogspot.com/" data-size="large">
</div>

El link que esta marcado de color naranja http://www.planocreativo.blogspot.com/ deberás remplazarlo por el link de tu blog de blogger.

4 <div class="twitter"><a href="https://twitter.com/GrupoDLYC" class="twitter-follow-button" data-show-count="true" data-lang="es">Seguir a @GrupoDLYC</a>

El link que esta marcado de color purpura https://twitter.com/GrupoDLYC deberás cambiarlo por el link de tu pagina de twitter.

Al igual que las letras que están marcados de color azul GrupoDLYC deberás sustituirlo por las letras de tu follow twitter.

5 Ahora los links sociales que estan marcados de color violeta los deberás cambiar por los de tus cuentas en cada red social. 


 <ul class="social">
<li class="rss"><a href="http://feeds.feedburner.com/blogspot/otHSh">RSS Feed</a></li>
<li class="twitter"><a href="https://www.twitter.com/GrupoDLYC">Twitter</a></li>
<li class="facebook"><a href="https://www.facebook.com/pages/Plano-Creativo-Ideas-en-Foco/149021465232802">Facebook</a></li>
<li class="youtube"><a href="http://www.youtube.com/Pinchotheone">Youtube</a></li>
<li class="linkedin"><a href="http://www.linkedin.com/pub/orlando-daniel-pin/30/b81/a8/">Linkedin</a></li>
<li class="pinterest"><a href="http://pinterest.com/pinchothebest/">Pinterest</a></li>
</ul>

6 Si deseas eliminar o agregar otras redes sociales a las que te encuentras subscripto deberás agregarla o eliminarla en la secuencia que sigue, respetando la background-position de la correspondiente imagen en el sprite "OPin_socialsprite.png"

 .sociallinks .social li.rss {
background-position: 0 -240px !important
}
.sociallinks .social li.twitter {
background-position: 0 -150px !important;
}
.sociallinks .social li.facebook {
background-position: 0 -450px !important;
}
.sociallinks .social li.youtube {
background-position: 0 -90px !important;
}
.sociallinks .social li.linkedin {
background-position: 0 -390px !important;
}
.sociallinks .social li.pinterest {
background-position: 0 -480px !important;
}


7 Para que funcione el box para suscripción vía email, el servicio debe estar habilitado en FeedBurner. Para ello, luego de habilitarlo en la pestaña Publicitar, deberás cambiar el texto marcado en verde blogspot/otHSh (que en este caso corresponde al blog Plano Creativo) por la uri que caracteriza el feed de tu blog.

 <!--Email Subscribe --><div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=blogspot/otHSh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px;font-size: 12px;" id="email" name="email" value="Ingrese su Email aquí.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input type="hidden" value="blogspot/otHSh" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Suscribir" /></form>
</div>



8 No borres el pie de página "Quiero ésto en mi blog" así otros amigos también pueden usar este widget.

Recomiendame en Google


Leer más

Los servicios de Social Sharing más populares

 
 
Todos sabemos cuan importante es para un blog la participación en las redes sociales . 
Hace unos años los bloggers nos veíamos obligados a poner docenas de botones sociales personalizados, pero con la creciente aparición de nuevos sitios, resultó casi imposible lograr poner todos los botones en el mismo blog. Así es como aparece la solución en la forma de un widget todo-en-uno, que aunque sea simple en su forma, luce de manera hermosa una vez instalado.
El objetivo de los botones sociales en un blog se centra en animar a los lectores a compartir enlaces de nuestra factura en los más populares sitios de redes sociales, tales como Twitter, Facebok, Google y muchos otros más. De esta manera un blog puede recibir una rápida popularidad en esos sitios de redes sociales y también aumentar sus tráficos sociales. Hay muchos servicios disponibles en la web que ofrecen una variedad de interesantes artilugios sociales o widgets. Estos widgets se pueden personalizar tanto como sea su gusto por el diseño y con respecto a la instalación, es tan sencilla como contar hasta 3. Solo siga las instrucciones.

Por lo tanto, aquí les dejo una lista de los 4 sistemas más populares para Compartir en Redes Sociales (Sharing Widgets) ampliamente utilizados por millones de bloggers de todo el mundo en diferentes plataformas de blogs.

1. Addthis




Entre todos los widget de intercambio social "addthis" es el más utilizado y popular con más de 14 millones de dominios en todo el mundo. Cuenta con 7 estilo diferente widget y disponible para 14 plataformas diferentes.



2. ShareThis




"ShareThis" es la segunda más popular y favorita de los bloggers que ofrece 8 hermosos estilos del widget para 10 diferentes plataformas de blogs 


3. Shareaholic




"Shareaholic" es el tercero en popularidad para el intercambio social, ofreciéndo 3 estilos diferentes de widget y un widget especial de acción para los diferentes navegadores web .


4. Sharelockerz




"Sharelockerz" es un widget social simple pero potente y la cuarta en popularidad, con servicio disponible para 12 plataformas de blogs diferentes.


Sólo tienes que elegir la que más te gusta y ver como tus visitantes comparten tus posts.


Leer más

2/20/2013

ClockLink, útiles relojes para tu blog




ClockLink.com te provee de los relojes Web más utilizados en el mundo, con más de 30 millones de visitas totales. Además, los relojes pueden ser configurados para mostrar cualquier zona horaria en el mundo , así que no son sólo decorativos sino muy prácticos también. Puedes utilizar su reloj mundial para ver todas las zonas horarias del mundo tal como se lo muestra más abajo. El servicio es totalmente gratuito y puedes insertarlo facilmente en tu web o blog.
Lo mejor es pasear un rato por la galería de diseños y buscar aquel que es de nuestro agrado. Luego podrás ajustar tamaño y color, así como la zona horaria a la que perteneces.

http://www.clocklink.com



Leer más

2/14/2013

Botón para compartir en redes sociales


La amiga MC Chueco nos planteó una interrogante muy difícil de complacer. El tema de los botones para compartir nuestros contenidos en las redes sociales tiene tantas posibilidades como desarrolladores web existen.
Incluso el propio Blogger provee una serie de íconos para compartir que son sumamente apropiados y tienen dimensiones pequeñas. Claro, muchos prefieren poner solo algunos y de diseño que concuerde con la estética del blog, como para darle un toque personal a ese ítem.
En mi caso uso de todo un poco, según el blog donde los estoy ubicando. Por lo general resulta práctico usar algún sistema como Share This (http://www.addthis.com/) o Lockerz (http://share.lockerz.com/) Con cualquiera de los dos sistemas uno tiene muy poco que agregar y resulta sencillo ponerlo en funcionamiento.
Si no me creen vayan hasta estas web e intenten instalar alguno de sus códigos.
Pero para hacerla fácil les traigo el código necesario para instalar la tecla que uso en este blog y que corresponde a Share This.

No olvides hacer un resguardo de tu plantilla antes de hacer cualquier modificación, para así poder recuperarla si algo sale mal.

El código es muy sencillo:

<div class='share'>
<script src='http://w.sharethis.com/button/sharethis.js#tabs=web%2Cpost%2Cemail&amp;charset=utf-8&amp;style=default&amp;publisher=903046cd-e895-42fe-b2c0-51389ab5d9e6' type='text/javascript'/> </div>


Si quieres centrarlo en la página simplemente usa éste otro:

<div class='share'>
 <center>     <script src='http://w.sharethis.com/button/sharethis.js#tabs=web%2Cpost%2Cemail&amp;charset=utf-8&amp;style=default&amp;publisher=903046cd-e895-42fe-b2c0-51389ab5d9e6' type='text/javascript'/></center>
      </div>



Sólo tendrás que expandir artilugios y colocarlo preferentemente después del código  <div class='post-footer'> 

Con esto ya tendrás operativo el sistema, solo que aparecerá el siguiente símbolo en tamaño muy pequeño .



Como puede que tengas ganas de cambiar esto por algo más personal, deberás incluir un pequeño CSS antes del cierre ]]></b:skin>

Copia y pega:

 .share a{
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64ij9W1LhCsh_fcL8SzH-8RKi0cEyaAMUotyGUtnijCYQmMNcOBDVvtO_G_iRHUS96eDh2kRNtJei2PolO6Tijwep-NY3wvfCFIRCRc1UK6oFf-Z5KHYWTMb0LajBpexSegerCecUSS8/s181/post-bookmarkPIN.png) no-repeat!important;
     width: 181px;
     height: 31px;
     padding: 0!important;
     margin: 0;
     text-indent: -100em;
     overflow: hidden;
     display: block;
}


Si quieres cambiar la imagen de la tecla simplemente diseña la tuya y substituye el código de URL de la imagen.

Listo 

Que lo disfrutes.



Leer más

2/04/2013

Estrellas para votar en tu blog con Graddit


Desde los inicios en Blogger el tema de la puntuación mediante estrellas ha pasado por variados estados. Primero se encontró como widget natural, luego fue eliminado, una vez más colocado y finalmente adaptado por los grandes desarrolladores externos. Así terminamos con variadas implementaciones que dejaban de funcionar justo cuando uno más las necesitaba o simplemente no tenían posibilidades ni de mostrar el mínimo texto en castellano.
Hace un tiempo le dedicamos un post a la implementación que nos permitía usar estas benditas estrellas en castellano, para terminar sorprendidos con que la misma dejó de trabajar pocos días más tarde de nuestra publicación.
Sin embargo el amigo de Simplex Design se paseó por Internet, hasta encontrar Graddit.com, un sistema de calificación por estrellas que trabaja perfectamente para Blogger. Así que en este post, voy a comentar cómo agregarlos a su  blog. Tal vez sea útil para usted tener la certeza de un proveedor gratuito que cumple con todas nuestras expectativas.

1, vaya al Escritorio de Blogger -> Plantilla -> Edición de HTML

2, agregue este código antes de </ head>

     <link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

3: Vaya a Graddit.com. Elija un estilo que desee aplicar. Haga clic en el enlace de Blogger




 Un cuadro de texto aparecerá con el código dentro. Copie el código.

4, Regrese al Escritorio de Blogger  -> Plantilla -> Edición de HTML

 
Encuentra el código <data:post.body/>

 
Y pegue el código que copió en el paso 3 antes de <data:post.body/>

Eso es todo. Guardar plantilla y se puede comprobar el resultado.

 
Usted puede verlo en funcionamiento en OPINTEMPLATES y comprobar que algunas partes del texto pueden ser modificadas para que aparezcan en castellano.


Este post está basado en el original de Simplex Design
 http://www.thesimplexdesign.com/2012/09/graddit-star-rating-for-blogger.html


Leer más

1/04/2013

Cómo desarrollar un sitio web atractivo


Si tus estadísticas están cayendo en picada y cada vez son más las personas que no regresan a tu sitio web, es obvio que existe algo que no funciona. Obviamente, desarrollar un sitio web atractivo que atraiga una y otra vez a los lectores no es una tarea sencilla.
Las causas de la mala aceptación pueden ser muchas, lo importante es analizar el sitio desde una perspectiva objetiva y valorar cuáles de estos factores están incidiendo en la percepción de los visitantes.
1. La saturación visual de textos e imágenes. Es esencial que el diseño del sitio web posea una estructura ordenada de forma que no presente una imagen caótica. Se ha comprobado que los sitios particularmente desorganizados provocan estrés en los visitantes por lo que, probablemente, estos no querrán regresar. Cuando se trata de diseño, recuerda que menos es más.
2. Una navegación confusa. Los usuarios de Internet suelen premiar la simplicidad. Y el mejor ejemplo de ello es Apple. Si tu sitio web cuenta con menús extensos y con múltiples enlaces, esto provoca la sensación de desorden y al visitante le será difícil moverse dentro del sitio web y comprender su organización. Recuerda además, que la organización da sensación de control y seguridad por lo que tus visitantes querrán volver.
3. Incompatibilidad con los diferentes navegadores y dispositivos móviles. Aunque no seas un programador experto, debes asegurarte de que tu sitio web tenga una visibilidad aceptable en los principales navegadores que se usan en la actualidad así como que posea una versión para los iPhone y los eReader. De esta forma no te estarás cerrando a ninguna posibilidad. Debes recordar que a veces los navegadores producen superposiciones de textos e imágenes o provocan que el diseño se corra obligando a realizar Scholl muy largos. Por ende, lo mínimo que puedes hacer es revisar la funcionalidad de tu sitio web en los diferentes navegadores y dispositivos.
3. Publicidad excesiva. Cuando los sitios web están tan llenos de publicidad que cuesta encontrar el contenido y cuando se usan pop up que molestan al visitante, es muy probable que este no vuelva. Por supuesto, la solución no está en eliminar la publicidad sino en insertarla armónicamente con el diseño web.
4. Lentitud al cargar los contenidos. Con la inmediatez de Internet, no hay nada más exasperante que un sitio web que se demore en cargar. Esto puede suceder por varios motivos: un mal proveedor de host o un sitio web con imágenes demasiado pesadas. De una forma u otra, ten en cuenta que 10 segundos ya se considera un sitio lento en cargar. En Pingdom podrás verificar cuánto tarda tu sitio web.
5. Usar plantillas populares. Existen decenas de plantillas populares, muchas de ellas las ofrecen las mismas plataformas como Blogger y Wordpress. El uso de ellas puede ser contraproducente ya que anulan toda la identidad del sitio web. Recuerda que en un mundo tan amplio como Internet, diferenciarse es esencial.
6. Contenido poco original. En la red ya existen cientos de sitios que copian los contenidos de otros. En la misma medida en que tus visitantes comiencen a percatarse de que copias siempre de los mismos sitios web, optarán por visitar directamente a estos.
7. Ausencia de una temática principal. Independientemente del número de tópicos que se pueden abordar, es importante que el visitante aprecie una consistencia temática. De esta forma se puede crear una identidad que te diferencie del resto de los sitios de la web.





Leer más

11/08/2012

Tu blog en Facebook


Nos guste o no, Facebook aumenta rápidamente su cuota de mercado y con ello se vuelve una herramienta cada vez más importante para la promoción de un sitio web. Para un sitio web existen esencialmente dos espacios de promoción: Los grupos y las páginas.
Las páginas de Facebook se muestran como la opción más completa, pues además de herramientas de discusión, cuenta con otras herramientas de interacción; El botón de “Me gusta” el más característico.

 

Ventajas de tener una página en Facebook para tu blog

  • Ofreces un método de suscripción alternativo a personas que de otro modo, no seguirían tu blog.
  • Abre un nuevo espacio de discusión e incorpora otras formas de interacción a tu contenido.
  • La estadísticas de los perfiles de los miembros son muy detallas y de gran utilidad para conocer a tus lectores.
Aunque tiene también desventajas como descentralizar los comentarios. En lugar de comentar tus artículos, algunos usuarios comentaran directamente en Facebook.

 

Cómo crear una página en Facebook

1. Todo inicia con un sencillo formulario desde:
http://www.facebook.com/pages/create.php




Donde hay que escoger el tipo de página y su nombre.

2. Edita la información de la página.
Comienzas agregando una imagen de perfil para la página:



El siguiente paso es sugerir la página a tus amigos, aunque esto no es del todo recomendable, pues aun esta vacía, además que puedes hacerlo en el futuro. Si piensas igual, da clic en “Omitir”.
El siguiente paso es agregar la URL de tu blog o sitio web y una pequeña descripción. En la descripción te recomiendo poner también tu URL, pues es más visible ahí que en la sección que Facebook destina para la URL.




3. Importar tu contenido

Una forma de importar tus contenidos pero haciendo que los lectores vayan a tu blog a leerlos es mediante una aplicación llamada RSS Graffiti.

3.1 Lo primero que debe hacerse es autorizar a RSS Graffiti desde el botón “Click HERE to authorize RSS Graffiti“.

3.2 Lo siguiente es escoger la página que acabamos de crear (esta debe aparecer del lado izquierdo) y autorizar la publicación en el muro de la página, también se puede configurar para que se publique en el muro personal, aquí dependerá de tus necesidades


3.3 Agregar la URL del feed dando clic en el botón “+ Add feed”





4. Configurar permisos.
En Facebook abundan las opciones para dar o restringir permisos. Al regresar a “Editar página” encontraras la configuración general por país o edad, el muro, enlaces, foro y video.

5. Invita a tus amigos y a tus “amigos”.
Como último paso ahora sí puedes enviarle una invitación a todos los amigos que creen que puedan estar interesados en el contenido de tu blog. La opción esta igualmente en la barra lateral de tu página.
Dependiendo de la importancia que quieras darle a la suscripción por Facebook, puedes agregar un widget a tu blog, con un enlace directo a hacerse fan, el número de fans y algunos de los suscritos.
Para crear el panel entra en la barra lateral a “Editar página” y posteriormente del lado derecho “Promocionar con un panel para fans”.

 

Después de publicada una página

Estadísticas


Una vez que la página ya ha sido publicada y se tiene una cierta cantidad de fans, puedes ver el perfil de los suscritos, desde la barra lateral, en el recuadro de “Estadísticas” esta el enlace a “Ver todas”, donde tendrás un perfil bastante completo de tus lectores: Genero, edad, país, idioma, etc.

URL amigable
Las páginas por defecto tienen un URL muy larga y difícil de recordar, algo como:
http://www.facebook.com/pages/Blog-and-Web/206438048391
Actualmente Facebook impone un mínimo de 25 fans para cambiar la URL; si tu página ya los tiene puedes cambiarla accediendo a:
Donde tienes la opción “Escoge un nombre de usuario para tus páginas” y cambiarlo rápidamente. Ya con esto queda completa una página para tu blog.

Colocar recuadro de seguidores en el blog


Debes entrar en el sitio

 https://developers.facebook.com/docs/plugins/

Allí puedes seleccionar cualquiera de los plug-in para instalar en tu blog, pero te recomiendo el Like Box.
Lo más importante es que copies la dirección que ya tiene tu página en Facebook y que llenes los datos para ajustar el widget a las medidas y colores de tu sitio.
Te recomiendo deseleccionar el ítem Show Stream pues hace que el widget sea muy largo.
Una vez que hayas logrado ver tu diseño en la vista previa puedes presionar el botón Get Code y así obter dos secciones de código que deberás incluir en tu blog.
La primera lucirá como algo así 

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

y deberás incluirla dentro de tu plantilla y a continuación del código de apertura <Body>

El otro código deberá incluirlo como cualquier gadget como elemento HTML en el lugar del blog donde desees que aparezca el widget y es algo así

<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Ahora cualquier lector podrá suscribirse con un "Me gusta" y aparecerán las caras de tus seguidores en Facebook en tu blog también.


Nota original de  http://blogandweb.com


Leer más