viernes, 13 de agosto de 2010

Botón de Twitter fijo en Blogger

 En esta oportunidad voy a enseñarles a crear y añadir un botón de Twitter fijo.

La ventaja de este botón de Twitter fijo es que será siempre visible no importa en que parte del blog estemos situados, lo cual llamará mucho más la atención de los visitantes logrando así ganar nuevos seguidores.

Añadir el botón de Twitter fijo en Blogger es realmente muy sencillo, y para ello debemos ir a la edición HTML de la plantilla (Diseño > Edición HTML) y buscar por este código:


<div id='main-wrapper'>


Luego debemos pegar el siguiente código justo antes del anterior:



<div id="twitterfijo">
<a style="display:scroll;position:fixed;bottom:
345px;right:0px;" href="URL-DE-TWITTER">
<img src="
http://4.bp.blogspot.com/_y1w5uc7K-b4/TGXRShEKhQI/AAAAAAAAGok/B1csMvH53js/s320/66666.png"/></a>
</div>


Antes de guardar los cambios debemos hacer una modificación: donde dice URL-DE-TWITTER debes ingresar la URL de tu perfil de Twitter para que te sigan.

También podes modificar la imagen cambiando lo que aparece en color rojo por la url de tu imagen.
Hacemos vista previa, y si todo está en condiciones ya podemos guardar los cambios y tenemos el botón de Twitter fijo en Blogger.

lunes, 9 de agosto de 2010

Este es un truco muy sencillo y de gran utilidad. Se trata de una lista con los títulos de tus publicaciones, que va cambiando. De esta manera se invita a los que llegan al blog a que lean diferentes entradas y no solamente las últimas. Te animo a usarlo. Es simple de colocar y si no te gusta... lo retiras y listo. No hay que tocar la plantilla.
Comenzamos: En síntesis, copiar este codigo colocando tu URL donde está el pedacito destacado en rojo.

1- Lo que tenes que hacer es Copiar y pegar el código que dejo abajo  en un Gadget HTML. Para hacer esto tenes que ir a Diseño>Elementos de la pagina>Añadir un Gadget>HTML/Javascript
2- Allí pegamos el siguiente código:


<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 10;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div> 

3- Ahora modifica donde dice "NOMBRE DE TU BLOG". También puedes modificar la cantidad de enlaces que se mostrarán: 10 es lo que muestra este codigo.

4- Guardar los cambios. Listo.

Con esto ya tenemos instalado el gadget para mostrar entradas aleatorias .
Leer más...

Para que nos agreguen a FAVORITOS

Este código les permitirá a tus lectores añadirlos a sus listas de FAVORITOS o MARCADORES.
Lo que tenes que hacer es Copiar y pegar el código que dejo abajo  en un Gadget HTML. Para hacer esto tenes que ir a Diseño>Elementos de la pagina>Añadir un Gadget>HTML/Javascript
<a href="javascript:window.external.AddFavorite('http://bloggerinck.blogspot.com','Bloggerink')"><small><font face="Verdana" size="2">Agregar a favoritos</font></small></a>

Ustedes reemplazarán los sectores: url del blog, nombre del blog, letra y tamaño.
Yo lo dejo como lo coloqué en el mío así les resulta mas sencillo identificar lo que van a reemplazar.
Lo copian, pegan en el bloc de notas, editan y a guardarlo en sus blogs.
Leer más...

domingo, 25 de julio de 2010

Como mejorar un blog en 10 pasos



