11 julio 2016

3 maneras de personalizar tu menú en Blogger

3-maneras-de-personalizar-tu-menu-en-blogger

Hoy ando de estreno! si miras un poco hacia arriba, hay un nuevo menú superior, que ha hecho posible reducir elementos en el sidebar, porque cómo ya te comenté en esta entrada, el sidebar, cuanto más ligero mejor y a poder ser, exclusivamente con los elementos que más te interese potenciar.





He tardado un poquito más de la cuenta en publicar, porque tras estar trabajando intensamente durante más de mes y medio en la creación de un nuevo proyecto, no quería que mi empeño por cumplir las fechas, lo echara todo a perder. Así que, me he tenido que poner un freno mental, para publicar (por primera vez) un lunes y así poder presentarte todo el trabajo, como te mereces.



Te aviso que me he liado la manta a la cabeza y te traigo 3 tutoriales distintos para que puedas crear un menú personalizado en tu blog.

En la serie de tutoriales que he creado para personalizar tu blog con CSS, ya hemos visto:

 Cómo instalar iconos en tu blog para mostrar tus redes sociales

 Cómo poner imágenes o iconos en los botones de compartir el post

 Cómo instalar un botón de subir con imágenes o iconos

 Cómo sustituir entradas antiguas y recientes por iconos

 Cómo personalizar la caja final del post en Blogger

 Cómo personalizar el sidebar de Blogger con CSS


Así que el menú horizontal, ya tocaba, se ha hecho esperar, pero aquí está por fin. Y como te digo, no te traigo una, te traigo 3 maneras distintas de personalizar tu menú en Blogger.

¿Te gusta la idea? pues no perdamos más tiempo:

OPCIÓN 1: MENÚ PERSONALIZABLE DE BLOGGER



menu-personalizado-para-blogger




Blogger cuenta con un gadget de páginas para crearte un menú horizontal, al que se le puede sacar bastante partido con ayuda de CSS, porque el que muestra una vez que configuras el gadget, es más feo que un frigorífico por detrás.


menu-de-blogger-sin-personalizar




Vamos a ver cómo ponerlo requetebonito:


 Lo primero que tienes que tener claro es qué paginas quieres que conformen tu menú y crearlas si aún no lo has hecho. Para crear páginas en Blogger, tan sólo tienes que ir al apartado Paginas y pulsar en Página nueva. Elígelas bien, ya que Blogger sólo te permite crear 20 páginas.

No hace falta que las rellenes, si aún no las tenías creadas. Con ponerle un título y darle a publicar, tienes bastante, ya las editarás más tarde.


 Una vez, tienes creadas todas tus páginas, dirígete al apartado Diseño y verás que bajo la cabecera (header), te aparece un elemento llamado crosscol o Cross-Column que te da la opción de Añadir un gadget. Púlsalo y elige la opción Páginas entre todos los elementos que te muestra.

Cuando le des, verás que aparecen todas las páginas que hayas creado en tu blog y además una opción para Añadir enlace externo, que resulta muy útil cuando necesitas enlazar a algún sitio externo de tu blog, como por ejemplo, una tienda online, que tengas en otro dominio. Marca todas las páginas que quieres que se muestren en tu menú, ordénalas según prefieras que aparezcan y guarda los cambios.

Ahora verás que bajo la cabecera te aparece el menú sosete que te mostré antes, con las páginas que has elegido. ¿Queda raro, verdad? menos mal que existe el CSS, venga, vamos a hacer milagros con esto!

 Dirígete a la Plantilla>Editar HTML (recuerda hacer una copia de seguridad antes de meterte a toquetear) y haz clic en cualquier sitio dentro de la plantilla para pulsar Ctrl+F y que te salga la caja de búsqueda,  pega: <b:skin> y pulsa intro.

Aquí comienzan las hojas de estilo de tu blog, divididas por secciones, así que iremos bajando, hasta encontrar la que necesitamos que es Tabs (mira el vídeo que tienes más abajo para no liarte)

