Hoy enseñaré lo básico al momento de crear un blog y usar una plantilla de Blogskins.
Lo primero que debemos hacer es crear un blog (usaré Blogger para la demostración)
Elegimos cualquier plantilla y hacemos click en continuar.
Hacemos un primer post de prueba y lo publicamos.
Vamos a la pestaña Diseño - Edición de HTML - y bajamos hasta encontrar Recuperar la plantilla clásica. Al hacer click aparecerá el antiguo formato de blogger. Ponemos aceptar y entramos a Blogskins . Busquen un skin que se acomode a su gusto, yo escogí para el blog de prueba el seguiente: aquí .
Y la vista previa está: acá .
Bajamos hasta donde dice Acciones y le damos click a Blogger Main. Se descargará un Documento de texto, el cual copiamos y pegamos en nuestro HTML de Blogger, damos click a Guardar Cambios de Plantilla y luego en Vista Previa.Para cambiar el código a nuestro gusto vamos hasta el principio del código Html, lo primero que veremos será:
<html><head><title>TU TITULO LO MODIFICAS AQUÍ</title>
Luego bajamos un poco hasta:
Body {background: url(ACÁ VA EL LINK DE TU IMAGEN QUE PUEDES ALMACENAR EN http://photobucket.com/ ) fixed;
Luego
color: #444; font-family:georgia; font-size: 9px; letter-spacing: 1px; line-height: 15px; text-align: justify;}
Aquí podemos cambiar el estilo de letra (georgia), el tamaño (9px) y si la letra va justificada, centrada, o hacia la derecha o izquierda (justify).
Más adelante aparece:
.nav1{color: #F04155; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;
background: #111; padding: 5px 25px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}
.nav2{color: #4DB7A3; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;
background: #111; padding: 5px 24px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}
.nav3{color: #FA8303; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;
background: #111; padding: 5px 24px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}
Aquí podemos cambiar el aspecto de nuestro menú (el que aparece arriba e indica Perfil, Entradas y Mensajes).
http://administration.boardhost.com/colors.html les dejo una carta de colores para que le puedan dar una imagen a su gusto.
Lo siguiente:
.wah{border-bottom: 1px dotted #ddd;}
i {color: #FA8303;}
b,strong {font-style: bold; color: #F04155;}
s{color: #bbb;}
Indica los colores de las letras al estar en negrita, cursiva o tarjada.
Y esto:
.h1{font-family:georgia; font-size: 6.5pt; text-transform: lowercase; color: #4DB7A3; text-align: left;}
.h2{font-family:Courier#New; font-size: 14pt; color: #93546D; text-align: left; letter-spacing: -1px; text-transform: lowercase; padding: 0px 0px 0px 3px;}
.h4{font-family:arial; font-size: 16pt; color: #333; text-align: left; letter-spacing: -1px; text-transform: uppercase;}
.h4:hover{color: #BC8F8B;}
Indica los aspectos de las letras en títulos y durante el blog.
Luego bajamos hasta que encontramos esto:
<div id="content"><div style=border:1pxsolid#f0f0f0;text-align:center;color:#ddd;padding-left:5px;>ESCRIBE AQUI UNA DESCRIPCIÓN DE TU BLOG {♥}</div><p>
<center><img src="AQUI EL LINK DE UNA IMAGEN LLAMATIVA"><p>
Y lo cambiamos a nuestro gusto.
A continuación viene el menú que es el siguiente:
<span class="nav1" onMouseout="this.style.color='#F04155'; this.style.background='#111';" onMouseover="this.style.color='#111';
this.style.background='#F04155'" onClick="changeNavigation('profile')">PERFIL O SOBRE MI O LO QUE QUIERAS ESCRIBIR</span>
<span class="nav2" onMouseout="this.style.color='#4DB7A3'; this.style.background='#111';" onMouseover="this.style.color='#111';
this.style.background='#4DB7A3'" onClick="changeNavigation('entries')">ENTRADAS DEL BLOG</span>
<span class="nav3" onMouseout="this.style.color='#FA8303'; this.style.background='#111';" onMouseover="this.style.color='#111';
this.style.background='#FA8303'" onClick="changeNavigation('tagging')">MENSAJES, EXTRAS, ETC</span></center><br>
Y lo cambiamos.
Más abajo van apareciendo códigos como el siguiente:
<div id="profile" style=display:none>
<div class="h2">► WanJing Flops</div><p>
Th' big name is <font color="#A07547">Wanjing.</font> Sixteen going seventeen soon. I hate science cause i ain't freaking understand
how thing goes, geez. <font color="#FF9284">I'm more into designing, drawing, floorball, musics, fashion trends, k-pop and photography.</font>
i'm not much of a talker, susceptical. <font color="#D3A09C">Oh, i love laughing too.</font><p>
Esto es lo que va en la pestaña Perfil o Sobre Mí. Podemos escribir lo que queramos.
Lo único que no debemos modificar es:
<div id="entries" style=display:none><Blogger>
<div class="h2">► <$BlogItemTitle$></div>
<span class="h1">♥ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <$BlogItemDateTime$> | <a href="javascript:scroll(0,0)">▲ Back to top</a></span><p>
<$BlogItemBody$>
<p></Blogger></div></div>
Puesto que aquí van nuestros post.
Para agregar la ventana extra de comentarios, antes de <p></Blogger></div></div> Pegamos lo siguiente:
<BlogItemCommentsEnabled><a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style=text-transform:lowercase><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled><a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style=text-transform:lowercase><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>
Espero que les haya gustado. Saludos!
Por cierto, con Html sólo hay que atreverse, pero siempre guarden una copia de su trabajo.
Lo primero que debemos hacer es crear un blog (usaré Blogger para la demostración)
Elegimos cualquier plantilla y hacemos click en continuar.
Hacemos un primer post de prueba y lo publicamos.
Vamos a la pestaña Diseño - Edición de HTML - y bajamos hasta encontrar Recuperar la plantilla clásica. Al hacer click aparecerá el antiguo formato de blogger. Ponemos aceptar y entramos a Blogskins . Busquen un skin que se acomode a su gusto, yo escogí para el blog de prueba el seguiente: aquí .
Y la vista previa está: acá .
Bajamos hasta donde dice Acciones y le damos click a Blogger Main. Se descargará un Documento de texto, el cual copiamos y pegamos en nuestro HTML de Blogger, damos click a Guardar Cambios de Plantilla y luego en Vista Previa.Para cambiar el código a nuestro gusto vamos hasta el principio del código Html, lo primero que veremos será:
<html><head><title>TU TITULO LO MODIFICAS AQUÍ</title>
Luego bajamos un poco hasta:
Body {background: url(ACÁ VA EL LINK DE TU IMAGEN QUE PUEDES ALMACENAR EN http://photobucket.com/ ) fixed;
Luego
color: #444; font-family:georgia; font-size: 9px; letter-spacing: 1px; line-height: 15px; text-align: justify;}
Aquí podemos cambiar el estilo de letra (georgia), el tamaño (9px) y si la letra va justificada, centrada, o hacia la derecha o izquierda (justify).
Más adelante aparece:
.nav1{color: #F04155; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;
background: #111; padding: 5px 25px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}
.nav2{color: #4DB7A3; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;
background: #111; padding: 5px 24px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}
.nav3{color: #FA8303; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;
background: #111; padding: 5px 24px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}
Aquí podemos cambiar el aspecto de nuestro menú (el que aparece arriba e indica Perfil, Entradas y Mensajes).
http://administration.boardhost.com/colors.html les dejo una carta de colores para que le puedan dar una imagen a su gusto.
Lo siguiente:
.wah{border-bottom: 1px dotted #ddd;}
i {color: #FA8303;}
b,strong {font-style: bold; color: #F04155;}
s{color: #bbb;}
Indica los colores de las letras al estar en negrita, cursiva o tarjada.
Y esto:
.h1{font-family:georgia; font-size: 6.5pt; text-transform: lowercase; color: #4DB7A3; text-align: left;}
.h2{font-family:Courier#New; font-size: 14pt; color: #93546D; text-align: left; letter-spacing: -1px; text-transform: lowercase; padding: 0px 0px 0px 3px;}
.h4{font-family:arial; font-size: 16pt; color: #333; text-align: left; letter-spacing: -1px; text-transform: uppercase;}
.h4:hover{color: #BC8F8B;}
Indica los aspectos de las letras en títulos y durante el blog.
Luego bajamos hasta que encontramos esto:
<div id="content"><div style=border:1pxsolid#f0f0f0;text-align:center;color:#ddd;padding-left:5px;>ESCRIBE AQUI UNA DESCRIPCIÓN DE TU BLOG {♥}</div><p>
<center><img src="AQUI EL LINK DE UNA IMAGEN LLAMATIVA"><p>
Y lo cambiamos a nuestro gusto.
A continuación viene el menú que es el siguiente:
<span class="nav1" onMouseout="this.style.color='#F04155'; this.style.background='#111';" onMouseover="this.style.color='#111';
this.style.background='#F04155'" onClick="changeNavigation('profile')">PERFIL O SOBRE MI O LO QUE QUIERAS ESCRIBIR</span>
<span class="nav2" onMouseout="this.style.color='#4DB7A3'; this.style.background='#111';" onMouseover="this.style.color='#111';
this.style.background='#4DB7A3'" onClick="changeNavigation('entries')">ENTRADAS DEL BLOG</span>
<span class="nav3" onMouseout="this.style.color='#FA8303'; this.style.background='#111';" onMouseover="this.style.color='#111';
this.style.background='#FA8303'" onClick="changeNavigation('tagging')">MENSAJES, EXTRAS, ETC</span></center><br>
Y lo cambiamos.
Más abajo van apareciendo códigos como el siguiente:
<div id="profile" style=display:none>
<div class="h2">► WanJing Flops</div><p>
Th' big name is <font color="#A07547">Wanjing.</font> Sixteen going seventeen soon. I hate science cause i ain't freaking understand
how thing goes, geez. <font color="#FF9284">I'm more into designing, drawing, floorball, musics, fashion trends, k-pop and photography.</font>
i'm not much of a talker, susceptical. <font color="#D3A09C">Oh, i love laughing too.</font><p>
Esto es lo que va en la pestaña Perfil o Sobre Mí. Podemos escribir lo que queramos.
Lo único que no debemos modificar es:
<div id="entries" style=display:none><Blogger>
<div class="h2">► <$BlogItemTitle$></div>
<span class="h1">♥ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <$BlogItemDateTime$> | <a href="javascript:scroll(0,0)">▲ Back to top</a></span><p>
<$BlogItemBody$>
<p></Blogger></div></div>
Puesto que aquí van nuestros post.
Para agregar la ventana extra de comentarios, antes de <p></Blogger></div></div> Pegamos lo siguiente:
<BlogItemCommentsEnabled><a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style=text-transform:lowercase><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled><a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style=text-transform:lowercase><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>
Espero que les haya gustado. Saludos!
Por cierto, con Html sólo hay que atreverse, pero siempre guarden una copia de su trabajo.