SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
TODO EL CONTENIDO

ES GRATUITO

Por ello no puedo crear contenido
con regularidad, de hecho tengo que dejarlo por el momento
Si quieres hacerme un regalo para agradecer todo el contenido gratuito de que puedes disfrutar gracias a mi esfuerzo puedes hacerlo aquí , quizás pueda seguir creando nuevo contenido útil. Gracias!

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


30 may. 2016

Tutorial Blogger: Cómo poner imágenes en las entradas + SEO

optimiza imagenes de blog

Hace poco una chica me ha preguntado ¿Cómo poner imágenes en las entradas? Parece que ha tenido problemas para tenerlas ordenadas o bien colocadas. Esto no es nada raro, a veces Blogger nos complica un poco las cosas y lo que al parecer es muy fácil, resulta que es todo un reto.

Pero los retos no hacen si no exponernos a la posibilidad de mejorar, desarrollar nuestra mente creativa y buscar soluciones. Como siempre os digo, estoy esperando sugerencias para posts que os haré con gusto. 

Eso es lo que os traigo hoy, soluciones.

Digamos que para colocar una imagen en el post la cosa no nos lleva tanto, pero cuando queremos incluir 2 imágenes juntas la cosa cambia. Este es uno de los problemas con los que nos solemos encontrar.

Otra situación es cuando queremos poner la imagen al lateral de la entrada, junto al texto. Como no lo hagas bien quedará hecho un desastre. Esta es otra dificultad a la que pondremos hoy remedio.

Por otra parte está el tamaño de la imagen. Tenemos que tener en cuenta que las imágenes que solemos descargar de bancos de imágenes gratuítos de libre uso, suelen ser más grandes de lo que necesitamos. Debemos conocer el ancho de nuestras entradas para optimizar la imagen en cuanto a tamaño y que nos quede "mejor que mejor".


Todo esto lo trataremos en este post.

 Insertar imagen en una entrada Blogger
 Colocar imagen en el lateral de la entrada junto al texto.
 Hacer collage con PicMonkey
 Cambiar tamaño de imagen con PicMonkey
 SEO en nuestras imágenes


Insertar imagenes y Colocar una imagen al lateral de nuestra entrada

Para insertar imágenes os invito a ver directamente el vídeo tutorial 

Simplemente tienes que buscar el icono de Insertar imágen en el editor de entradas, encima de la caja de texto, y seleccionar la imagen que quieras desde tu ordenador. 

* Ahora , desde hace poco, también se pueden arrastrar a la ventana de selección de imagen, en vez de darle a Elegir archivos.

Mi recomendación es que sólo uses esa forma de subir imágenes a tus entradas, por que el resto de opciones dependen de otros alojamientos en internet y pueden desaparecer, con lo cual te quedarías sin imagen.

En el caso de querer colocar una imagen al lateral de nuestro post el truco es bien fácil, una vez que lo conoces , claro.

Lo único que tenemos que hacer es:
  • Colocarlas en sitios estratégicos.
  • No moverlas después de ser insertadas (nunca las arrastres) 
  • Procurar que la alienación del texto quede visualmente cómoda para la lectura (por ejemplo, justificando el texto, o no justificándolo)


Lo mejor es colocarlas al principio de un párrafo. Se coloca el cursor en el principio del párrafo y se inserta la imagen. 

Probablemente salga centrada, lo único que debes hacer es clickar sobre la imagen y darle a Alinear a la izquierda y quedará perfectamente colocada.

Si queremos que el texto quede ordenadito debemos justificarlo. Para esto seleccionamos el texto que queremos justificar, y en el editor, en Alienación del texto (con este símbolo  ) le damos a Justifica (con este símbolo   ) y tendremos una escena visualmente atractiva para lectura del post.  Tal que así:

Texto justificado sin justificar con imagen
A la izquierda el texto está justificado, a la derecha con Alienación a la izquierda.

Puede que la justificación no quede del todo bien, porque no sea un párrafo muy largo, y quede como demasiado espacio entre las palabras. Lo puedes ir comprobando dándole a Vista previa en el editor de entradas, arriba a la derecha, junto a Guardar. Si no queda bien eligiendo la opción Justifica, entonces deja la alienación a la izquierda. También puedes probar con la alienación a la derecha, pero lo más común es a la izquierda.