Justo debajo verás que te aparece algo parecido a esto:

.tabs-inner .section:first-child {$(header.bottom.border.size) solid $(tabs.border.color);}



.tabs-inner .section:first-child ul {

  margin-top: -$(header.border.size);

  border-top: $(header.border.size) solid $(tabs.border.color);

  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);

  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);

}



.tabs-inner .widget ul {

  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

  _background-image: none;

  border-bottom: $(tabs.border.width) solid $(tabs.border.color);



  margin-top: $(tabs.margin.top);

  margin-left: -$(tabs.margin.side);

  margin-right: -$(tabs.margin.side);

}



.tabs-inner .widget li a {

  display: inline-block;



  padding: .6em 1em;



  font: $(tabs.font);

  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);

  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);

}



.tabs-inner .widget li:first-child a {

  border-$startSide: none;

}



.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

  color: $(tabs.selected.text.color);

  background-color: $(tabs.selected.background.color);

  text-decoration: none;


}




Pues eso es precisamente lo que vamos a personalizar. Ve mirando el vídeo, para que lo veas todo con detalle y no te equivoques. Aquí te dejo mi opción de personalización, pero en el vídeo que encontrarás debajo, te cuento cómo ponerlo totalmente a tu gusto:

.tabs-inner .section:first-child {border: 0px solid #a5a5a5;}



.tabs-inner .section:first-child ul {

  margin-top: 0;

  border: 2px solid #becfe7;

  border-radius: 50px;

}



.tabs-inner .widget ul {

  background: transparent;

  margin-top: $(tabs.margin.top);

  margin-left: -30px;

  margin-right: -30px;

}



.tabs-inner .widget li a {

  display: inline-block;

  padding: 15px 122px;

  font: 16px;

  text-transform: uppercase;

  color: #becfe7;

  border-$startSide: 0px solid #becfe7;

  border-$endSide: 0px solid #becfe7;

}



.tabs-inner .widget li:first-child a {

  border-$startSide: none;

}



.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

  color: #ffffff;

  background-color: #becfe7;

  text-decoration: none;


}




No te líes, mira el paso a paso del vídeo:




OPCIÓN 2: MENÚ SUPERIOR CON BUSCADOR Y REDES SOCIALES




Vamos a ver ahora, cómo crear un menú superior con buscador y redes sociales.

Antes de nada. si ya tenías alguno creado, te aconsejo que lo elimines para que no interfiera con el nuevo que vas a instalar.

Si aún no has instalado la cartera de iconos de Font Awesome, ahora es el momento de hacerlo.

Busca <head> y justo debajo, añade este código: <link href=’//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.css’ rel=’stylesheet’/>

Guarda los cambios y busca este código: <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>


Justo debajo, pega lo siguiente:

<div id='menu-superior'>
<div id='menu'>
<ul>
<li><a href='URL PAG1'>PAGINA 1</a></li>
<li><a href='URL PAG2'>PAGINA 2</a></li>
<li><a href='URL PAG3'>PAGINA 3</a></li>
<li><a href='URL PAG4'>PAGINA 4</a></li>
<li><a href='URL PAGINA FACEBOOK'><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA TWITTER'><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA GOOGLE+'><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA INSTAGRAM'><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA PINTEREST'><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><div id='buscador'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
</ul>
</div>

</div>



Una vez que has configurado correctamente tu menú (te aconsejo que uses primero el bloc de notas y después lo pases a la plantilla), llega el momento de añadirle los estilos necesarios, para que quede completamente a tu gusto.

Si te cuesta dar con la sección <b:skin> de tu plantilla, pega el código directamente en la caja de búsqueda y una vez localizado, busca el apartado Tabs, para pegar este código, justo al final (mira el vídeo, para configurar los estilos paso a paso):

#menu-superior {

background: #B7CDC0;

width:100%;

height:60px;

margin:0;

box-shadow: 0px 2px 6px #333333;

