mónicalemos

Blogger paso a paso

Crea y diseña tu propio Blog Tutoriales fáciles paso a paso con vídeo Desarrolla tu proyecto online Youtuber, Blogger, Influencer... ¡Empieza y no te compliques!

Sobre mi

hola ¿Me conoces?

SoyMónica lemos

Autodidacta creativa, Blogger, Youtuber, Estudiante y Educadora

Mi pasión más grande es la educación. De ella tengo un concepto muy amplio en el que englobo una gran variedad de temáticas. ¡Soy muy curiosa! Por eso me considero "aprendiz de todo y maestra de nada". He creado este espacio por que creo de verdad que tener un blog o un canal de Youtube te puede cambiar la vida. Tanto si es a nivel económico-profesional como a nivel personal, creo que tener un blog es una fuente de satisfacción y disciplina imprescindible que beneficia a cualquier persona. Por eso quiero ayudarte a llevar a cabo tu propio proyecto o a crecer con él. ¿Te animas?

Experiencia

Asesora personal

Desde que entiendo la satisfacción que produce trabajar un blog he asesorado a muchas personas a llevar a cabo las acciones que su proyecto necesitaba. En testimonios puedes comprobarlo.

Personalización de Blogs

Siempre me he interesado por personalizar mis propias plantillas en Blogger y las de algunas amistades y he acumulado más de 6 años en los que cada mes he dedicado horas a la personalización de plantillas.

Community Manager redes sociales

Hace 3 años empecé a investigar sobre Redes Sociales para manejarlas en mi propio beneficio. He sacado muchas conclusiones y generado más de 4.600 seguidores en todas mis RRSS.

Colaboración Con Empresas

Cuando empiezas a tomartelo en serio toca ir escalando posiciones. Las colaboraciones con empresas han surgido con marcas como Pedrita Parker, Rifle Paper Co, Finocam, Superbritánico...

Portfolio

Filtrar trabajo por

Te ayudo si necesitas...

Arreglar problemas

¿Querías añadir un extra a tu blog y llevaste a cabo un tutorial encontrado en la web pero no te ha salido bien y no sabes cómo arreglarlo?¡Te ayudo!

Renovar Imagen

¿Llevas tiempo con el mismo diseño en tu blog y se ha quedado anticuado? ¿Buscas mejorar tu blog con un diseño responsive, limpio y elegante?¡Te ayudo!

Conseguir lectoras/es

Si tus visitas se han estancado y crees que no ganas nuevas/os lectoras/es hay muchas formas de llegar a más gente. En esto también puedo ayudarte.

SER BUEN YOUTUBER

¿Quieres tener un canal de Youtube, o ya lo tienes, pero sabes que nose trata solamente de subir vídeos? Te ofrezco información importante para mejorar en tu canal.

HAcerlo TÚ MISMA/o

Comparto mucha información y varios servicios para que aprendas lo necesario para diseñar tu propia plantilla, crecer como Blogger y Youtuber.

PRECIOS AJUSTADOS

Tienes a tu disposición un montón de servicios a un precio ajustado, asequible y competente para aprender lo necesario y empezar bien como Blogger o Youtuber.

Artículos del Blog

▷ Cómo poner un slider en las entradas de Blogger ✅ Tutorial paso a paso

En este tutorial paso a paso vamos a aprender a insertar un slider de imágenes en una entrada de nuestro blog en Blogger de forma fácil y con un vídeo tutorial que te ayudará a conseguirlo.

Podemos tener muchas razones para querer poner un slider en una entrada de nuestro blog, pero entre otras cosas sirve para cuando compartimos posts de temática Moda, Decoración, o similar en las que mostramos muchas fotos pero no queremos que el post se alargue hasta el infinito.

Personalmente me parece más atractivo para compartir una presentación de imágenes, que simplemente subirlas a la entrada una tras otra. Salvo que las imágenes requieran un orden concreto, como puede ser en el caso de un tutorial. En este caso es natural que las imágenes del paso a paso salgan cada una en su lugar sin slider.

Pero como ya he comentado , poner un slider en una entrada, donde por ejemplo, mostramos nuestro outfit, con un montón de imágenes nuestras, me parece más atractivo mostrarlas en un slider que haciendo scroll. Aunque esto es una cuestión de gustos.

A continuación os enseño los diferentes sliders que podemos usar.

Slider CSS para insertar en Blogger

Este slider me parece muy sencillo para usar y además no requiere javascript, con lo cual, es todo un beneficio.



Fondos para móvil bonitos ⭐ Calendario Wallpaper MAYO 2018