En este vídeo te explico cómo insertar imágenes en tus entradas y llevar a cabo esta opción de imagen con Alienación a la izquierda y texto justificado o sin justificar.




Cambiar tamaño de imagen con Picmonkey

Podemos elegir varios tamaños si clickamos encima de la imagen dentro del post. Nos aparecen una serie de opciones en azul que nos dan opción a colocar la imagen a la izquierda, derecha, centro... y además nos permite modificar el tamaño. Pero el tamaño no ha de ser otro que el original. Esto es importante, nuestras fotos deben estar siempre editadas al tamaño que queremos concretamente, para facilitar la navegación, la rapidez de carga, ... todo esto y más, cuidando los detalles como estes, conseguirán mejorar nuestro posicionamiento en Google, de forma que podamos aparecer en los resultados de búsquedas en las primeras páginas cuando busquen información relacionada con el tema principal de entrada. Esto es lo que se llama optimización SEO.

En general todo son beneficios y merece la pena pararse un momento a realizar estos cambios de dimensiones de imágen.

En este vídeo te explico cómo cambiar las dimensiones de una imágen  con Picmonkey de forma muy sencilla.



 Hacer un collage con Picmonkey

collage picmonkey tutorial

Si queremos añadir varias imágenes juntas, de forma horizontal, como si fuera un collage de varias fotos, no podemos dejarlo de la mano de Blogger, tenemos que usar herramientas alternativas para conseguir el efecto deseado.

Hay muchas formas de hacerlo, como por ejemplo, crear un collage con enlaces en cada imagen que nos lleva a diferentes páginas. Esto se consigue con herramientas externas. Pero esto es más complicado y en esta ocasión vamos a conocer las opciones más sencillas para incluir imágenes en nuestros posts/entradas.

Si queremos incluir varias imágenes de esta forma lo que podemos hacer es ir a Picmonkey  y elegir Collage, seleccionar las imágenes sobre las que vamos a trabajar e ir creando nuestro collage.

En este vídeo te explico cómo llevar a cabo todo esto en Picmonkey de forma muy sencilla.




Una vez que tenemos nuestro collage completado y guardado en nuestro ordenador, vamos a nuestra entrada, clickamos donde queremos incluirla, en el mismo lugar donde queremos que se vea, e insertamos imagen.


SEO en nuestras imágenes

El SEO (Search Engine Optimization) no me voy a parar mucho a explicártelo pero es algo imprescindible para que Google te tenga en cuenta cuando alguien busque información relacionada con aquello que tú escribes en tu blog o web. Así que hay que intentar, desde el principio, llevarse bien con estas rutinas de cuidado hacia nuestro SEO.

En cuestión a imágenes, que es lo que hoy nos ocupa, nos interesa solamente una cosa:

Las propiedades de la imagen.

    ACTUALIZACIÓN   : otra cosa muy importante que no he comentado!!! El nombre del archivo de la imagen en vuestro PC, antes de subirlo, debe contener las palabras clave también!! Así que debemos hacer click derecho sobre el archivo de imagen en nuestro PC, darle a Cambiar nombre y poner por ejemplo (en la imagen anterior de este post) "limones-collage-desayuno" separado por guiones y relacionado con la imagen y el post en el que incluyamos la imagen.

Si hacemos click en la imagen, a la derecha y después de Añadir Leyenda, nos aparece Propiedades. Tal que así:



Le damos click y entonces nos aparece lo siguiente:

Propiedades de imagen Blogger Seo tutorial

En la imagen ya te explico qué significa cada cosa. Realmente, y de forma personal, muchas veces "texto del título" no lo cubro, y solamente cubro la parte de "texto del alt". Los "algoritmos de SEO" son muy caprichosos, y puede que hoy el "texto del título" no sea importante pero mañana ¿Quién sabe? Así que mejor cúbrelo.

Usa descripciones cortas pero intenta siempre que no se repita lo mismo en ambas. Usa palabras clave identificativas de la imagen y el post que tengan sentido.


Y listo. Tus imágenes estarán bien colocadas, y optimizadas si sigues todos estos pasos. :)


