Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Cómo personalizo la fecha de las entradas. Truco kawaii (*o*)

7.1.13

【Dificultad】

Hola hoy vengo con otro tuto facilito! Que toma su tiempo y que si no leíste algo no sabrás como adaptarlo (O___O)!!! jajaja me pasé de trágica. Es FÁCIL! RELAX...

Qué les parecería poder cambiar la aburrida forma en la que se ve la fecha de las entradas? Poder mover de ahí la fecha, que ya no esté en la parte superior sino que a un lado y con una imagen de fondo (*-*) ....aquí abajo una foto del ejemplo (↓↓↓)

{ AGREGAR EL SCRIPT }
1RO: Desde Plantilla → Edición de HTML → Expandir plantillas de artilugios, haciendo uso del botón F3 buscarás </head> Y arriba de este pegarás el sgte. código (↓↓↓)
<script src='http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/fecha.js' type='text/javascript'/>
2DO: Otra vez con F3 buscas...
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
3RO: Reemplaza por el código de abajo (↓↓↓)

<div id='fecha-ab'>
<script>nueva_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
 <div id='fecha-ab'>
<script>nueva_fecha('');</script>
</div>
{ DALE TU PROPIO ESTILO }
Utilizando F3 (YES! again!) busca ]]></b:skin> ...Arriba de este pega el sgte. código (presta mucha atención a esta última parte! *-*):

#fecha-ab { /*CONTENEDOR*/display: block;
float:left;
text-align:center;
margin: -15px 0 0 -30px;
color: #8e4a4a; /*Color del texto*/
background: url(http://img825.imageshack.us/img825/1373/other1j.png); /*Url de la imagen de fondo*/
border: #8e4a4a 1pt dashed; /*Color del borde*/
border-radius:50px;
width:80px;
height:80px;
text-transform: uppercase;
box-shadow:2px 2px 0px #d2d2d2;
}
.fecha_mes { /*Estilos para el mes*/
display: block;
font-size: 24px;
font-weight:bold;
}
.fecha_anio { /*Estilos para el año*/
display: block;
font-size: 12px;
}
.fecha_dia { /*Estilos para el día*/
display: block;
font-size: 18px;
font-weight:bold;
}

 ¿Se dieron cuenta? ¿Leiste detenidamente? ¿NO? (O -O) A ver les ayudo. Regresen a leer el código y fijense en los textos de colores...
¿AHORA SI? Ok, pues sólo debes de cambiar modificar como te guste más. Por ejemplo: otra imagen, cambia el url; otro color de letra y borde, usa photoshop para obtener los códigos de color o visita esta publicación Códigos de Color; u otro tipo de borde, cambia dashed (rayitas continuas) por dotted (puntitos continuos) o solid (linea completa).

¿Y BIEN QUE LES PARECIÓ? Fácil, Difícil, Extremadamente complicado y quieres tirarte por la ventana (*≧▽≦)ノシ)) OK NO! ...eso no (0_0)

Pues bien nos vemos, ya paso a retirarme que ando trabajando en la edición de mi primer videblog para el blog de repostería (ノ>▽<。)ノ WUW!!! Ah por cierto suscríbanse a mi canal para poder ver los videoblogs de repostería que iré publicando (* o*)/ { PINCHALE AQUÍ } y la dirección del blog de repostería es esta sweetcookingkuma.blogspot.com ...sin embargo aún no se puede ingresar a ver porque recién se inaugura este viernes 11 de enero!!!!!!!!!!! (junto con el primer videoblog).

Es todo por hoy. Nos leemos mañana!!  Les mando un buen de besos chocolatosos (* 3*) chuu~ 

15 comentarios:

  1. Wao que buen tuto *-*
    gracias por ponerlo n.n

    ResponderEliminar
  2. que buena tutorial!!!
    Quizas la hare para el blog!!!
    se le kiere!!

    ResponderEliminar
  3. Disculpa ._.! es head o heah lo que hay que buscar D:?

    es que no me aparece nada con heah u_u
    y estaba toda feliz de hacerla pero quede en la primera parte nu más D:

    ResponderEliminar
    Respuestas
    1. OMG error de dedo XD Gracias Danni-chan ;0;)/ que verguenza XD mi ortografía en inglés va de mal en peor XD es head.

      Eliminar
    2. Que pasa si no me aparece el segundo codigo codigo ._.
      ese el que tengo que remplazar D:

      Significa que no puedo hacer el tuto :c?

      Eliminar
    3. Si aparece mi querida Danni-chan! Yo apliqué esto tanto en plantilla simple como en una modificada (de este blog). De seguro olvidaste expandir artilugios D:

      Eliminar
  4. Respuestas
    1. yo soy kumy >< ella es kuma ya se ke se parecen pero es facil acor
      darse

      PD.gracias con el tuto es maravilloso lo esplicas muy bien n.n

      Eliminar
    2. Si cierto yo soy Kuma (. 0.)/ y ella Kumy. Parecidos pero muy distintos el nick de ella es con 'y' al final (0w0) y el mio con 'a' o sea Kuma (significa 'oso') (*W*)

      Eliminar
    3. De nada Kumy (nwn) ya sabes que yo hago estos tutos con gusto (^^)

      Eliminar
  5. no me salio -.-! tengo problemas con la etiqueta B:skin se que hay que ponerlo arriba pero que tan arriba ya que cuando pongo ese codigo arriba no pasa nada -.-

    ResponderEliminar
    Respuestas
    1. Uhmmm que raro si funciona, sino no tendría yo la fecha de mi blog así :D

      Algo debiste haber olvidado lee cuidadosamente el tutorial. Y cuando dice que debe ir arriba de ]]> es así por ejemplo:

      código para la fecha aquí
      ]]>

      Así debe de ser :D

      Eliminar

Home About Design My designs Contact