8/11/15

(#3) Tutorial: Crea tu propia Plantilla (Parte 1)


Hola mis hadas cola! 3 días para que haga los 15, que ilusión ^^ Hoy os vengo con la entrada de tutoriales, como crear tu propia plantilla!! :)
Yo me manejo un poco con en HTML, y sé hacer plantillas (eso si, como a veces no me quedan bien siempre pedía ayuda) así que vengo a compartiros mi poca sabiduría para hacer plantillas, lo intentaré poner lo más sencillo posible y en varias entradas para que incluso los que tienen poca experiencia lo entiendan ^^

imageLo primero es crear un blog de pruebas, la URL da igual (dado que vamos a eliminarlo) así que deja caer tus manos sobre el teclado ^^

imageYo voy a utilizar la plantilla Picture Window, te recomiendo la misma

imageAhora vamos a pensar en un tema/personaje para nuestra plantilla, yo voy a hacerla de... Shiro (Deadman wonderland)

imageNos fijamos en el color que tiene nuestro personaje, en mi caso predominan en ella el blanco y el rojo, colores que utilizaré en mi plantilla

imageAhora vamos a ir a Html Color Codes y vamos a coger los códigos de nuestros colores, en mi caso #FFFFFF (blanco) y #FE2E2E (rojo)


imageY es ahora cuando ya podemos empezar a personalizar la plantilla, vamos a empezar con los gadgets...

imageEn mi opinión los gadgets SEPARADOS y con colores por arriba y abajo son los más bonitos, así que vamos a copiar el siguiente código:

.sidebar .widget {margin: 4px 2px 30px;background:#f;padding: 6px 6px;background:#fff;border-bottom: 5px solid #FE2E2E;border-radius:7px;box-shadow: 0 0 5px #ccc;border-bottom: 5px solid #FE2ED4;border-top: 5px solid #FE2EDE;}

Azul: Código del color deseado

image Y vamos a Plantilla >> Editar HTML >> Pulsamos Ctrl y f a la vez >> En la caja que se nos ha abierto buscamos ]]></b:skin> y justo arriba pegamos el código YA EDITADO.


imageLe vamos a dar vista previa para ver como  nos aparece.... Y, en mi plantilla pasa algo, el rojo que escogí se visualiza como rosa, así que lo voy a cambiar por #DF0101, bien, ahora el color ya me gusta, así que voy a guardar.

image Hay un problema en las plantillas PW y es el fondo transparente que no me gusta NADA, así que volvemos a Plantilla >> Editar HTML >> Pulsamos Ctrl y f a la vez >> Y esta vez buscamos /* Main >> y vamos a borrar todos los $ que aparezcan hasta que veáis un } >> guardamos y ya lo tenemos ^^


Créditos {x}

image Ahora vamos a personalizar los gadgets para que queden bonitos y con imágenes ^^

imagePara el gadget de Bienvenida os voy a poner dos opciones....

1- Imágen y texto de presentación. Para poner este gadget vamos a: Diseño >>Añadir un gadget >> HTML/JavaScript>> pegamos el siguiente código:

<br /><center><img src="URL DE TU IMAGEN" width="210" /></center>
<center>TEXTO</center>

Rojo: Pegas el código de tu imagen
Azul: Pones el texto que quieras

Como veis es muy sencillo de editar, y quedaría algo así:

(Esta plantilla se la hice yo a Maya-chan uwu)


2-Menú de color e imagen

Si tienes unas pocas secciones en el blog, o eres ordenadita/o te recomiendo mucho este gadget, se pone igual que el anterior, pero en HTML JavaScript pegas este código:

<br /><center><img src="URL DE TU IMAGEN" width="210" /></center>
<center>Pequeño texto</center>

<style>
a.yejunoppy{
background:#DF0101;
width:250px;
display:block;
text-align:center;
color:#444;
margin-bottom:1px;
font:11px arial;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color:#999;
padding:1px;
}


a.yejunoppy:hover{
background:#a6d6de;
color:#fff;
letter-spacing:10px;
}

</style>

<a class="yejunoppy" href="Url de tu página" >TEXTO</a>
<a class="yejunoppy" href="Url de tu página" >TEXTO</a>
<a class="yejunoppy" href="Url de tu página" >TEXTO</a>
<a class="yejunoppy" href="Url de tu página" >TEXTO</a>


AZUL: Url de tu imagen
VERDE: Color en HTML del fondo (El rojo, lo veréis debajo)
NARANJA: Color en HTML de las letras
MORADO: Url de tu página
ROSA: Texto

Te quedaría así ^^

imagePor último vamos a ponerle un fondo bonito a la fecha y a los gadgets. Volvemos a plantilla >> Editar HTML >> buscas /* Headings y pegas debajo de h2 {

color: #fff;
font-family: trebuchet ms;
font-size:10px;
line-height:17px;
text-align: center;
background: #DF0101;
text-transform: uppercase;
letter-spacing: 1px;

Azul: Color de las letras
Rojo: Color del fondo

Créditos {x}

Y eso es todo por hoy, ahora me voy a preparar para salir ya que he quedado con una chica muy maja que conocí en la CifiCon (ella iba de Suzuya) ayer nos pusimos a hablar y decidimos vernos hoy ^^

Beshos!
Image and video hosting by TinyPic

8 comentarios:

  1. Cada vez aprendes mas ^^ Buen tutorial (Me estoy muriendo de tanto estudiar ;-;)

    Beshus!!

    ResponderEliminar
  2. Espero poder felicitarte por tu cumpleaños(si no muero de un ataque de tanto estudiar xD) y la entrada me ha gustado bastante,es genial para gente que se inicia en Blogger.Un beso

    ResponderEliminar
  3. Hola!
    Muy buen tutorial!
    Gracias.. ahora si tengo un poco mas de idea de como hacer plantillas~

    Saluditos~

    ResponderEliminar
  4. Hola!
    Muchas gracias por compartir el turorial! de verdad sirve de mucho!! jaja :)
    Y si ya solo 3 dias !!! ya falta muy poquito!!!!
    Muchos saludos!!~:)

    ResponderEliminar
  5. Hola!
    Muchas Gracias por el tutorial.
    Besos

    ResponderEliminar
  6. Hola linda♥ Muy bueno el tutorial, queda todo muy bien explicado seguro que servirá de ayuda a mucha gente. Yo antes cogía una plantilla de blogger y no paraba de toquetear HTML hasta que quedaba totalmente distinta; ahora como me descargo plantillas de internet porque me cansé de las de blogger solo lo toqueteo para personalizarla un poquitín.

    Besotes Tris ^^♥

    ResponderEliminar
  7. Holi! Ahora mismo son las 0:24 en España, así que es tu cumple! 11/11/15 :)
    FELICIDADES TRIS! :3 Y que cumplas muchos más

    ResponderEliminar

Hola! Si estás aquí es que vas a comentar, y si no... pues te animo a que lo hagas!! Muchas gracias :D
Hay dos reglas que espero que cumplas.
-Nada de insultos ni molestar
-Si no has leído el post, no me comentes, porque aunque soy un poco tonta, se nota cuando has leído o no el post.
Gracias y diviértete
I NO COPIES I NO ROBES I DA CRÉDITOS I