¿Te ha resultado útil? ¿Conocías esta forma de optimizar tus imágenes? ¿Quieres saber más de PicMonkey? Déjame tus respuestas, dudas e impresiones en los comentarios 

Si no te quieres perder nada, ni regalitos, ni sorteos, ni nuevos cursos, ya sabes SUSCRÍBETE :)





   

6 comentarios

27 may. 2016

Tutorial Blogger: Personalizar titulos de las entradas - C 8

Tutorial Blogger: Personalizar titulos de las entradas

En esta clase vamos a personalizar los títulos de las entradas de una forma sencilla pero original y diferente.

Personalmente no recomiendo poner imágenes en los títulos pero en este diseño en particular no me disgusta y he elegido un par de flores en tonos pastel acordes con la paleta que he escogido para el blog de pruebas que además tienen efecto acuarela.

En tu caso puedes elegir una imagen con el tamaño de la zona del título, como fondo de color,  líneas, lunares, efecto acuarela, o lo que quieras, en vez de esta imagen. En próximos posts veremos más opciones para conseguir distintos efectos.

También puedes elegir una pequeña imagen, como un puntito, una estrella, un chupete, un icono que te guste, ... cualquier imagen más o menos pequeña para acompañar al título del post como el que yo he elegido.

Si no quieres ponerle la imagen también es muy válido, puedes jugar con las líneas, hacer un marco, tamaño de letra, color... cambiamos el resto de opciones para personalizarlo a nuestro gusto y listo! :)

Si quieres usar estas florecillas aquí te las dejo para descargar.

descarga las florecillas para el título de tus entradas




DESCARGAR


empezamos la clase

Para este caso vamos a aprender cómo podemos personalizar por separado el título cuando está en la página principal (y funciona como enlace) y cuando está en la página del propio post (cuando no es enlace) .

Lo primero que debemos tener en cuenta es que vamos a modificar el título y también la etiqueta h3 que es la que contiene el título de los posts. O lo que quiere decir, la zona del títuloEn el vídeo te explico en un par de minutos estas diferencias por si te interesa.

Además también vamos a personalizar el estilo de nuestro título cuando el ratón se sitúe encima. (códigos protagonistas de este detalle: h3:hover  y  a:hover)


 Vamos a Plantilla

 Hacemos Copia de Seguridad

 Editar HTML

 y buscamos el siguiente código (para que salga la caja de Search: tenemos que pulsar CTRL+F dentro del cuadro de texto HTML)

h3.post-title



 Le damos 2 veces a enter, o lo que viene siendo que nos interesa el segundo código que nos marca en amarillo.

Si llevas este curso al pié de la letra tendrá que aparecerte este:

h3.post-title, .comments h4 { font: $(post.title.font);  margin: .75em 0 0;}

 Justo despues de este anterior código, pegamos el siguiente con sus respectivos cambios que prefieras:

h3 {/*Zona del título de post*/
background: no-repeat url("https://3.bp.blogspot.com/-uXH7cqX5GMo/VwqitGeuz3I/AAAAAAAAACo/gO0h-AsGpAw8ojx5GCn-284CPS0Bbr6mQ/s1600/post-titulo.png"); /*Imagen de fondo*/
text-align: right; /*Alineación de la imagen, posición, left sería izquierda y center en el centro*/
border-bottom: 2px solid #666666/*Para poner línea debajo del título*/
}
h3:hover{
border-bottom: 2px solid #8fb59e;
}
h3.post-title {/*Título del post sin enlace*/
text-align:center; /*Alineación del texto, posición*/
font-family: 'Copse'; /*Tipografía de texto*/
font-size:15px;  /*Tamaño de texto*/
color: #666666 /*Color de texto*/
text-transform: uppercase; /*Texto en mayúscula*/
letter-spacing: 3px; /*Espacio entre letras*/
padding:15px; /*Espacio alrededor*/
}
h3.post-title a{ /*Título del post con enlace*/
font-family: 'Copse';
font-size:15px;
color: #666666;
text-transform: uppercase;
letter-spacing: 3px;
padding:15px;
}
h3.post-title a:hover{ /*Título del post con enlace al pasar el ratón por encima*/
font-family: 'Copse';
font-size:15px;
color: #8fb59e;
text-transform: uppercase;
letter-spacing: 3px;
padding:15px;
}

 Los colores , que están en negrita, los cambias por los de tu paleta de colores. El tipo de letra puedes escogerlo desde  Diseño  Personalización  Avanzado  Título de la entrada y ver qué opciones tienes. Eliges el nombre de la Fuente que quieres y la escribes entre las comillas en el apartado Font-family: y el resto de estilos te los he definido entre /* y */ para que, si quieres, vayas probando dándole a Vista Previa desde la plantilla los diferentes estilos.

