Calendario: febrero 2009-Crepúsculo

Para todos los fans de Crepúsculo, les dejo el calendario de febrero de Crepúsculo para que puedan descargarlo e imprimirlo. Ya sé que es más de la mitad de febrero, pero recién lo pude scanear ya que lo conseguí hace dos días.
Les prometo escanearles los demás meses.

Para descargarlo, hagan click derecho sobre la imagen y vayan a la opción "Guardar imagen como" para que lo guarden en su PC y luego puean imprimirlo.

Leyani # 7

Y ya está disponible un nuevo número más de la revista Letras y Anillos (Leyani) de la Sociedad Tolkien Peruana.

Pueden descargarla desde el weblog de Leyani y dejar sus comentarios sobre los artículos que, según vi, están muy buenos.Visítenlo!

Formulario de comentarios con diseño

Respondiendo a unos e-mails donde me preguntaban cómo hacía para que el formulario de comentarios de mi blog tenga imágenes y demás, hoy vamos a ver cómo diseñar o darle estilo al formulario de comentarios. Previamente , debemos de tener el formulario de comentarios incrustado .

Bien, para explicar mejor los códigos a usar, veamos esta imagen xon las partes principales. Para que entiendan mejor, cada número es una parte del formulario que personalizaremos a continuación (cada apartado de este post tiene un número que corresponde al de esta imagen):



Bien, ahora que estamos listos para dar estilo al formulario.

1 CAMBIANDO EL MENSAJE:

Cuando incrustamos el formulario, el mensaje que aparece de cabecera del formulario es "Publicar un comentario en la entrada" ; este mensaje lo podemos cambiar por otro que más nos guste. En el caso del formulario de mi blog puse "Tus dudas o comentarios son bienvenidos".

Bien para cambiar el mensaje seguimos estos pasos:

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Con CTRL+F buscamos:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>

♠ Borramos el código anaranjado y colocamos otro texto, de modo que esa línea del código nos quede así:
<h3>Déjame algún comentario</h3>

♠ Pero si ya tenemos una imagen incluída con texto , como en el caso del formulario de comentarios de mi blog, incluiríamos la imagen de esta forma: borramos el código anaranjado anteriormente mencionado y colocamos la URL de la imagen de manera que nos quede así:
<h3 id='comment-post-message'><img src='aquí-url-de-la-imagen'/></h3>

2 DISEÑANDO LA VENTANA DEL FORMULARIO:

Aquí podremos dar formato a toda la ventana del formulario, poderle algún color de fondo, centrarlo, etc. Para ello seguiremos los siguientes pasos:

♠ Con CTRL+F buscamos ]]></b:skin> y antes de éste pegamos el siguiente código que podemos personalizar o modificar según nuestros gustos:

.comment-form {
background:#c0c0c0 url(si deseamos aquí url de la imagen);
margin: 0 auto;
border:2px dashed #000;
padding-left:5px;
padding-right:5px;
}

3 LA CABECERA DEL FORMULARIO

Aquí podremos agregar alguna imagen que acompañe el texto; en la imagen de ejemplo, serí el emoticón que acompaña el texto "Tus dudas o comentarios son bienvenidos"; también, podremos personalizar el color del texto , cambiar el tamaño de la letra o centra el texto.

♠ Con CTRL+F buscamos ]]></b:skin> y antes de éste pegamos el siguiente código:

.comment-form h3 {
background:transparent url(aquí url de la imagen) no-repeat;
font-size:12px;
text-align: center;
color:#e1771e;
padding:0px 18px 0px 18px;
}

4 VENTANA DONDE VA EL MENSAJE:

Ahora personalizaremos el mensaje que va debajo de la cabecera del formulario. Por cierto, si bien en los códigos yo pongo algunas propiedades ustedes pueden poner más propiedades a cada parte del formulario como bordes, etc.

♠ Con CTRL+F buscamos ]]></b:skin> y antes de éste pegamos:

.comment-form p {
width:260px;
background-color: #ffabb5;
color:#000;
font-size:12px;
border:2px dashed #800080;
padding:15px 0px 0px 15px;
}

5 EL CUADRO DONDE SE ESCRIBEN LOS COMENTARIOS:

Finalmente, esta es la zona donde nuestros visitantes escribirán sus consultas o comentarios. Podremos centrarlo o cambiar de altura, entre otras cosillas.

♠ Una vez más, con CTRL+F buscamos ]]></b:skin> y antes de éste pegamos:

#comment-editor {
height:330px;
margin:0px 18px 0px 22px;
width:100%;
}

Bien, con un poco de ingenio podremos crear diferentes formularios de comentarios, como estos dos, por ejemplo:



Si tienen alguna duda, me avisan .

Trailer de "El delfín, historia de un soñador"