Me he dado cuenta de lo mucho que os gustan los fondos para móvil, para ponerlo a vuestro gusto y personalizarlo con vuestro estilo, ya que el anterior post sobre fondos de pantalla para el móvil ha sido un éxito. Además como mi amiga Nerea del blog Miyumiko también iba a compartir fondos para el móvil retomamos la sección de Agarimo y traemos juntas muchos fondos para el móvil que podrás quedarte de forma gratuita y podrás usar al instante.

En un principio íbamos a hacer unos cuantos menos, pero nos pusimos creativas y hemos sacado ya varios modelos, con lo cual tienes mucho donde elegir.

En estos diseños de fondos para el móvil puedes ver el de la derecha que es la efigie que he usado antes en mi logotipo de Blogger paso a  paso. Es una conmemoración... La verdad que me gusta mucho la efigie, aunque caminar viendo el móvil no debe ser parte de nuestra rutina. Es mucho mejor mirar a nuestro alrededor, pero el significado es exactamente "Blogger paso a paso" al completo. 

El de nuestra izquierda es una flor de muchas que tiene mi abuela en sus pequeños jardines. En una ocasión que me puse a sacar fotos a las flores jugando con mi Reflex Canon.

El del medio es un diseño abstracto. Sin más.

En el fondo para móvil de la izquierda he jugado con textura acuarela, rollo marmol, en tonos azul pastel, en el diseño de la izquierda. El de la derecha parece más pedregoso. En realidad es una foto. Pero he recortado por donde me interesaba y he añadido la frase "Life is live" como esa canción tan alegre de toda la vida. Finalmente el del medio es un cactus, como no pasan de moda y molan tanto pues ale! Además con la frase de "Simple life", estilo de vida a la que aspiro con mis propios filtros.

Más plantas de casa de mi abuela, una cereza que sostiene la nena de la casa, y un café late helado que se tomó mi chico. Fondos de pantalla para el móvil minimalistas y muy bonitos para ordenar bien nuestras Apps en el móvil. Todo gracias a jugar con mi cámara al rollo minimalista. ¿Te gustan?


Por último tenemos 3 diseños de fondos para el móvil muy diferentes. Uno para organizar nuestras Apps, otro de flores azules con textura acuarela y otro con tonos dorados  y una composición de flores.





Ahora te muestro los diseños de Nerea y te dejo el enlace a su post para que puedas descargarte sus diseños.


fondos móvil bonitos y preciosos color pastel originales

fondos para móvil bonitos y originales





Los ha hecho todos ella misma, y la verdad que me han chiflado!! son muy originales y creativos. No sé qué piensas tú pero ¡A mi me encantan!


Calendarios Wallpaper Mayo 2018

Como ya se acerca el fin de mes aprovecho este post de regalos para dejar también los calendarios wallpaper de mayo 2018 para que pongas bonito el escritorio de tu pc.

Calendarios para descargar Mayo 2018 wallpaper bonito



Calendarios para descargar Mayo 2018 wallpaper bonito



Calendarios para descargar Mayo 2018 wallpaper bonito





Esto es todo. Espero que te hayan gustado y si es así que me lo hagas saber para seguir compartiendo fondos para el móvil.



Cómo añadir SPOILER en un post [mostrar | ocultar] TURORIAL BLOGGER

Tutorial Blogger: Hacer desplegable una parte de tu entrada/post crear página de paqs


A veces queremos ocultar un Spoiler en nuestra entrada, o bien queremos hacer desplegable una parte del texto sin más, y por ello traigo este tutorial tan sencillo para que puedas lograrlo en tu blog de Blogger.

También se le llama acordeón, por que funciona más o menos así, como un acordeón de texto.

En muchas ocasiones esta funcionalidad de acordeón o desplegable se usa para las preguntas frecuentes, o FAQ's de tu web o blog. Resulta muy útil por que no hace que nuestro post o página sea demasiado largo y a la vez crea un diseño muy atractivo para la lectora o el lector.

Os comparto dos formas distintas de lograrlo, una con script, y otra sin él. La mejor manera siempre es sin script, por que el script ralentiza la carga de la página, pero es cosa de preferencias al fin y al cabo, así que te dejo las dos opciones.

Este tutorial está super completo, para que puedas lograr lo que quieres, pero es cierto que si no tienes unos conocimientos básicos de código te costará personalizarlo o colocarlo donde realmente quieres. Presta atención a los vídeos que completan el tutorial para que entiendas mejor cómo funciona.


