AGREGAR BOTONES DE REDES SOCIALES EN MI BLOG DE BLOGGER
"BLOGS FAMAG "
Estos son unos botones muy sencillos pero muy prácticos para que nuestros lectores puedan seguirnos en las diferentes redes sociales. No es nada del otro mundo, sólo son iconos agrupados en una lista que tienen un efecto pushbutton al pasar el cursor sobre ellos.
Los botones son tres: Google +, Facebook, y Twitter, pero se pueden agregar más.
Puedes verlos en esta misma entrada.
Para poner estos botones de las redes sociales en tu blog sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega los siguientes estilos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Busca el siguiente código
]></b:skin>
4 Justo arriba del código que encontraste, inserta las siguientes lineas de código.
/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}
Despues de haber insertado el código, un clic en “Guardar plantilla”
Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y ahí pega esto:
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
<ul class="BotonesSociales">
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbkj13z7CZXQsS_6l2afwIbGiiQYeTVKzmhekBz-JmkNGBhgMMehiSw6QdLaY4G0tspesuBuSw3k1chHGFrpKCcJ-IzdB1PUdxgb6y2jKKb1q926LQPCBVjWQywJsxgadCrMLIYUTCEg/" /> <span>Agrégame en tus círculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HbNUScYmgXP7pUqwc8LGT3Da_eVdicDHPilrBD_XjWXWg2rKXhSFxYOybOr2-sErCDJBmaTT8Lqax5Jo7KxhtcVKaVQpAcwmu44mc1cOGSHbddCzf-bsuzBKQoxdP3d0_e6ZjW3uq7E/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7VAz7_CgEzlgRbF6rN5HB2TBDZbQh8poHwv_Cmbua-D5ztyDkkSoMjTwsuz1tvaYd5tqifauNVIOZencw9uUcagyATRDWdBJ56PgJPcOQk-Gwl6RxQ5bHFkmRs8JB8T8f-nGU_fxZa-E/" /> <span>Sígueme en Twitter</span></a></li>
</ul>
Para finalizar cambia los nombres de usuario o ID donde se indica en color rojo y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que están de color verde dentro del primer código.
Si quieres agrega más botones sólo añade antes de </ul> una línea como esta por cada botón extra cambiando la URL del enlace, la URL de la imagen y el texto:
<li><a href="URL del enlace"><img src="URL de la imagen" /> <span>Texto</span></a></li>
Y ahora sí, es todo
Después de haber insertado el código, un clic en "Guardar"
AÑADIR GADGETS DEBAJO DE LA CABEZERA DEL BLOG EN BLOGGER
"BLOGS FAMAG"
Generalmente cuando hacemos un menú queremos ponerlo abajo de la cabecera pero en muchas plantillas no hay un apartado debajo de la cabecera para añadir elementos.
Aun así hay formas de colocar elementos debajo del header (o sea, de la cabecera) y sin tener que batallar tanto.
Hay tres maneras para colocar elementos debajo de la cabecera y las tres son efectivas:
Entra en Diseño > Elementos de la página y arrastra el elemento que quieres hasta debajo de la cabecera.
arrastrar elementos
por ejemplo, un elemento HTML/Javascript sería algo como esto:
Otra opción es cambiarlo directamente desde la plantilla, entra en Diseño > Edición de HTML y SIN marcar la casilla de expandir artilugios localiza el gadget que quieres mover de lugar;
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.
Coloca este código en el buscador y dale un "Enter"
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'/>
Selecciónalo y con CTRL + X cortalo, busca un poco arriba el área de la cabecera y pégalo con CTRL + V justo debajo de esta parte:
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
La última opción es activando el crosscol. Si usas una plantilla clásica de Blogger verás que debajo de los códigos de la cabecera se encuentra esto:
Sólo cambia donde dice no por yes, guarda los cambios y ve a Diseño > Elementos de la página y verás que ya tienes el apartado debajo de la cabecera para añadir más gadgets.
Una forma de poner el enlace de tu cuenta Twitter en tu blog es haciéndolo con un botón que se queda en un lado de la ventana y no se mueve al bajar la página con el scrollbar.
Para los más entendidos en el tema es un badge flotante.
twitter bagde
Colocarlo es muy sencillo, sólo entra en Diseño > Edición de HTML y antes de </body> pega esto:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
Busca este código
</body>
Ingresa el siguiente código justo arriba del código que encontraste.
<a href='http://twitter.com/usuario' title='Sígueme en Twitter'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkTvd-WGeBodc9mP_3ggDviGk7bIGQjPAuVMq-P16UjsYvMagduArGr2HlLU-DRELknGzgI8PyHdHfEZAGAFpmlwXpoJYmKt_Iqebho7JpconHJCJnSk3dyYmptrBfOsU9ViK4grgWnwg/s320/twitter-badge-classic.PNG' style='display:scroll;position:fixed;bottom:225px;right:0px;'/></a>
Cambia lo que está en color rojo por tu nombre de usuario de Twitter. El badge (botón) tiene el azul clásico de Twitter, además de ese hice en otros colores para que escojas el que más se adapte a tu plantilla. Sólo remplaza la URL que está en color verde por la URL de la imagen que quieras.