Aquí el trailer de la película basada en el libro "El delfín, historia de un soñador" del escritor peruano Sergio Bambarén, que se estrenará en agosto del 2009 en los países latinoamericanos, bajo la producción de Dolphin Films y la distribución de 20th Century Fox.

Cabe destacar que Diego Torres interpretará el tema principal de la película ,que compuso con apoyo del compositor y cantante peruano,Gian Marco.

Si deseas, puedes visitar la página Web oficial de la película: www.eldelfinlapelicula.com, donde podrás ver los trailer, descargar los afiches y otras cosillas muy divertidas.

Por cierto, no se olviden de leer el libro!

TRAILER

Gadgets de "Nueva Luna" en Widgetbox

Aunque faltan aún varios meses para el estreno de Nueva Luna, secuela de Crepúsculo, ya podemos encontrar gadgets de Nueva Luna en Widgetbox. Podremos encontrar relojes y contadores además de de muchas cosas más.

Aquí una pequeña imagen de muestra:



Éstos y más gadgets los encontrarás en Widgetbox

Web de "Cuentos de Bereth"

Hace unas semanas se estrenó por fin la web oficial de Cuentos de Bereth, sitio oficial para todos los fans de éste libro, cuya primera parte se estrenará pronto, el 17 marzo de este año.

La web cuenta con un foro donde podrás conocer un poco más sobre los personajes, participar en concursos, publicar algún fan-fiction; además, podrás conocer un poco más al autor, Javier Ruescas Sánchez, así como las últimas noticias sobre el libro.

Un buen sitio web y, por supuesto, estaremos atentos a la publicación de la primera parte del libro: Cuentos de Bereth: Encantamiento de Luna

Crepúsculo: bloopers

Un video con los bloopers de la filmación de la película Crepúsculo:



Divertido, no?

También te puede interesar:

► Crepúsculo: entrevista (Entrevista al club de fans de Perú)
► "Crepúsculo" de Stephenie Meyer (Sinopsis del libro)
► Trailer de "Crepúsculo" (Trailer de la película)

Títulos de la sidebar personalizados I: colores, fuentes y bordes

Hoy vamos a ver cómo personalizar los títulos de la sidebar de una forma sencilla, con colores, bordes, etc. Y en un próximos post, personalizaremos los títulos pero con alguna imagen.

