Si quieres darle un aire diferente a tu blog, puedes ponerle una tipografía diferente a los títulos de tu blog. El Perro de Papel tiene un tutorial donde lo explica paso a paso.
Lo primero que hay que hacer es ir a la página de google fonts y elegir la tipografía que más te guste.
Una vez elegida le das a Add to colletction y después a Quick-use, y te dará dos códigos html.
El primero hay que pegarlo antes de </head> pero sin olvidar añadir / antes de >. Si no, dará error.
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
Y el segundo código hay que pegarlo antes de ]]></b:skin>
Pero de esta manera:
.post h3 {
(aqui el código que habéis copiado de Google Fonts)
font-size: 25px;
}
Y el código que a mí me ha dado es este: font-family: 'Roboto', sans-serif;
Se tiene que quedar de esta manera:
.post h3 {
font-family: 'Roboto', sans-serif;
font-size: 25px;
}
Y con esto ya tendrás los títulos de tu blog personalizados.
jueves, 19 de junio de 2014
martes, 22 de abril de 2014
Mostrar artículos relacionados
Me he dado cuenta que en muchos blogs hay un apartado debajo de cada post donde te sugieren artículos que pueden interesarte, y esto es muy útil para captar lectores.
En el blog de Lireth´s Notebook explica paso a paso como añadir esta función, y yo aquí sólo haré un breve resumen.
Hay que ir primero a la página de Linkwithin.
No sale una página de inicio con unos campos que tendremos que rellenar con los datos del blog. Y para que no haya errores, donde dice platform pondremos other.
Ahora le damos a get widget y nos dará un código en html.
Nos vamos a nuestro blog y añadirmos un gadget html, donde copiaremos el código que nos dio Linkwithin.
Y para personalizar la frase nos tenemos que ir a nuestra plantilla html y buscamos <head>
Justo debajo copiamos lo siguiente:
<script>
linkwithin_text= ' Escribe aquí tu mensaje personalizado '</script>
Escribimos el mensaje que queramos para invitar a nuestros lectores a que continúen leyendo artículos.
Y para personalizar aún más este gadget, podemos ir a nuestra plantilla html, buscamos ]]></b:skin>
Ahora copiamos justo encima lo siguiente:
/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Color de fondo del gadget */
padding: 0 0px;
font-weight: normal !important;
}
.linkwithin_text {
font-size:13px; /* Tamaño del título del gadget */
color:#84379C; /* Color del título del gadget */
font-weight: normal !important;
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Con esto quitamos el enlace de linkwithin que se ve */
}
.linkwithin_posts {
width: 500px !important; /* Ancho del gadget linkwithin */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #E5D3DF !important; /* Color de fondo al pasar el cursor por encima */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 10px !important; /* Bordes redondeados */
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #222121 !important; /* Color de los títulos de los cuadritos */
font-family: Delius !important; /* Tipo de fuente de los títulos de los cuadritos */
font-size: 13px !important; /* Tamaño de los títulos de los cuadritos */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #222121 !important; /* Color de los títulos al pasar el cursor por encima */
font-weight: none !important;
}
---------------------------------------------- */
Viene especificado qué es cada cosa, así que se puede ir personalizando al gusto.
En el blog de Lireth´s Notebook explica paso a paso como añadir esta función, y yo aquí sólo haré un breve resumen.
Hay que ir primero a la página de Linkwithin.
No sale una página de inicio con unos campos que tendremos que rellenar con los datos del blog. Y para que no haya errores, donde dice platform pondremos other.
Ahora le damos a get widget y nos dará un código en html.
Nos vamos a nuestro blog y añadirmos un gadget html, donde copiaremos el código que nos dio Linkwithin.
Y para personalizar la frase nos tenemos que ir a nuestra plantilla html y buscamos <head>
Justo debajo copiamos lo siguiente:
<script>
linkwithin_text= ' Escribe aquí tu mensaje personalizado '</script>
Escribimos el mensaje que queramos para invitar a nuestros lectores a que continúen leyendo artículos.
Y para personalizar aún más este gadget, podemos ir a nuestra plantilla html, buscamos ]]></b:skin>
Ahora copiamos justo encima lo siguiente:
/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Color de fondo del gadget */
padding: 0 0px;
font-weight: normal !important;
}
.linkwithin_text {
font-size:13px; /* Tamaño del título del gadget */
color:#84379C; /* Color del título del gadget */
font-weight: normal !important;
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Con esto quitamos el enlace de linkwithin que se ve */
}
.linkwithin_posts {
width: 500px !important; /* Ancho del gadget linkwithin */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #E5D3DF !important; /* Color de fondo al pasar el cursor por encima */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 10px !important; /* Bordes redondeados */
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #222121 !important; /* Color de los títulos de los cuadritos */
font-family: Delius !important; /* Tipo de fuente de los títulos de los cuadritos */
font-size: 13px !important; /* Tamaño de los títulos de los cuadritos */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #222121 !important; /* Color de los títulos al pasar el cursor por encima */
font-weight: none !important;
}
---------------------------------------------- */
Viene especificado qué es cada cosa, así que se puede ir personalizando al gusto.
jueves, 10 de abril de 2014
Quitar la sombra gris de las imágenes
Cuando comenzamos a publicar en nuestro blog, nos damos cuenta que las imágenes vienen acompañadas de una sombra gris que a pocos nos gusta.
Os voy a enseñar cómo quitar esta sombra. Viene muy bien explicado en el blog Creative Mindly.
Primero hay que ir a:
Ponemos el color de fondo y el color del borde transparente.
Y ahora tenemos que ir a la plantilla HTML. Buscamos:
.post-body img
Y para eliminar completamente la sombra tendremos que tener lo siguiente:
Os voy a enseñar cómo quitar esta sombra. Viene muy bien explicado en el blog Creative Mindly.
Primero hay que ir a:
Plantilla ---> Personalizar ---> Avanzado ---> Imágenes
Ponemos el color de fondo y el color del borde transparente.
Y ahora tenemos que ir a la plantilla HTML. Buscamos:
.post-body img
Y para eliminar completamente la sombra tendremos que tener lo siguiente:
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
Como puedes ver, lo que hacemos es poner todos los valores de px en 0.
Centrar los títulos del blog
Por defecto, blogger nos coloca los títulos de los artículos a la izquierda, pero en el blog Creative Mindly nos explica cómo se puede centrar este título.
Tenemos que ir a Edición HTML.
Y buscamos lo siguiente:
h3.post-title, .comments h4 {
Y encontraremos esto:
Y añadimos lo subrayado en amarillo.
Tenemos que ir a Edición HTML.
Y buscamos lo siguiente:
h3.post-title, .comments h4 {
Y encontraremos esto:
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
text-align: center;
}
Y añadimos lo subrayado en amarillo.
sábado, 22 de marzo de 2014
Subir un vídeo de youtube
Muchas veces encontramos en youtube contenido interesante para nuestro blog, pero poner el enlace sin más no queda muy bien.
Así que vamos a ver cómo podemos poner un vídeo para que se visualice en nuestro propio blog, es muy sencillo y lo he aprendido del blog El Perro de Papel.
Cuando tengas localizado un vídeo sólo tienes que coger el código html que te da, pero ¿dónde está?
Así que vamos a ver cómo podemos poner un vídeo para que se visualice en nuestro propio blog, es muy sencillo y lo he aprendido del blog El Perro de Papel.
Cuando tengas localizado un vídeo sólo tienes que coger el código html que te da, pero ¿dónde está?
Compartir ---> Insertar
Te aparece una cajetilla con el código html, y ya sólo tienes que copiarlo y pegarlo en tu blog :)
martes, 18 de marzo de 2014
¿Cómo añadir la opción de responder a los comentarios?
Es algo muy sencillo que he encontrado en el blog Personalización de blogs.
No hay que tocar esta vez html ni nada de eso, es cuestión de configurar el blog de cierta manera.
Para que te salga la opción de responder a un cierto comentario hay que tener activadas dos opciones:
Configuración ---> Otros ---> Permitir feed del blog ---> Completo
Configuración ---> Entradas y comentarios ---> Ubicación de los comentarios ---> Debajo de la entrada
Con esto ya tiene que salir automáticamente la opción de responder.
No hay que tocar esta vez html ni nada de eso, es cuestión de configurar el blog de cierta manera.
Para que te salga la opción de responder a un cierto comentario hay que tener activadas dos opciones:
Configuración ---> Otros ---> Permitir feed del blog ---> Completo
Configuración ---> Entradas y comentarios ---> Ubicación de los comentarios ---> Debajo de la entrada
Con esto ya tiene que salir automáticamente la opción de responder.
sábado, 15 de marzo de 2014
Añade un link cuando comentas en otro blog
Para darnos a conocer puede ser una buena idea incluir un link a nuestro blog cuando comentamos en otro, así poco a poco nos podemos dar a conocer.
¿Cómo se hace?
<a href="url del blog" >palabras que queramos que tengan el link</a>
Si añadimos esto en los comentarios aparecerá el link y será más fácil que otros bloggeros nos encuentren ;)
¿Cómo se hace?
<a href="url del blog" >palabras que queramos que tengan el link</a>
Si añadimos esto en los comentarios aparecerá el link y será más fácil que otros bloggeros nos encuentren ;)