position:fixed;

z-index:101;

}



#menu{

margin:0 auto;

width:1250px;

}



#menu ul{

float:left;

margin:0px;

padding:0;

list-style-type:none;

height:25px;

}



#menu ul li{

display:block;

float:left;

height:30px;

}



#menu ul li a{

display:block;

float:left;

color:#ffffff;

font: 16px 'Open Sans';

text-decoration:none;

padding:20px 25px 0 ;

}



#menu ul li a:hover{

color:#727272;

height:20px;

}



#menu ul li i:hover{

border: 2px solid #727272;

border-radius: 50px;

padding: 10px;

margin-top: -12px;

}



.search-box{

width:75%;

text-align:center;

padding:10px 0;

color:#727272;

border:1px solid #cccccc;

background:#ffffff;

font: 11px ;

border-radius:5px;

}



#buscador{

margin-top:10px;

}



#menu ul li #buscador{

padding-left: 150px;

}


Aquí tienes el vídeo en el que te cuento paso a paso, cómo personalizarlo:







OPCIÓN 3: MENÚ SUPERIOR DESPLEGABLE CON BUSCADOR Y REDES SOCIALES




Ultima opción, para ajustar tu menú aún más a tus necesidades. ¿Quieres incluir las categorías y así quitarlas del sidebar? eso está hecho en un momentín!

Antes de nada. si ya tenías alguno creado, te aconsejo que lo elimines para que no interfiera con el nuevo que vas a instalar.

Si aún no has instalado la cartera de iconos de Font Awesome, ahora es el momento de hacerlo.

Busca <head> y justo debajo, añade este código: <link href=’//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.css’ rel=’stylesheet’/>

Guarda los cambios y busca este código: <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>


Justo debajo, pega lo siguiente:

<div id='menu-superior'>
<div id='menu'>
<ul id='nav'>
<li><a href='URL PAG1'>PAGINA 1</a></li>
<li><a href='URL PAG2'>PAGINA 2</a></li>
<li>
<a href='#'>DESPLEGABLE<i class="fa fa-angle-down"></i></a>
<ul>
<li><a href='URL CAT1'>CATEGORIA 1</a></li>
<li><a href='URL CAT2'>CATEGORIA 2</a></li>
<li><a href='URL CAT3'>CATEGORIA 3</a></li>
<li><a href='URL CAT4'>CATEGORIA 4</a></li>
<li><a href='URL CAT5'>CATEGORIA 5</a></li>
</ul>
</li>
<li><a href='URL PAG4'>PAGINA 4</a></li>
<li><a href='URL PAGINA FACEBOOK'><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA TWITTER'><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA GOOGLE+'><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA INSTAGRAM'><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA PINTEREST'><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><div id='buscador'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
</ul>
</div>
</div>




Una vez que has configurado correctamente tu menú (te aconsejo que uses primero el bloc de notas y después lo pases a la plantilla), llega el momento de añadirle los estilos necesarios, para que quede completamente a tu gusto.

Si te cuesta dar con la sección <b:skin> de tu plantilla, pega el código directamente en la caja de búsqueda y una vez localizado, busca el apartado Tabs, para pegar este código, justo al final (mira el vídeo, para configurar los estilos paso a paso):

#menu-superior {
background: #C38AA3; 
width:100%;
height:60px;
margin:0;
box-shadow: 0px 2px 6px #333333;
position:fixed;
z-index:101;
}

#menu{
margin:0 auto;
width:1400px;
}

#nav {margin: 0 auto; padding: 0; background:transparent;}

#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}

#nav li a, #nav li a:link, #nav li a:visited {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
color: #ffffff;
display: block;
margin: 0;
padding: 20px 29px 10px;
}
#nav li a:hover, #nav li a:active {
color: #727272;
margin: 0;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
background: #C38AA3;
width: 150px;
color: #ffffff;
float: none;
margin-top: 5px;
padding: 17px 15px;
}