Hay muchas formas de mejorar un blog, algunas implican inversión de dinero, otras no,  pero sí de tiempo y esfuerzo. Entre las principales mejoras que se le pueden hacer a tu blog, están:
  1. Comprarle un dominio. No es lo mismo que tu blog sea blog4u.blogspot.com o blog4u.wordpress.com, a que sea blog4u.com por ejemplo. Un dominio independiente te permite ser dueño de tu propia marca y conservarla junto con su pagerank.
  2. Comprarle un hosting. Este paso te servirá si quieres modificar tu blog a tu antojo ya que los blogs alojados en wordpress.com tienen muchas limitaciones. De este modo además podrás almacenar todas las fotos que quieras para tus posts.
  3. Cambiarle de theme(plantilla). Tanto para wordpress como para blogger existen numerosas plantillas gratuitas por todo internet. Sólo asegurate de guardar tu plantilla antigua por si la necesitas y sé consciente de que al cambiar de plantilla tendrás que volver a agregar todos tus artilugios de nuevo(widgets, plugins, scripts, tus propias modificaciones, etc).
  4. Incrementar el número de posts. Una de las formas más rápidas y simples de mejorar tu posicionamiento es escribir más y más posts. Cuantos más posts tengas, más posibilidades de haber escrito algo que los usuarios busquen y al mismo tiempo le das más opciones a Google para que te posicione. Sin mencionar los posibles enlaces que podrías conseguir si el contendio de tus posts es interesante. Por ejemplo si escribías 2 veces a la semana, sube a 3, si escribías 3, sube a 4 y así según tus posibilidades.
  5. Enganchar a tus lectores. Dos de las muchas formas de hacerlo son: Publicitar tus feeds en tu sidebar y al final de cada post. Y darles la posibilidad de seguir posibles comentarios en un post de su interés(wordpress).
  6. Empezar a usar twitter. Tanto como para conocer nuevos bloggers, conseguir lectores y publicitar tus posts.
  7. Interactuar con la blogósfera. Puedes participar en iniciativas, sorteos y concursos organizados por otros blogs. Simplemente con participar irás conociendo otros blogs y bloggers, y al mismo tiempo tu blog será conocido por ellos.
  8. Incluye referencias en tus posts. A veces cuando escribimos algo, lo hacemos basados en nuestros conocimientos previos o en información que vamos encontrando por internet. Pero para nuestros lectores que probablemente no estén muy familiarizados con el tema, les será mucho mas útil que también enlacemos algunas posibles fuentes que nos hayan servido. De ese modo nuestro blog les habrá sido realmente útil.
  9. Promociona tu blog. Te recomiendo inscribirte en Blogalaxia, en Blogupp y enviar tus noticias a Apezz para empezar.
  10. Poténcialo con complementos. Aprovecha todos los widgets, plugins y demás cosas que puedas agregarle a tu blog siempre y cuando sean realmente útiles, no como un mero adorno. Además, colocar imágenes y videos que guarden relación con tus posts o en tu sidebar, es algo que le dará un plus a tu blog.

Finalmente

No es necesario hacer todos los cambios ni hacerlos todos de una sola vez, se pueden hacer gradualmente y probando sus resultados. Cualquier cosa que agreguemos la podremos sacar luego si no nos gusta.
Siempre que le dediquemos algo más tiempo y esmero del que ya le dedicamos, mejoraremos nuestro blog.
Y ustedes, 
qué han hecho para mejorar su blog?
Leer más...

viernes, 23 de julio de 2010

Como poner la letra capital en las entradas

Una vez que realices los cambios te quedara la letra capital así de grande cada vez que publiques algo

 Como poner la letra capital al inicio de cada entrada

Lo único que hay que hacer es agregar el pseudo-elemento first-letter que hará que tome la primera letra del texto y le aplique los estilos que hayamos elegido.

Para realizarlo sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> lo siguiente:
.post-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

A partir de ahí ya aparecerá la letra capital en todas las entradas, pero también puedes agregar otros estilos a la letra, tales como el tipo de fuente, grosor, etc.
Estos son algunos otros atributos que puedes agregar:
font-weight: bold; /* letra en negrita */
font-family: Arial;
 /* tipo de letra */
font-style: italic; 
/* letra cursiva */

El procedimiento es muy sencillo y se puede aplicar a muchas áreas, por ejemplo:
Si quieres que los comentarios también tengan letra capital agrega esto:
.comment-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que el título de las entradas tenga letra capital agrega esto:
.post h3 a:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que el título del blog tenga letra capital agrega esto:
#header h1:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que los bloques entrecomillados tengan letra capital agrega esto:
.post-body blockquote:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Consideraciones finales:
  1. Funciona en todos los navegadores.
  2. Si hubiera una imagen antes del texto entonces no se mostrará la letra capital.
  3. Si la letra capital tuviera un signo antes o después de ella estas también se verán afectadas con los estilos.
