31/1/16

Tutoriales {Menú personalizado por ti!}


Hola! sigo recondando de que participen en el concurso, parece que lo voy a suspender por los pocos participantes que hay, en fin. Este tutorial es muy sencillo, me encanta porque es muy fácil de personalizar ya que editaremos sólo los menús por defecto que traen las plantillas de Blogger pero aún así las pondremos a nuestra talla ;)

Menú Personalizado

/* Clic a la imagen para ver en tamaño original */

Pasos a seguir:

/* Tabs
 .tabs-inner {
  margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom);
  padding: 0;
}
.tabs-inner .section {
  margin: 0;
}
.tabs-inner .widget ul {
  padding: 0;
  background: url(URL DE LA IMAGEN); /* Imagen de fondo del menú */
}
.tabs-inner .widget li {
  border: none;
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: .5em 1em;
  color: #fff; /* Color de la font */
  font-family: 'Patrick Hand SC', cursive; /* Estilo de la font */
  font-size: 16px; /* Tamaño de la letra */
  background: url(URL DE LA IMAGEN); /* Imagen de fondo de las categorías/páginas */
  border-$endSide: 1px solid transparent;
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  background: url(URL DE LA IMAGEN);  /* Imagen de fondo de las categorías/páginas al pasar el cursor */
  color: #D7CFFF; /* Color de la font al pasar el cursor */
}
.PageList { /* Esto es para que el menú quede centrado, si no lo quieres borra desde esta línea en adelante */
text-align:center !important;
}
.PageList li {
display:inline !important;
float:none !important;
}
Espero les haya gustado este tutorial tan fácil, si tienen alguna duda o problema avísenme y por supuesto intentaré solucionarlo. Nos leemos!~ 

2 comentarios:

  1. Hola como andas?
    de que concurso hablas? del combate de diseños? yo lei esa entrada y me encanto la idea pero no se absolutamente nada sobre diseñar paginas :C.

    No te desanimes, espera unos dias más y tal vez más gente se anime a participar :3.

    Por cierto,amo tu blog

    ResponderEliminar
    Respuestas
    1. Muchas gracias :3 Estoy muy bien =D Si, creo que seguiré tu consejo. Gracias por animarme el día! <3

      Por sierte, si quieres ver de que anda el sorteo visita esta página:
      http://smallbunniesblog.blogspot.com/2016/01/sorteo-2-plantillas-2-ganadores.html

      Saludos~

      Eliminar

~No seas ofensivo
~No utilices malas palabras
~Déjame una sonrisa