#nav li li a:hover, #nav li li a:active {
background: #E6B6C9;
color: #ffffff;
}

#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}

#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px;  margin: 0; padding: 0; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

.search-box{
width:75%;
text-align:center;
padding:10px 0;
color:#727272;
border:1px solid #cccccc;
background:#ffffff;
font-size: 11px;
border-radius:5px;
}

#buscador{
margin-top:10px;
}

#menu ul li #buscador{
padding-left: 150px;
}


Aquí tienes el vídeo en el que te cuento paso a paso, cómo personalizarlo:


Aquí te dejo el post de mi amiga Laura de Redhead Sense , del que te he hablado en el post, para que personalices las fuentes de tu blog con Google Fonts.



HACER QUE LOS ENLACES SE ABRAN EN OTRA VENTANA

 Para terminar, un truco para que los enlaces que pongas en tu menú, se abran en una nueva pestaña. Esto tiene sentido, cuando se trata de un enlace externo, como puede ser una tienda online o las mismas redes sociales.

 En el enlace que quieras que se abra en otra pestaña, coloca esto al final: target=’_blank’ 

Quedaría de esta manera:

<li><a href=’URL ENLACE’ target=’_blank’>NOMBRE</a></li>



Y con esto me despido, ¿te ha gustado la idea de personalizar el menú? ¿con cuál te has quedado? ¿qué tipo de contenidos, estás esperando ver en este blog? cuéntamelo todo, que estoy deseando de leerte 🙂


 Que tengas un gran día!