Leer más...

martes, 20 de julio de 2010

Flecha o (Botón) para ir hacia arriba o hacia abajo

Colocar las flechas o indicar con un cartel para navegar mas rápido por la página del blog , sobre todo si tu post es extenso.


Este truco tiene dos partes.
Primera: se trata de colocar un 
script antes de </head> .
Vas a Diseño > HTML > y busca </head>. Recuerda que puedes usar Ctrl. + F para acelerar la búsqueda.

Justito antes de pegas este código.

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Guarda el cambio.
Segunda parte: ahora vamos a las flechitas y la posición en tu blog. Debes buscar </body> . Vuelve a usar Ctr. + F. Justito antes pega este código:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Arriba'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Abajo'/></a>

Reemplaza donde dice URL de la imagen por la imagen que quieras usar. Puede ser una flecha, un cartelito, lo que desees.
Si quieres uno completo te lo dejo armado a continuación, así lo insertas y listo.

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img border='0' src='http://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png' style='position:fixed; top:0; right:0;' title='Arriba'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='http://4.bp.blogspot.com/_qgZA1ny_dAs/S0QKJ3oGf7I/AAAAAAAADis/m4YOx1C9N2g/s320/arrow8b.png' style='position:fixed; bottom:0; right:0;' title='Abajo'/></a>

Guarda los cambios.

Verás a la derecha de tu blog las imágenes, para subir y bajar por el blog con efecto deslizante. Les dejo una página con miles de íconos. Este es el enlace a las flechas (arrows).
http://icons.mysitemyway.com/free-icons-clipart-tagged/arrow/748/.
Espero les sea útil.Saludos y una excelente semana!
Leer más...

lunes, 19 de julio de 2010

Nuevos Botones oficiales para “compartir” en Blogger


Blogger ha agregado un nuevo detalle a su plataforma, se trata de botones para compartir el contenido de un post en servicios sociales como: Facebook, Twitter, Blogger, Google Buzz y el mail de toda la vida.

¿Cómo agregarlos?

Primero hay que activarlos en:
Escritorio → Diseño → Blog Posts → Editar
botones-compartir-blogger
Si con esto no se muestran en tu blog, seguramente tienes una plantilla modificada, así que hay que agregar el código manualmente. En el código de tu plantilla (Escritorio → Diseño → Edición de HTML → Expandir plantilla de artilugios ), busca algo como lo siguiente:
<div class='post-footer-line post-footer-line-3'>
Nota: también puedes buscar por post-footer-line-2 o post-footer-line-1.
Justo después agrega el siguiente código:
<!-- Botones para compartir --><div class='post-share-buttons'><b:include data='post' name='shareButtons'/></div>
Ten cuidado de que las etiquetas se abran y cierren correctamente, de otro modo, obtendrás un error.

Personalización

A partir de las clases que Blogger pone por defecto, es posible dar estilos a estos iconos y así personalizar su ubicación, dimensiones o cualquier otra propiedad con CSS. Las clases que agrega Blogger son:
.post-share-buttons {} /* Contenedor de los botones */
.share-button {} /* Aplicada a todos los botones */
.sb-email {} /* Botón para compartir por email */
.sb-blog {} /* Botón para compartir en un blog de Blogger */
.sb-twitter {} /* Botón para compartir en un Twitter */
.sb-facebook {} /* Botón para compartir en un Facebook */
.sb-buzz {} /* Botón para compartir en un Google Buzz */

Conclusión

Fieles a su costumbre, Blogger llega años tarde con características que sus usuarios ya usaban sin su ayuda. Me parece que la opción es completa, pues ofrece los servicios más usados por los usuarios: Facebook, Twitter y el correo electrónico. Este último, quizá es el mayor aporte de esta función, pues agrega una nueva página con un formulario fácil de usar, que además hace uso de los contactos guardados en GMail.
Leer más...