El código de imagen también está en negrita y sería lo que tendríais que cambiar. En el vídeo te explico todo paso a paso. Además explico pequeños conceptos sobre código HTML/CSS que te servirán para entender tu plantilla y mejorar tu personalización.

Si quieres saber más sobre cómo personalizar el título con código tengo un post sobre cómo personalizar los títulos del sidebar que te ayudará mucho porque defino muchos conceptos de estilo para personalizar, en este caso, el título de post. Es un poco pesado en información en cuanto a código, pero si te gusta "fuchicar" y ya controlas un poquito te encantará

Más adelante y después del curso, veremos cómo elegir una fuente que no nos proporcione Blogger.

 Guardamos y listo!


así ha quedado en mi caso

Tutorial Blogger: personaliza titulo de las entradas

video tutorial




fin de la clase

¿Has visto qué fácil? Controlando un poquitín de código se hacen maravillas. No dejes de aprender porque te vendrá genial para mejorar tu blog y su diseño y además que ¡El saber no ocupa lugar!

Quiero saber cómo te ha resultado, así que cuéntame aquí abajo, en comentarios, qué tal te ha ido.

Cualquier duda ya sabes que puedes preguntarme lo que quieras y en cuanto pueda responderé a tus dudas.

En la próxima clase veremos cómo personalizar los títulos de la barra lateral del blog, donde tenemos los gadgets.

No te lo pierdas :)





suscríbete para no perderte ni una! 


   

16 comentarios

20 may. 2016

Tutorial Blogger: Como eliminar sombra de las imágenes en Blogger -C7

Cómo eliminar sombra de las imágenes en Blogger que trae por defecto, varias opciones

Para eliminar las sombras de las imágenes de las entradas que trae por defecto Blogger tenemos tres opciones. Desde ya te aconsejo que te apoyes en el vídeo tutorial para realizar esta clase de forma más cómoda.

Podemos Eliminar solo la sombra y el borde de algunas imágenes o bien eliminarla de todas las imágenes por defecto. Además si elegimos esta opción podemos ponerle sombra, igualmente, solo a algunas imágenes.

Opción 1: Eliminar las sombras de algunas imágenes.
Opción 2: Eliminar sombra de todas las imágenes.
Opción 3: Poner sombra a algunas imágenes.

A veces queda bien, depende para qué lo uses, pero otras veces queda como muy postizo... depende lo que quieras, es cuestión de gustos.

Así que empezamos.



ELIMINAR LAS SOMBRAS DE algunas IMÁGENES


1✻ Plantilla
2✻ Crear/Restablecer copia de seguridad
3✻ Editar HTML
4✻ Dentro del cuadro buscamos , que aparece por el principio de la plantilla en verde, como así:

<b:skin>...</b:skin>

5✻ Le damos a los puntitos y se despliega y abre el código (esto lo he explicado en clases anteriores)

6✻ Nos vamos a la etiqueta de cierre, abajo, después de todo ese código de color azul.


</b:skin>

7✻ Y nos encontramos esto (si has seguido el curso clase a clase) :

.feed-links {
visibility:hidden;
display:none;
}
]]>
</b:skin>


8✻ Vamos a pegar después del } el siguiente código:

img.sinborde {
    border: 0px;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    border-radius: 0px 0px 0px 0px;
    background: none;
}

9✻ Con lo cual nos quedaría tal que así:
.feed-links {
visibility:hidden;
display:none;
}
img.sinborde {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}

]]></b:skin>
10✻ Guardamos plantilla

11✻ Vamos a la entrada donde queramos editar la sombra de la imagen.

12✻ Le damos a editar

13✻ Vamos a HTML a la izquierda del editor, aquí, mira:

