2) Es importante buscar los iconos del tamaño que realmente vamos a utilizar. Como hemos visto en otras entradas de maquetación, el ancho y alto de cualquier objeto que deseemos poner en nuestro blog se mide píxeles (esos pequeños puntos que conforman la imagen que se ve en pantalla). Para este tipo de presentación, las botoneras oscilan en alturas y anchuras de 28x28 hasta 64x64 o lo que nosotros prefiramos.
3) Una vez tengas tus imágenes, lo mejor es que las pongas en Google Drive o en un almacenamiento fiable y disponible para tí.
4) Ahora queda meter las imágenes que hemos compartido en Drive de los iconos que nos descargamos en los pasos anteriores, dentro del código fuente que te voy a mostrar y dentro de un "Gadget" Blogger de los de tipo "HTML/Javascript":
5) Y ahora ya por fin, utiliza la "Vista Previa" para ver dónde prefieres colocar tu propia botonera personalizada.¡Eso es todo!, así podrás disfrutar de unos bonitos "iconos" de acceso a tus aplicaciones para redes sociales.
Para los más osados, sólo para usuarios avanzados
Os explico en pocos pasos cómo añadí mi "botonera social" a la cabecera del título. Es una zona ideal para colocar los iconos de acceso a aplicaciones sociales puesto que el usuario los ve desde que accede a tu Blog.
El problema que el proceso no es sencillo y requiere que sí o sí hagas una copia de seguridad de tu blog, pues si vas a seguir los pasos, cada plantilla tiene una formato diferente y se pueden cometer muchos errores.
Conceptos Iniciales
- Cada plantilla utilizada en cada Blog puede ser distinta. Internamente Blogger asigna etiquetas de uso propio a "porciones de código más grandes" que se escriben después cuando se "dibuja" la página HTML en el navegador del cliente.
- Por ejemplo, Blogger utiliza estas eqituetas propias de Blogger para escribir todo el código de mi cabecera:
b:section class='header' id='header' maxwidgets='1' showaddelement='no'
b:widget id='Header1' locked='true' title='Diarios de la nube (cabecera)' type='Header'
- Donde cada etiqueta section y su class 'header' se "traduce" después en todo este código al dibujarse en el navegador del cliente (lo voy a reducir para que no ocupe espacio innecesariamente):
div id="header" class="header section"div id="Header1" class="widget Header"
div style="background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8z-kfTSab2IZayigmUFQ8izHpsqw_XhcFog7ecE_GLMoa-S7Dl8b6nCWP7-ckfMAWFEIAtyIxkh8IAyGDNBcpR2Yw8WBrsiCA1Yrl4ctp8x56Fi1dyLX88DvWdCB4znB7MHGy4xnkhg/s1600/nueva2.jpg"); background-position: left; width: 920px; min-height: 157px; _height: 157px; background-repeat: no-repeat; " id="header-inner"
div style="background: transparent" class="titlewrapper"
h1 style="background: transparent; border-width: 0px" class="title"
Diarios de la nube
/h1
/div
div class="descriptionwrapper"
p class="description"
span
Tecnología, ayuda al Blogger, ocio, consumo y opinión en la nube.
/span
/p
- Es decir, una vez visto el ejemplo podemos comprender cómo Blogger maneja con unas pocas etiquetas, grandes conjuntos de código HTML que son los que finalmente se utilizan en el navegador del usuario.
Buscando nuestro código:
0) El código que yo te pongo de ejemplo en esta parte de la guía para usuarios avanzados NO tiene porqué ser el mismo que tú manejas en tu plantilla. Es decir,
no copies y pegues directamente el código de este apartado de la guíay sigue los pasos que te explico a continuación para poder comprender cómo realizarlo. Por supuesto, en este punto es estrictamente necesario que realices una
copia de seguridad.
1) En el navegador Google Chrome o en Internet Explorer (en Firefox con Firebug instalado) pulsa F12.
2) seleccionando la lupa de código (es necesaria para que cuando coloques el ratón en alguna parte de la página, te muestre el código que dicha parte contiene), dirige tu ratón a todo el marco de la cabecera del título.
3) Extrae el código localizado, normalmente estará donde encuentres "tags" como estos, esto te servirá para ver dónde vas a tener que meter tu nueva "botonera" de acceso a los servicios para redes sociales:
div id="header" class="header section"div id="Header1" class="widget Header"
En mi caso localicé toda esta parte como la cabecera donde tengo el título en mi blog:
b:widget id='Header1' locked='true' title='Diarios de la nube (cabecera)' type='Header'
4) En Blogger, dirígete a la plantilla y pulsa "Editar HTML", localicé que Blogger escribe lo siguiente para meter el código de mi cabecera:
b:section class='header' id='header' maxwidgets='1' showaddelement='no'
b:widget id='Header1' locked='true' title='Diarios de la nube (cabecera)' type='Header'
[..]
hasta donde cierra con /b.
5) Sustituyo el código fuente de Blogger por el HTML sobreescrito mío para poder meter mi "botonera" para redes sociales:
en mi caso, el código blogger se encontraba bajo " div class='fauxborder-right header-fauxborder-right'/" así pues, añadí el código fuente asignado a la cabecera del título
div class='fauxborder-right header-fauxborder-right'/
div class='widget Header' id='Header1'
div id='header-inner' style='background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8z-kfTSab2IZayigmUFQ8izHpsqw_XhcFog7ecE_GLMoa-S7Dl8b6nCWP7-ckfMAWFEIAtyIxkh8IAyGDNBcpR2Yw8WBrsiCA1Yrl4ctp8x56Fi1dyLX88DvWdCB4znB7MHGy4xnkhg/s1600/nueva2.jpg"); background-position: left; width: 920px; min-height: 157px; _height: 157px; background-repeat: no-repeat; '
div class='titlewrapper' style='background: transparent'
h1 class='title' style='background: transparent; border-width: 0px'Diarios de la nube/h1
/div
div class='descriptionwrapper'
p class='description'
span
bTecnología, ayuda al Blogger, ocio, consumo y opinión en la nube./b
/span
/p
/div
/div
/div
/div
6) A ese código, le añadí bajo la etiqueta "post footer line" todas mis conexiones a redes sociales (las que expliqué en la parte de la entrada destinada a crear la botonera):
div class='post-footer-line'/
p align='left' a href='https://www.facebook.com/connector.connector.7' target='_blank'img alt='Sígueme en Facebook' height='30' src='https://googledrive.com/host/0Bwgc28XHjPA2OWpfdWU3S2M0M2M/' width='30'//a
a href='https://plus.google.com/u/0/107366254177115656174' target='_blank'img alt='Sígueme en Google+' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2OTZmaW5LY3JPdXM' width='28'//a
a href='https://twitter.com/Diariosdelanube' target='_blank'img alt='Sígueme en Facebook' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2VURFcDVLNlJxTVk/' width='28'//a
a href='http://feeds.feedburner.com/diariosdelanube' target='_blank'img alt='Sigue mi Feed' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2NEVDM2M2blVCa2M/' width='28'//a
/p
El código final resultante es:
div class='fauxborder-left header-fauxborder-left'
div class='fauxborder-right header-fauxborder-right'/
div class='widget Header' id='Header1'
div id='header-inner' style='background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8z-kfTSab2IZayigmUFQ8izHpsqw_XhcFog7ecE_GLMoa-S7Dl8b6nCWP7-ckfMAWFEIAtyIxkh8IAyGDNBcpR2Yw8WBrsiCA1Yrl4ctp8x56Fi1dyLX88DvWdCB4znB7MHGy4xnkhg/s1600/nueva2.jpg"); background-position: left; width: 920px; min-height: 157px; _height: 157px; background-repeat: no-repeat; '
div class='titlewrapper' style='background: transparent'
h1 class='title' style='background: transparent; border-width: 0px'Diarios de la nube/h1
/div
div class='descriptionwrapper'
p class='description'
span
bTecnología, ayuda al Blogger, ocio, consumo y opinión en la nube./b
/span
/p
div class='post-footer-line'/
p align='left' a href='https://www.facebook.com/connector.connector.7' target='_blank'img alt='Sígueme en Facebook' height='30' src='https://googledrive.com/host/0Bwgc28XHjPA2OWpfdWU3S2M0M2M/' width='30'//a
a href='https://plus.google.com/u/0/107366254177115656174' target='_blank'img alt='Sígueme en Google+' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2OTZmaW5LY3JPdXM' width='28'//a
a href='https://twitter.com/Diariosdelanube' target='_blank'img alt='Sígueme en Facebook' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2VURFcDVLNlJxTVk/' width='28'//a
a href='http://feeds.feedburner.com/diariosdelanube' target='_blank'img alt='Sigue mi Feed' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2NEVDM2M2blVCa2M/' width='28'//a
/p
/div
/div
/div
/div
De esta manera, he añadido a la cabecera con el título la botonera personalizada que me creé en los primeros pasos de la guía. Lleva mi
imagen de fondo del título incluida, deberás poner la URL que corresponda a la tuya. Este método es más complicado pero si tienes unas escasas nociones de programación puedes hacerlo sin problema, eso sí, pensando siempre en que debes poner el código fuente de tu propia plantilla.
Eso es todo, así fue como metí mi botonera personalizada en el título y cabecera del blog.