Cómo insertar un acordeón o desplegable en una entrada o página de tu blog sólo con CSS

cÓMO AÑADIR DESPLEGABLE O ACORDEON EN MIS ENTRADAS PARA OCULTAR SPOILER O AÑADIR PÁGINA DE FAQS




Para esta opción no puedes tener en tu entrada ningún formulario con "input" por que le damos estilo al input en este caso. Así que, es bueno para páginas donde no tenemos formulario de suscripción pero no te funcionarán ambas cosas en una entrada con formulario de suscripción. Todo tiene sus pros y sus contras.

De todas formas es mucho más recomendable usarlo sin script, así que si puedes, elige esta forma de crear el desplegable o acordeón.


  • Para usarlo simplemente creamos o editamos nuestra entrada/post o página y nos vamos a la parte de HTML, arriba a la izquierda.
  • Ahí debemos pegar el siguiente código:

<br/><br/><div class="tab">
      <input id="tab-one" type="checkbox" name="tabs">
      <label for="tab-one">Sección 1</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-two" type="checkbox" name="tabs">
      <label for="tab-two">Sección 2</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-three" type="checkbox" name="tabs">
      <label for="tab-three">Sección 3</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div><br/><br/>
  
<style>
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
input{
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #8fb59e;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  color:#000;
  background: #fff;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 10em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}
</style>



  • Ahora toca editar el texto de las secciones. Recuerda que seguimos en la parte HTML del post.
  • Si quieres añadir o eliminar secciones, solo debes añadir o eliminar la suiguiente parte, fíjate donde empieza y donde termina.
<div class="tab">
      <input id="tab-two" type="checkbox" name="tabs">
      <label for="tab-two">Sección 2</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>

Esa es la parte del código que crea el desplegable con el texto dentro.

  • Después de tener lista esta parte, puedes ir a "Redactar" y añadir antes o después del código el resto de la entrada.

Ver vídeo tutorial paso a paso para añadir desplegable css en una entrada del blog




Cómo insertar un acordeón o desplegable en una entrada o página de tu blog con script


En el siguiente botón puedes acceder a una página de mi web donde tengo este tipo de acordeón o desplegable insertado al final de todo como FAQ's.



Cómo insertar acordeón o desplegable en mi blog entrada o página tutorial blogger


Para realizar este tutorial debes seguir el paso a paso para no tener problemas. Además debes editar el HTML de tu entrada o página. Con lo cual te recomiendo que, si puedes, hagas primero esta parte, y luego añadas el texto que acompañe, imágenes o lo que sea. Pero primero inserta este código completo en HTML para que luego no tengas que editar nada. Si no lo haces así puede que te cueste mucho más trabajo, ya que cuando editamos el HTML de nuestra entrada y luego volvemos a "Redactar" y luego de nuevo a "HTML" pueden sufrir cambios en el código que luego son muy difíciles de identificar si no entiendes de código. Más abajo explico más detalles.


Hay dos formas de hacerlo. Si lo vas a usar en varias páginas lo mejor es que lo hagas como esta primera opción si solo lo haces en una entrada, sigue el siguiente, al final de este.


La estructura de código que usaremos es la siguiente:

<button class="accordion">SECCIÓN 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">SECCIÓN 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">SECCIÓN 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


Vamos a usar este código en un bloc de notas, para escribir todo lo necesario y prepararlo y luego copiarlo y pegarlo en nuestra entrada.

Antes de editarlo en nuestro block de notas vamos a añadir el estilo CSS en nuestra plantilla y el script que hace que funcione.


  • Toca editar nuestra plantilla así que vamos a Tema, hacemos una copia de seguridad y le damos luego a Editar HTML y luego buscamos en plantilla el siguiente código (si no sabes cómo, mira este vídeo)


b:skin



El segundo enter, osea, el segundo resultado , es el que nos interesa.


  • Justo antes de los dos corchetes de cierre :


]]></b:skin>



  • Escribimos lo siguiente:


.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}




  • Y guardamos.