Cómo eliminar sombra en algunas imágenes

 14✻ Y dentro de todo ese código (no te asustes, porfa ;) ) buscas esto:

<img 

seguidamente quizás aparezca algo como border='0' pero no se le hace caso, y después tiene que venir (en esa línea y seguido de <img )

src=

15✻ Pues entre esos dos códigos - entre img y src- pegamos el siguiente:

class="sinborde" 

16✻ Guardamos o Actualizamos la entrada y ya no nos aparece sombra.





Eliminar las sombras de todas las imágenes


 Para que nunca aparezcan es mucho más sencillo.

1✻ Realizamos los 5 primeros pasos de la opción anterior y después vamos a buscar dentro del cuadro de texto (pulsamos CTRL+F y sale un cuadro de búsqueda, ya lo he explicado en clases anteriores)este código:

.post-body img

2✻ Nos salen dos apartados sombreados en amarillo tal que así:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 0px solid $(image.border.color);
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
3 Pero resulta que no tenemos esos números ¿Verdad? En tu código aparecen unos números diferentes a cero, por ahí. Vale, pues los cambias por cero, los que están seguidos de px o si prefieres puedes copiar y pegar (sobre el mismo código que tienes tú) este código directamente, porque así es cómo tiene que quedar para que no aparezca ni una sola sombra ni borde de ningún tipo, pero fíjate en sustituir bien el código y no borrar más de la cuenta... Menos mal que guardamos plantilla por si acaso ;)




Poner sombra solo en algunas imágenes



1✻ Esto es sencillo, llevamos a cabo el proceso de Eliminar la sombra en todas las imágenes de las entradas y

2✻ después el proceso de Eliminar sombra solo en algunas imágenes pero en este caso en vez de usar el código que empieza por img.sinborde  usaremos este otro:

img.conborde {
 border: 0px;
 -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
 -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
 box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
 border-radius: 0px 0px 0px 0px;
 background: none;
}

3✻ y en vez de usar este código class="sinborde"  (entre img y src )usaremos este otro :


class="conborde" 


¿Ves qué fácil? El mundo es tuyo, ¡Elige lo que quieras!




*Importante: los pasos en los que tienes que editar HTML de plantilla con los códigos que empiezan por img.conborde {img.sinborde { es un proceso que se realiza una vez solo, pero el resto hay que hacerlo siempre que queramos eliminar la sombra y el borde del que hablamos.

vídeo-tutorial






FIN DE LA CLASE

¿Qué te ha parecido? Difícil? Yo creo que una vez hecho ya resulta facilito ¿no? Cualquier duda o lo que quieras ya sabes, en comentarios puedes dejar lo que quieras. Si tienes algún tutorial pendiente que necesitas para mejorar tu blog, también puedes proponérmelo :)

En la siguiente clase veremos cómo personalizar los títulos de las entradas. Es interesante ¿Verdad? ¡¡Espero que no te lo pierdas!!


Sino te quieres perder ni una sola clase suscríbete



   

1 comentario

18 may. 2016

Freebie: Botones de Redes Sociales

Botones de redes sociales - freebies

Otro mes con Freebies chulos, ¡Como Agarimo manda! Esta sección en colaboración con Nerea de Miyumiko.com, para que tengas todo lo que quieres y como quieres, sin demasiado esfuerzo. 

Esta vez nos animamos a diseñar unos cuantos botones de redes sociales para tu blog (ya sabes que tú también puedes diseñarlos).

Los puedes usar para lo que quieras, pero obviamente no los puedes vender. (Si lo hicieras estarías timando a alguien porque aquí los conseguirán gratis, y como se enteren... se te cae el pelo) Obvio que tú no lo harás porque sé que te interesa aprender por tí misma, ser única y sabes que todo lleva su esfuerzo detrás. Es por eso que los regalamos, ¡Porque te lo mereces!

Puedes ponerlos en el apartado de Sobre mi, como en el tutorial en el que te cuento cómo personalizarlo, con tu fotito y tu pequeño texto, y puedes también ponerlos debajo de tus posts para que tus lectores/as compartan la entrada en sus redes sociales, aquí te explico cómo.

También puedes ponerlos en tu barra superior de menú, pronto explicaré cómo, así que mientras los puedes colocar por otro rinconcito o bien dejarlos guardados para la ocasión.

Si quieres también puedes meterlos al horno con mozarella por encima, pero bueno, eso ya es cosa de cada una ;) 

