Poner el botón de “Ir arriba” e “Ir abajo” en el blog

Una de las cosas que más me llama la atención al visitar la página de cualquier web es la facilidad con la que se puede ir arriba e ir abajo sin tener que pasar por ese laberinto que me significa recorrer todos los comentarios que han dejado, y que muchas veces me hacen perder el entusiasmo de volver hacia arriba (si es que tuve el valor de arriesgarme a ir hasta el último de la página). Para ello siempre trato de utilizar aquellos simpáticos botoncitos situado a un costado de la pantalla y que me ayudan a ir hasta arriba nuevamente sin mucho trámite engorroso.

Por eso aquí les va una forma sencilla de poner estos botones para que si algún día alguien como yo -que no le gusta las complicaciones- visita tu página, le facilites las cosas.
 

Antes que nada, debido a que las nuevas plantillas de bloger tienen modificaciones en su estructura, y si ya dejaste de usar la vieja plantilla, deberás cambiar algunos puntos.
 

Busca en tu plantilla –sin expandir artilugios- lo siguiente:
 

<div class='body-fauxcolumns'>  

Y cámbiala por esta otra:
 

<div id='outer-wrapper' class='body-fauxcolumns'> 

Luego busca esta línea:
 

<div class='content-cap-bottom cap-bottom'> 

Y cámbiala por esta:
 

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'> 

Si aún permaneces aferrado a la vieja plantilla por aquello de que te trae viejos recuerdos, entonces no deberás cambiar nada.
 

Ahora sí, primero ve a Diseño, edición HTML, y recuerda– sin expandir artilugios- pega antes de </body> el siguiente código:
 

<a href='#'><img border='0' style='position:fixed; top:0; right:0;' src="URL de la imagen" title="Ir arriba" /></a>

<a href='#footer-wrapper'><img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /></a> 

Este código es cortesía de Ciudad Blogger 

Cambias la url de la imagen por la que tu hayas subido anteriormente a Picasa u otro sitio que prefieras (Picasa es una buena opción, y es gratuito) y luego de dar en vista previa para asegurarte que todo está como planeaste das en guardar. Aunque en vista previa solo podrás visualizar los botones o la imagen que hayas insertado.
 

P.D: El tamaño de las imágenes (las flechas o lo que decidas poner allí) es recomendable que sean de no más de 50x35px para que no se vean demasiado grandes y no entorpezcan la visibilidad de la parte lateral de la página, aunque, claro, eso ya queda a criterio tuyo. Solo es cuestión de gustos.

Poner el botón “me gusta” de Facebook en el blog

Facebook permite usar muchos de sus plugins sociales para poder implementarlos dentro de cualquier página web y entre los botones más populares está el “me gusta” que ha superado con bastante margen al botón de “compartir” pues ha demostrado ser más práctico y menos complicado que este último.
 

Por ello vamos a ver cómo le hacemos para poder implementarlo dentro de nuestro blog para que no se nos haga un lío y no nos resulte frustrante esta tarea.
Primero lo primero. Debemos elegir cuál de todos los botones disponibles de “me gusta” que tiene Facebook queremos aplicar en el blog. Aquí tienes una muestra:

 

Estos son los códigos para cada botón:

 1

<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fnombredetublog.blogspot.com&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

2

<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fnombredetublog.blogspot.com&amp;send=false&amp;layout=button_count &amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=40" scrolling="no"

3

<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fnombredetublog.blogspot.com&amp;send=false&amp;layout=box_count &amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:80px;" allowtransparency="true"></iframe> 

 Aunque los códigos los facilita el mismo Facebook, he preferido mostrar estos que ya están con algunos cambios para poder agregarlos sin ningún contratiempo y que también puedes ver gracias a la gentileza de Karla Castañeda.

 Ahora lo siguiente es más sencillo.  Entra a Diseño, Edición HTML, y marca la casilla  Expandir Artilugios, (no olvides primero hacer una copia de tu plantilla como respaldo por si metes la pata) y busca:

 <div class='post-footer-line post-footer-line-3'>

Justo debajo de ésto pega el código del botón que elegiste.
Das vista previa para asegurarte que todo está correcto tal como lo querías. Debe quedarte algo así:

Pero si quieres que el botón se sitúe a la derecha de las entradas, deberás agregar lo siguiente a cualquier código que hayas elegido.

<div align=’right’>

Aquí va el código del botón que elegiste

</div>

  Siempre da vista previa antes de guardar los cambios. Si todo está como lo planeaste, tendrás un botón así:

 

 Pero si quieres que el botón quede arriba de las entradas tal como lo tengo yo en este blog, deberás buscar esta parte del código en tu plantilla:

 <div class='post-header-line-1'/>

Justo debajo pega el código del botón que más te guste.
En todos los códigos, cambia “nombredetublog” por la url o dirección de tu blog. Aunque los códigos ya están para ser implementados, también puedes personalizar el botón reemplazando lo que está en azul, pero ten  en cuenta que el ancho (width) del botón del primer código (para que quede a la derecha del blog) debe ser mínimo 300px o no aparecerán los clicks que hayas recibido. Aunque por la gran cantidad de palabras que tiene casi no se va a diferenciar si lo pones a la derecha o izquierda, pues necesita casi el mismo espacio para poder mostrarse. Con los otros botones no tendrás ese problema.

En show-faces=false, no aparecerán las fotos de los que te dan clicks, con true sí se mostrarán, pero para ello deberás modificar las medidas del botón (width) (height) hasta que se adapten al blog.

Por lo demás, es sencillo. Espero que te resulte este truco, suerte.