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.
martes, 22 de abril de 2014
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.