26 comentarios:

  1. ¡Hola guapa!
    Sin duda un tutorial que me va a venir de perlas a la hora de renovar mi blog.
    Aunque ya tengo instalado el menú desplegable en mi actual blog, como quiero rehacer (si lo consigo)toda la plantilla y claro está, no sé qué tutoriales seguí para tener lo que tengo ahora en el blog (lo sé soy un desastre), sin duda voy a atiborrarme de todos los tutoriales que vas haciendo.
    Así que una vez más, gracias por todo lo que nos vas enseñando.
    Por cierto el menú superior te ha quedado de escándalo. Y contentísima de que estrenes curso. Seguro que es un éxito.
    Besos

    ResponderEliminar
    Respuestas
    1. Muchas gracias Carolina, ojalá. Ya tenía ganas de cambiar el menú y reestructurar un poco el blog antes de pasar a WordPress. Estoy segura de que cuando te decidas a cambiar la estética del blog, lo vas a hacer genial. Tú sí que me ayudas con tus contenidos, el de la media naranja me ha encantado, besotes!

      Eliminar
  2. Una entrada más que interesante. Yo estuve mucho tiempo investigando cómo poner iconos y demás, me hubiera venido genial este post. Lo único que decicí migrar a Wordpress, pero es interesante aprender cosas así por si hay que ayudar a alguien.

    ResponderEliminar
    Respuestas
    1. Pronto me cambiaré a WordPress Ruth, espero echaros una mano allí, un beso!

      Eliminar
  3. ¡Hola guapa!

    La verdad que eres una crack, tan solo, por saber manejar el html que para mi es una auténtica locura. No suelo hacer cambios, porque para mi es una locura, también es verdad, que no me he puesto, que si me pongo seguro que al final, le pillo el truco. A mi normalmente me hacen los cambios y digamos me he acomodado bastante en ese aspecto. Un beso guapa

    ResponderEliminar
    Respuestas
    1. Es que te tiene que gustar Lidia, yo al principio era una negada, pero como quería aprender porque después me encantaba ver los resultados, pues aprendí. Yo soy de las que me tiene que gustar lo suficiente o suponerme un reto, para ponerle el suficiente interés por aprenderlo, como no me llame, ni lo miro, jaja! Pero supongo que nos pasa a todos, que tiene que gustarnos lo suficiente. Si no nos gusta y le podemos encargar a alguien la tarea, fenomenal, claro que sí, un beso!

      Eliminar
  4. Un post muy interesante!! Me hubiera venido genial este post hace unos meses. Yo tuve que tirar de mi hermano informático para lo que no conseguía hacer. Gracias por compartir con nosotros tu trabajo. Un beso guapísima!!

    ResponderEliminar
    Respuestas
    1. Tener amigos o familia que nos lo puedan resolver, es fenomenal. Yo también tiro de mi hermano para todo lo que tiene que ver con Wordpress, jaja! un beso!

      Eliminar
  5. Mira por donde me viene genial este post, hace tiempo cambié la mía aunque en blogger, y poco a poco creo que me estoy haciendo una experta en css ;) me lo guardaré para cuando me ponga a ello

    ResponderEliminar
  6. Mira si estoy dormida y despistada en verano que estaba convencidísima que el post era para wordpress (será porque no lo pone clarito en el título) habrás pensado por mi anterior comentario que no estoy muy normal jejeje, me guardo el código porque lo aplicaré seguro ;)

    ResponderEliminar
    Respuestas
    1. Jjajaa, Wordpress ya llegará con el tiempo! desde luego, cuando me haga con él no me lo voy a creer, jejeje.. un beso Mónica!

      Eliminar
  7. Yo que trato varios temas en mi blog creo que me sería de gran ayuda clasificarlas en páginas como tú bien explicas. La verdad es que me encantan tus post y además mi blog esta en blogger con lo cual me viene perfecto así que creo que me voy a tomar un descanso en el mes de agosto para darle un aire nuevo con ayuda de tus post pero me surge una duda. Puedo ir realizando estos cambios y que no se vyan aplicando directamente en el blog??? Es decir ir haciendo los y el día de la vuelta pues hacer visibles estos cambios. No se si será posible pero como tú eres toda una experta pues te lo pregunto jijiji mil gracias por tus Post

    ResponderEliminar
    Respuestas
    1. Hola Ainoa, para hacer eso, yo lo que te recomendaría es que crearás un nuevo blog, lo pusieras en privado y subieras una copia de seguridad de tu blog actual. Entonces, podrías hacerle todos los cambios tranquilamente y una vez estuvieras contenta, bajarte esa plantilla y ponerla en tu blog público. Consultame si tienes dudas. Un beso!

      Eliminar
  8. Es una buena opción la que muestras. Yo suelo crear mi menú en html. Creo una tabla y luego le doy estilos en css. Es algo más complicado si no se controla la programación en código pero a mi me gusta más. Siempre que puedo intento hacer las cosas por mi misma y no tirar de gadget. De esta forma no pierdo los conocimientos de programación y voy practicando. ¡Un besito!

    ResponderEliminar
    Respuestas
    1. Claro Priscila, así es como están creados los otros dos menús que muestro en mi comunidad privada. Este es más sencillo, para quien no se quiera complicar y los otros dos, son un poco más entretenidos pero para mi gusto, más completos ;) un beso!

      Eliminar
  9. Hasta hace poco menos de un año yo también tenía un menúcomo el que enseñas a poner en el tutorial, de estos que se encuentran entre la cabecera y el contenido pero, después de mucho pensarlo (porque he de confesar que me gustaba cómo quedaba ahí, ... decidí saltar a un formato más parecido al que tienes ahora y es que, ¡ay que práctico es que se quede ahí fijo para cuando vas navegando por el blog! ;)
    Un beso :)

    ResponderEliminar
  10. La verdad es que sí Vanessa, queda práctico y más vistoso, pero adaptarlo a vista móvil también es más complicado, jeje. Pero bueno, si sabes hacerlo, merece la pena. Un beso!

    ResponderEliminar
  11. Siempre me acerco a leer tu Post con una mezcla de expectación y miedo porque a pesar de la claro de tus explicaciones siempre tengo que recurrir a una amiga para que me ayude en estos menesteres. Yo reconozco que tengo mi sidebar algo caótico pero es que aún no tengo claras las categorías que voy a dejar a pesar de que mi blog tiene más de un año antes de cambiarlo. Bss
    Walkingtopennylane

    ResponderEliminar
    Respuestas
    1. No te preocupes Penny, ve pasándoselo a tu amiga y que te lo haga poquito a poco. Ahora que llega el verano, es un buen momento para darle un lavado de cara y aparecer con una imagen renovada y fresca, para darle fuerza a la próxima temporada. Un beso!

      Eliminar
  12. Raquel excelente post, estos tutoriales me viene de lujo y más aún si están tan bien explicados como los tuyos, necesito dar unos retoques al blog y aki encuentro detalles que si o si requiero ^.^ Gracias

    ResponderEliminar
    Respuestas
    1. Me alegro mucho de que te vengan bien Karina, esa es la intención. Si cuando lo personalices me quieres dar un toque para verlo, estaré encantada. Me hace mucha ilusión ver como sois capaces de dar un aspecto más atractivo a vuestros blogs con mis tutoriales. Un besote!

      Eliminar
  13. Te juro que llevo esperando por este tutorial un montón!! He estado cambiandole cosas al blog y esto se me resiste; lo tengo hecho una piltrafilla jajaja menos mal ahora ya puedo ponerme a ello contu tutorial, enserio con tu ayuda haces que poner bonito nuestro blog sea super gratificante! Menis mal que soy de la comunidad y ya mañana mismo mr pongo con ello! Mil gracias guapa y como siempre todo impecable!😍💋

    ResponderEliminar
    Respuestas
    1. Pues para la próxima semana, te contaré cómo adaptarlo a vista móvil, que esa va a ser la guinda que te faltaba para tener un blog sensacional. Te avisaré, porque sé que lo estás esperando. Un beso Catalina!

      Eliminar
  14. Holaaaaa, me ha encantado tu blog,e fasssCINAAAAAA pero tengo una duda q es eso del css?! Yo he creado mi blog solita y le he hecho modificaciones y pars mi obtener mi blog bonito bonito ha sido muy complicado, y hay cosas q me son difíciles de entender y mr costo un error fatal entender que el html es de cuidado...
    Así q me podrías explicar q es css!? Ya me he SUSCRITO y he descargado el e book!! Interesante saludos!!

    ResponderEliminar
  15. Holaaaaa, me ha encantado tu blog,e fasssCINAAAAAA pero tengo una duda q es eso del css?! Yo he creado mi blog solita y le he hecho modificaciones y pars mi obtener mi blog bonito bonito ha sido muy complicado, y hay cosas q me son difíciles de entender y mr costo un error fatal entender que el html es de cuidado...
    Así q me podrías explicar q es css!? Ya me he SUSCRITO y he descargado el e book!! Interesante saludos!!

    ResponderEliminar
    Respuestas
    1. Hola Isabel, bienvenida a la comunidad me alegro que te haya gustado el blog y que te resulte útil la guía gratuita para usar imágenes en la red. Te explico, el html es código que creas para un fin determinado, como puede ser por ejemplo un botón, una caja para enmarcar textos, un buscador etc... y el css es la parte estética de ese elemento que has creado. Cuando tu creas un elemento, normalmente necesitas darle chapa y pintura jeje, ponerlo bonito y esa es la parte que corresponde al CSS, por ejemplo, darle un color o un fondo determinado, hacer que las letras se vean en mayúscula o con un tipo de fuente o tamaño concreto. En definitiva, darle un estética al elemento que creas con HTML. Espero que esta explicación te sirva para entender mejor lo que es el CSS. De todas maneras en el indice del blog, en el apartado Blogging, tienes todos los tutoriales que he creado en los que puedes incluir código HTML y personalizarlos a tu gusto con CSS. Puede que así como te lo cuento, te parezca un poco complicado, pero ya verás que siguiendo los tutoriales te va a resultar muy sencillo y te vas a hacer una experta. Un beso!

      Eliminar

demo