Como siempre sabes que puedes editar a tu gusto. Colores (#444 y #ccc y similares), tipos de letra  y puedes añadir todo lo que consideres.


En este ejemplo tienes la SECCIÓN que es el título y un párrafo.


  • Para crear párrafos dentro de la sección podemos usar <p> aquí dentro el párrafo </p> o también usar la etiqueta de espacio, que es como un "enter" y se escribe de la siguiente forma: <br/>
  • Para crear listas escribimos <li> para abrir la línea de lista y </li> para cerrar la línea de lista.
  • Es importante que cuando edites este tipo de contenido no cambies en tu entrada de "Redactar" a "HTML" por que Blogger suele molestar incluyendo más código o influyendo en él de manera negativa y puede que luego no funcione de forma adecuada. Por ello os recomiendo hacerlo primero en un block de notas.

Ahora debemos insertar el script que hará que funcione.


  • Para ello en nuestra plantilla buscamos (si no sabes buscar un código en tu plantilla mira este vídeo)


</body>



  • Justo encima pegamos el siguiente script



<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>




  • Guardamos plantilla y listo

Cuando tengas en tu block de notas el primer código de esta parte del tutorial preparado lo insertas en la entrada en la parte de HTML, y luego vas a "Redactar" y redactas el resto de la entrada, antes o después de tu zona de desplegable. 

Si controlas un poco de código podrás insertarlo donde quieras, después de redactar todo el post. Pero si no controlas también puedes redactar primero toda la entrada y luego insertar en la parte HTML al final de todo, la parte desplegable y listo. Esto ya es cosa de tus conocimientos en el tema.



Añadir el desplegable con script a una sola página

Para esto es muy sencillo por que solo debemos editar el post en el que queremos insertar el desplegable o acordeón de texto.


  • Vamos a crear o editar nuestra entrada y le damos a HTML arriba a la izquierda.
  • Luego pegamos el siguiente código:
<br/><br/><button class="accordion">SECCIÓN 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">SECCIÓN 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">SECCIÓN 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><br/><br/>
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active,
.accordion:hover {
  background-color: #ccc;
}
.accordion:after {
  content: "\002B";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
  var i;
  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
</script>
  • Edita la parte de secciones que quieres crear. Cada sección va desde <button class="accordion">  hasta </p> </div> . Puedes copiar la sección y pegarla si quieres añadir más, o borrar desde el código de principio hasta el último como te he dicho. La sección es así siempre:
<button class="accordion">SECCIÓN 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
  • Luego de editar esa parte ya puedes pasar al "Redactar" y completar el post encima o debajo de las secciones.

Ver vídeo tutorial paso a paso para añadir desplegable con script en una entrada del blog


-VÍDEO PENDIENTE-









Esto es todo, espero que te haya resultado útil. Recuerda que me ayuda muchísimo que compartas en tus redes sociales, que comentes y me recomiendes!! Muack!!

Fuente del tutorial con script
Fuente del tutorial con CSS

Dicen de mi...

"Navegando por la red buscando consejitos para el blog, encontré a Mónica, y desde el principio entendió super bien lo que yo buscaba, que era una renovación completa del blog, con un presupuesto ajustado y con unas ideas muy claras. En permanente contacto el resultado fue super rápido . Muy contenta con la experiencia y el resultado!"

Vanessa "I Love Melita"

Educadora / Emprendedora

"Mónica es un torbellino de ideas, inquieta e imparable. No se conforma con lo primero que sale, y hasta que no consigue tenerlo todo bajo control, sigue trabajando, abierta a cambios y sugerencias"

Beatriz "Velos de Color"

Educadora / Emprendedora

"Nunca se me daba hacer un blog pero con tu curso me ha quedado super lindo y estoy super contenta. Se me acaban las gracias para agradecerte. De verdad mil gracias y que tengas mil bendiciones por ayudarnos a aquellas y aquellos que no sabíamos bien como hace un blog de nuestro gusto."

Diana

Blogger en "Sugary Ties Store"

"Mónica tiene un gran criterio profesional, definiendo cada cosa, qué sería mejor, trabajando...¡ah! y algo súper importante, enseñándome en cada momento. ¡No dudéis en contactar con ella para lo que sea! "

Marina

Blogger en "A falta de amor comida"

"Mónica es una persona curiosa y activa, a la que le apasiona aprender cosas nuevas. Trabajar con ella es un placer, pues es perfeccionista, entusiasta y se mantiene constante en la persecución de sus objetivos"

Andrea Goro

Blogger y Youtuber en "Superhéroes como tú" / Diplomada en Empresariales

"Trabajar con Mónica es verdaderamente un placer. Es muy profesional y comprometida en su trabajo. Agrega valor en forma permanente, es muy creativa y tiene una clara postura frente a la estética conforme al tipo de cliente. Además, ha tenido mucha paciencia frente a todas mis consultas y dudas. ¿Qué más se puede pedir? La recomiendo 100%."

Sonia Rodríguez Mella

Traductora Profesional en "Traducir Portugués" / Autora y Editora de un Diccionario

"Deja de preocuparte y ocúpate"

CONTACTA CONMIGO