Ahora que la mayoría de las redes sociales como Twitter y Facebook, ofrecen botones oficiales, no podemos desaprovechar la oportunidad de usarlos, con el fin de Promover nuestro blog, son muy llamativos y tienen contador, cosa que los hace interesantes, y a todo mundo parece gustarles (me incluyo).
Hoy les voy a decir, como ponerlos en su blog de forma alineada, y para facilitarles las cosas, voy a poner el código de dos estilos de botones disponibles, que tienen contador, yo lo acabo de agregar a mi blog, así que pueden ver el DEMO, aquí mismo.
Ustedes, solo necesitan cambiar la URL de su blog, marcada de rojo, y en el caso del botón de Twitter, el ID, (nombre de usuario) si es que tienen página de Twitter, en el código respectivamente.
Opción 1:
* Actualización: Eliminé el botón de Google Buzz, ya que ese servicio ha desaparecido.
Paso 1: Ve a Diseño, Elementos de la página y pega el código de los botones, en tu columna lateral, eligiendo la opción HTML/Javascript, y edita lo marcado de rojo, por la URL de tu blog, en el caso de Twitter, pon el ID de tu página de Twitter *:
<ul id="botones-home">
<li><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://compartidisimo.blogspot.com" data-count="horizontal" data-via="compartidisimo" data-lang="es">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
<li><iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fcompartidisimo.blogspot.com&send=false&layout=button_count &width=110&show_faces=false&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowtransparency="true"></iframe></li>
</ul>
*En donde dice:
data-via="compartidisimo"
Cambia: compartidisimo por tu ID (nombre de usuario) de Twitter, eso sirve para que cada vez que se twittee tu blog, se recomiende seguirte, si no tienes cuenta de twitter, elimina esa linea.
Paso 2: Guardas los cambios.
Paso 3: Ahora lo que falta es alinearlos, y eso lo lograremos con CSS, entonces, desde nuestro escritorio, vamos a Diseño► Diseñador de Plantillas ►Avanzado► Añadir CSS, y ahí en el campo, pegamos el siguiente código:
ul#botones-home{
margin: 0;
padding: 0;
width: 100%;
}
ul#botones-home li {
float: left;
padding: 0;
margin: 3px 4px 5px 0;
list-style: none;
}
Nota: Recuerda dar enter después de una llave de cierre }, para que sea interpretado el código que agregaste.
Paso 4: Guarda los cambios en APLICAR AL BLOG, y listo!.
Opción 2:
 |
| El fondo y estilos del titulo es el que tiene mi plantilla* |
Paso 1: Ve a Diseño, Elementos de la página y agrega el código de los botones, en la columna lateral, eligiendo la opción HTML/Javascript, y edita lo marcado de rojo, por la URL de tu blog, en el caso de Twitter, pon el ID de tu página de Twitter *:
<ul id="botones-home">
<li class="b-twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://compartidisimo.blogspot.com" data-count="vertical" data-via="compartidisimo" data-lang="es">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
<li class="b-facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fcompartidisimo.blogspot.com&send=false&layout=box_count &width=85&show_faces=false&action=like&colorscheme=light&font=verdana&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:65px;" allowtransparency="true"></iframe></li>
</ul>
*En donde dice:
data-via="compartidisimo"
Cambia: compartidisimo por tu ID de Twitter (nombre de usuario), eso sirve para que cada vez que se twittee tu blog, se recomiende seguirte.
Paso 2: Guardas los cambios.
Paso 3: Para alinearlos, estando en nuestro escritorio, vamos a Diseño► Diseñador de Plantillas ►Avanzado► Añadir CSS, y ahí en el campo para añadir CSS, pegamos lo siguiente:
/*Botones para compartir en la columna lateral*/
ul#botones-home{
margin: 0;
padding: 0;
width: 100%;
}
ul#botones-home li {
float: left;
padding: 0;
margin: 0 10px 0 5px; /*separamos los botones*/
position: relative;
height: 70px;
list-style: none; /*eliminamos la viñeta*/
}
li.b-twitter { /*el boton de Twitter*/
top: 0;
left: 0;
width: 75px;
}
li.b-facebook { /*El boton de Facebook*/
top: 2px;
left: 0px;
width: 90px;
}
Nota: Recuerda dar enter después de una llave de cierre }, para que sea interpretado el código que agregaste. Puedes cambiar la separación de los botones, editando el valor de: left,también puedes editar el ancho del espacio (width) para cada botón, procurando que no vaya a ser más angosto de lo que necesita.
TIP: Para editar la separación de los botones, puedes agregar: background:#000000; en: ul#botones-home li para que el fondo se ponga de color negro, y puedas ver, cuanto espacio ocupa cada botón respectivamente, haces los ajustes que quieras, y luego lo eliminas, para que puedas ver como queda, al mismo tiempo que haces los cambios.
Paso 4: Guarda los cambios en APLICAR AL BLOG, y listo!.
Anotaciones:
- No puse el botón de Google +1, pero si ustedes quieren, claro que lo pueden poner, y lo tienen que hacer colocandolo dentro de la etiqueta li :
<li> código del botón de Google +1</li>
...y que pueden conseguir en la página oficial de Google.
- En la Opción 2, creamos una clase para cada botón, y poder alinearlos de forma separada, a cada uno.
Conclusiones:
Sin duda, una forma muy poderosa de promover nuestro blog, es a través de las redes sociales, por ello, necesitamos facilitarles las cosas a nuestros usuarios o visitas, usando los botones que dispone cada red social, de ese modo, ellos podrán ayudarnos a promover nuestro blog. Claro que también podemos personalizarlos, pero esa ya es otra historia.
Referencias
Códigos de los botones de las respectivas páginas:
No hay comentarios:
Publicar un comentario