El caso es que puedes usarlos para lo que quieras. ¿No es genial? 

En mi caso he preparado los 2 diseños siguientes, que espero que te gusten.

iconos de redes sociales amarillos efecto sello



botones redes sociales amarillo efecto sello




El color amarillo que he elegido me ha enamorado, la verdad que hace tiempo que me gusta, y ya lo he usado también para el barnner de Agarimo, creo que será protagonista en muchos de mis diseños en los que pueda usarlo.

iconos de redes sociales rosa chicle y amarillo


El rosa chicle que he usado en los siguientes iconos también me gusta mucho. La mezcla de los dos ya me ha trastocado positivamente. Otro color que guardo en mi archivo para diseños. ¿A ti qué te parecen?


iconos redes sociales freebie rosa chicle y amarillo






Sé que quizás no vayan acorde con el diseño de tu blog o que te guste el estilo pero el color pues no te pegue nada... pero en esta ocasión ha sido así, en otras ocasiones trataré otros colores, e igual pondré varias opciones. 

De todas formas, si no te pegan los iconos que he diseñado personalmente, puedes echar un ojo a los de Nere, que están muy chulos y te podrán servir seguro. Clicka en el enlace anterior o en la imagen e irás a su post :)

iconos-redes-sociales-miyumiko

cómo cambiar el tamaño del icono


Los iconos vienen en un tamaño de 200px, esto es para que puedas usarlos como quieras y en lo que quieras. Pero si quieres ponerlos en tu pie de post quedarán super grandes. 

Si quieres modificar el tamaño solo tienes que abrir la imagen en Pick Monkey y cambiar el tamaño en Resize. Aconsejo una medida de 55px. Tal que así:



Pronto publicaré un post más extenso para hablar sobre esto y daros opciones diferentes para modificar las dimensiones de una imagen. 

Pero ten en cuenta que siempre es mejor modificar la imagen que modificar el código cuando se inserte en donde sea, así el blog no tardará tanto en cargarse y algo que cuenta mucho para el SEO. ;)


Espero que te hayan gustado y que les saques partido. Si te apetece , porque tienes un día estupendo, y un humor positivo insuperable, puedes compartir el post para que nadie se lo pierda! ;)

Mientras tanto seguimos con el curso gratuíto para diseñar y crear tu blog desde cero, y pensado en los próximos diseños de freebies, y regalitos varios para suscriptores de este blog.

Y ya no te robo más tiempo, te deseo mucha productividad, creatividad y sonrisas en tus días. 

¿Qué te parecen los diseños que hemos elaborado? ¿Tienes sugerencias para futuros freebies? ¿Te llevas alguno de nuestros diseños? 

suscríbete y no te pierdas ningún regalito

Blogger Paso a Paso

  
4 comentarios

16 may. 2016

Tutorial Blogger : Como quitar "Con la tecnologia de Blogger" - C6

Tutorial Blogger: Como quitar "Con la tecnologia de Blogger"


Hola majas y majetes, en esta clase número 6 vamos a eliminar "Con la tecnología de Blogger" que nos aparece en el Pie de Página de nuestro blog y lo vamos a sustituir por nuestro propio texto.

El texto que nos aparece, si hemos seguido este curso, o tenemos la misma plantilla, es:

Plantilla Simple. Con la tecnología de Blogger.

En cierto modo lo que se dice en el texto es cierto, nos ofrecen su tecnología y su plantilla, pero... La estamos editando y creando nosotras/os mismas/os así que estaría genial poner algo así como...

Mónica Lemos © 2016 www.bloggerpasoapaso.com

O algo diferente como por ejemplo:

Mónica Lemos © 2016 con la tecnología de Blogger han creado este rinconcito.

Para este tutorial, como para el anterior, tenemos 2 opciones. O bien ocultarlo (que como ya comenté no soy partidaria...) o bien eliminarlo. En este caso eliminarlo es lo mejor.

Vamos a ver las dos formas posibles.
EMPEZAMOS LA CLASE :)