El título de los blogs se puede personalizar en la etiqueta .sidebar h2{ que se encuentra en /* Sidebar Boxes en las plantillas Rounders (2,3 o 4) ; si usas la plantilla Mínima, verás /* Sidebar Content en lugar de /* Sidebar Boxes.

Pero en algunas plantillas, no se encuentra la etiqueta .sidebar h2{ así que todo será cuestión de agregarla debajo de /* Sidebar Boxes (/* Sidebar Content):

.sidebar h2{
background:#FFF;
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;}

Éste es el código base que podremos personalizar de las siguientes formas.

CAMBIANDO EL COLOR DE FONDO

En background: #FFF; podremos cambiar el color del fondo del título de la sidebar. Si deseas saber cómo cmbinar colores y los códigos hexadecimales de los mismo, mira » esta entrada.

PERSONALIZANDO EL TEXTO

Puedes centrarlo o ubicarlo hacia la derecha agregando lo siguiente:

text-align: center; para centrar
text-align: right; para ubicarlo a la derecha

COLOCANDO BORDES

► Si deseas que tenga un borde del mismo color, grosor, estilo y que rodee todo el título, coloca: border: 1px solid #000000; donde puedes cambiar el grosor, estilo y color de borde.

► Pero si quieres que el borde no rodee todo el título o que cada lado tenga un color diferente y diferente estilo,entonces usa algunos de estos código si es que sólo deseas bordes en algunos lados o úsalos todos para dar diferentes estilos:

border-bottom: 2px dotted #C94093; borde inferior
border-left: 1px solid #78B749; borde izquierdo
border-right: 3px solid #3D81EE; borde derecho
border-top: 2px dotted #f2984c; borde superior

► Y si quieres aplicar otros estilos de borde,en lugar de solid, agregas:

dotted


double


dashed


ridge


solid


inset


groove


Ya sabemos la teoría, es momento de ponerlo en práctica; en un futuro post, veremos cómo personalizar los títulos de la sidebar pero con imágenes (de fondo, íconos, etc)

GraphicsArcade.com - Wallpapers

Muchos wallpapers clasificados en cinco categorías: animales, celebridades, flores, festividades y naturaleza será lo que encontraremos en Graphics Arcade.com. Ahora que se acerca el Día de San Valentín podremos encontrar muchos fondos sobre este día.



►Graphics Arcade.com

Soaked You In - Kayte Grace

Se preguntarán quién es Kayte Grace,pues es una nueva promesa del canto. Paseando por YouTube, me encontré con uno de sus videos; tiene canciones hermosas y una voz muy linda. Sin duda alguna, tendrá un gran futuro en la escena musical.
Aquí una muestra del talento de ésta joven cantautora estadounidense.


Ver código del video[+/-]

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/O7Yvc0al9KE&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always">>/param><embed src="http://www.youtube.com/v/O7Yvc0al9KE&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Y les dejo la letra de la música para que puedan seguirla:

Do you remember that day?
it was just me and you
on a piano bench.
and you were playing that song
the one that sounded
like the day we first met
and the light poured in
from the window right above our heads

and i was holding my breath
soaking you in
life was a canvas and we were the paint
and i was breathing in deep
soaking you in
i was the lungs and you were the air
and i was holding my breath
soaking you in
you were the flashcard
five minutes til the test
and i was holding my breath
soaking you in
o i soaked you in

do you remember that day?
it was just me and you
and we were in a crowd
at a football game
the people near us were cheering so,
cheering so ... loud
but i didn't hear a thing
and i didn't see the crowd

cause i was holding my breath
soaking you in
life was a canvas and we were the paint
and i was breathing in deep
soaking you in
i was the lungs and you were the air
and i was holding my breath
soaking you in
you were the flashcard
five minutes til the test
and i was holding my breath
soaking you in
o i soaked you in

no i didn't hear a thing
and i didn't see the crowd
and the light poured in
and you were playing that song

and i was holding my breath
soaking you in
life was a canvas and we were the paint
and i was breathing in deep
soaking you in
i was the lungs and you were the air
and i was holding my breath
soaking you in
you were the flashcard
five minutes til the test
and i was holding my breath
soaking you in
o i soaked you in

Menú vertical con cajas de información

Ahora vamos a ver cómo poner a nuestro blog, en la sidebar, un menú que nos permitirá poner información sobre cada apartado (qué encontraremos en ésa sección, etc). Vi éste menú hace unos días en la sidebar de Baofeng, una página web dedicada al cine, y me gustó mucho, así que la adapté para que podamos usarla en nuestro blog de blogger.

• Home
  Página principal.
• FeedPara que puedas suscribirte a mi feed
• PerfilVer mi perfil
• EjemploPestaña de ejemplo.

Bien, vamos a empezar.

♠ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin>. Encima de éste pegamos lo siguiente:

ul#menutt {
width: 160px;
list-style:none;
font: bold 14px Arial, Verdana, Serif;
}
ul#menutt li{
position:relative;
}
ul#menutt a {
width: 160px;
display: block;
text-align:left;
padding: 5px 10px;
margin-bottom:1px;
text-decoration: none;
color: #fff;
background: #aaa;
border-left: 12px solid #000;
border-right: 3px solid #000;
voice-family: "\"}\"";
voice-family:inherit;
width:110px;
}
>#pagebody>ul#menutt a {
width:100px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menutt li { float: left; height: 1%; }
* html ul#menutt li a { height: 1%; }
/* End */
ul#menutt a:hover {
color: #000;
background: #bbb;
border-right: 3px solid #bbb;
border-left: 12px solid #bbb;
}
ul#menutt a span {
display: none;
}
ul#menutt a:hover span {
display: block;
position: absolute;
top:0;
left: 160px;
width: 90px;
padding: 14px;
margin-left:2px;
color: #fff;
background:#aaa;
font-size: 10px;
text-align:center;
border:1px solid #000;
}

Explicación: vamos a ver de qué trata cada parte del código para que podamos personalizar el menú.
» ul#menutt a { nos permitirá personalizar el ancho y alto de las pestañas, color de los bordes izquierdo y derecho,color de letra y fondo de la pestaña. Ésto es para cuando vemos la pestaña tal y como es.
» En ul#menutt a:hover { podremos cambiar colores de letra, fondo y bordes al momento de pasar el mouse sobre la pestaña.
» ul#menutt a:hover span { : aquí modificaremos el estilo de las cajas deinformación, como tamaño de letra, de qué lado se mostrará la caja (izquierda o derecha), el ancho, alto,etc.

♠ Una vez que tengamos listo el menú, damos click en Guardar.
♠ Ahora vamos a Diseño/ Elementos de la página/ Añadir un gadget y escogemos HTML/Javascript.
♠ En el nuevo gadget pegamos lo siguiente:

<ul id="menutt">
<li>
<a href="URL-DEL-ENLACE">Home
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Perfil
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Feed
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Mapa del sitio
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Contacto
<span>
Texto-de-información.
</span>
</a>
</li>
</ul>

» Cambiamos donde dice URL-DEL-ENLACE y Texto-de-información por los enlaces y texto que deseemos; también podemos agregar o quitar pestañas.
♠ Finalmente damos click en Guardar.

Si hay alguna duda, estaré gustosa de ayudarte