Para poner una barra de navegación puedes encontrar aquí información
También aquí
También aquí
Y aquí también
 |
 |
 |
 |
 |
 |
sábado, 7 de mayo de 2011
Destacar el nombre del autor entradas
Para aumentar el tamaño del nombre del autor de las entradas puedes encontrar información aquí
Añadiendo iconos al blog
Se pueden añadir varios iconos a las entradas del blog, a los comentarios, la hora de publicación de entradas, etc
Para más información pica aquí
Para más información pica aquí
Enmarcar el título de las entradas
Si te apetece enmarcar el título de tus entradas, has de localizar en el sector del CSS de tu plantilla este bloque:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
y añadirle o variarle lo que ves en azul en este nuevo código
.post h3 {
margin:.25em 0 0;
padding:5 5
5px;
font-size:140%;
text-align:
center;
text-transform:uppercase;
font-weight:bold;
border: 1px solid;
line-height:1.4em;
color:$titlecolor;
}
---
Para modificar las líneas que lo enmarcan puedes utilizar varios parámetros diferentes.
Solid = línea recta; dotted = puntitos; dashed = rayitas; double = doble línea sólida; etc.
Puedes ver unos ejemplos de los diferentes modelos aquí en el apartado Enmarcar un texto.
Para varíar el grosor de la línea, cambia el número en border: 1px.
---
Más información aquí
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
y añadirle o variarle lo que ves en azul en este nuevo código
.post h3 {
margin:.25em 0 0;
padding:5 5
5px;
font-size:140%;
text-align:
center;
text-transform:uppercase;
font-weight:bold;
border: 1px solid;
line-height:1.4em;
color:$titlecolor;
}
---
Para modificar las líneas que lo enmarcan puedes utilizar varios parámetros diferentes.
Solid = línea recta; dotted = puntitos; dashed = rayitas; double = doble línea sólida; etc.
Puedes ver unos ejemplos de los diferentes modelos aquí en el apartado Enmarcar un texto.
Para varíar el grosor de la línea, cambia el número en border: 1px.
---
Más información aquí
Efecto esquina doblada en los post
En este post os dejaremos un truco muy vistoso con un efecto esquina doblada para tus post y entradas:
En plantilla edición de HTML podemos encontrar algo así:
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}
Es el sitio indicado para añadir una imagen de fondo o color en los post y en este caso el efecto de esquina doblada, tendremos que eliminar lo anterior y en su lugar añadimos:
.post {
background:#ccc;/* color del post */
color: #333; /* color del texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 580px; /* ancho del post*/
}
.post:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 40px 40px 0;
border-style:solid;
border-color:#fff #fff #333 #000;/* color borde y pestaña */
background:658E15;
/* sombra pestaña opcional*/
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
}
En vista previa ya podemos ver el resultado, si deseamos usar nuestros propios colores sólo debemos sustituirlos, para facilitar la tarea en el mismo código está indicado el lugar para hacerlo. O modificar width: 580px; /* ancho del post*/
En plantilla edición de HTML podemos encontrar algo así:
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}
Es el sitio indicado para añadir una imagen de fondo o color en los post y en este caso el efecto de esquina doblada, tendremos que eliminar lo anterior y en su lugar añadimos:
.post {
background:#ccc;/* color del post */
color: #333; /* color del texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 580px; /* ancho del post*/
}
.post:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 40px 40px 0;
border-style:solid;
border-color:#fff #fff #333 #000;/* color borde y pestaña */
background:658E15;
/* sombra pestaña opcional*/
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
}
En vista previa ya podemos ver el resultado, si deseamos usar nuestros propios colores sólo debemos sustituirlos, para facilitar la tarea en el mismo código está indicado el lugar para hacerlo. O modificar width: 580px; /* ancho del post*/
Redes Sociales mejor con youtube
Han sido varias las preguntas sobre la forma de añadir los iconos de redes sociales en la sidebar y no es ningún misterio todo lo contrario, de forma muy simple los añadiremos paso a paso.
Lo primero que haremos será crear una clase para los botones y añadir los estilos a esa clase, para ello nos situamos antes de ]]> y añadimos:
#redes-sociales {
text-align: center;
padding:15px;
border: 1.9px dashed #C0C0C0;
}
Con eso estamos diciendo que el contenido dentro del bloque llamado redes-sociales se posicionará centrado y tendrá a su alrededor un espacio de separación con el borde 25px. Para saber si está centrado añadimos un borde que luego podemos quitarle.
Ahora vamos a plantilla de diseño y editamos un nuevo gadget de HTML en su interior añadimos:
<div id="redes-sociales">
<a target="_blank" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" title="Suscribirse" type="application/rss+xml"><img alt="rss" style="border:0" src="url-imagen-Feed" /></a>
<a target="_blank" href="http://twitter.com/tu-nombre-twitter" title="Twitter">
<img alt="en Twitter" src="url-imagen-Twitter" /></a>
<a target="_blank" href="http://www.facebook.com/profile.tu-perfil-facebook" title="Facebook">
<img alt="en Facebook" src="url-imagen-Facebook" /></a>
<a target="_blank" href="http://www.youtube.com/user/tu-nombre" title="YouTube">
<img alt="YouTube" src="url-imagen-YouTube" /></a>
</div>
Cambiar el código azul por la direccion de la red social y el rojo por la url de la imagen que se consigue picando sobre ella con el botón derecho del ratón y picando en copiar URL de la imagen.
Más información aquí
Suscribirse a:
Entradas (Atom)
Entradas