ocultar "Con la tecnología de blogger (no aparece en el vídeo-tutorial)

Para ocultarlo es muy simple.


 1 Vamos a Plantilla

  Hacemos Copia de seguridad ,que es el paso nº2 de la siguiente imagen, y le damos a Descargar plantilla completa.

 3 Vamos a Editar HTML

Como quitar "Con la tecnologia de Blogger"

 4 Una vez en nuestra plantilla HTML , en el vídeo explico al detalle cómo ubicarnos para insertar el siguiente código. Básicamente hay que pegarlo antes de 

 ]]></b:skin>

 5  Para buscar dentro del cuadro de texto de código solo tenéis que hacer un clic en cualquier parte del cuadro y pulsar CTRL + F  y se abrirá un recuadro en la parte superior derecha como este:

Como quitar "Con la tecnologia de Blogger"

6 Ahí dentro de Search: pegas el código  </b:skin>  y le das a Enter. Te selecciona el código en cuestión y continuamos copiando el siguiente código:



#Attribution1 {

display: none;

}
7 Pegamos justo antes de  ]]></b:skin> y después del código:

  +   Si no has toqueteado nunca tu plantilla, encontrarás este código :

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}

  +   Si has seguido el curso desde el principio clase por clase, encontrarás este código :

.feed-links {
visibility:hidden;
display:none;
}



y justo después es dónde debes colocar el código que oculta "Con la tecnología de Blogger"

#Attribution1 {
display: none;

}

8 Guardamos plantilla y vemos el blog para ver los resultados.

ELIMINAR "con la tecnología de blogger"

Para eliminar esto de la atribución te recomiendo que veas el vídeo y sigas los pasos.

 1 Vamos a seguir los mismos pasos 1, 2 y 3, del anterior caso de esta entrada. Vamos a Plantilla, copia de seguridad y Editar HTML.

 2 ░ Ahora vamos hacemos clic en Ir al widget  tal que así:

Como quitar "Con la tecnologia de Blogger"


 3 ░ Y  despliega varias opciones, de las que haremos clic en Atribution1Una vez clickado nos aparece arriba de todo el Widget.

 4 ░ Tenemos que sustituir el siguiente código marcado en color rojo por false

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>


 5 ░y este otro,  que encontraremos encima del anterior, por yes


 showaddelement='no'>
 6  Guardamos plantilla y vemos el blog para ver los resultados.

añadir nuestro reconocimiento personalizado (APARECE EN EL VÍDEO-TUTORIAL)


En este caso  prestad  atención , porque yo en el vídeo añado el reconocimiento dándole a footer-1 en Diseño pero debéis darle a Footer.


 1 ░ Vamos a Diseño

 2 ░ En el Footer le damos a Añadir un gadget

 3 ░Buscamos  esta opción y hacemos clic en ella:
HTML/JavascriptAñadir
Añade una característica de un tercero u otro código a tu blog.
Por Blogger 

  4 ░ No ponemos título y pegamos el siguiente código con vuestra modificación personalizada:

Lo que está subrayado lo cambiamos por lo que queramos.
<center> Mónica Lemos &copy; 2016 Pruebas Blogger Paso a Paso </center>
   5 ░ Le damos a Guardar , Guardar Disposición y a Ver Blog para ver cómo nos ha quedado.


 *  La etiqueta center sirve para centrar la frase en el pié de página. la primera <center> abre el y la del final </center> lo cierra, si queremos centrar algún elemento, ambas etiquetas son necesarias, si no tendríamos un error.

vídeo-tutorial




fin de la clase

Esta clase es muy sencillita, ya ves que llevamos dos clases de los más facilitas pero que ¡Ayudan a dar personalidad a nuestro blog! 

De todas formas si has encontrado alguna dificultad o impedimento házmelo saber y te ayudaré en lo que pueda :)

Si te ha servido de ayuda comenta y cuéntamelo. Si te sientes especialmente generosa/o también puedes compartir esta entrada para que mi trabajo pueda llegar a más gente :)

En la próxima clase veremos cómo eliminar la sombra y el borde de las imágenes de nuestras entradas que trae Blogger por defecto. No te lo pierdas!!



si no quieres perderte nada, suscríbete


   

13 comentarios
© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.