martes, 5 de abril de 2011

Enlaces para compartir tus posts en Blogger

Darles la posibilidad a otros de compartir nuestras entradas en algún sitio, foro o blog nos beneficia considerablemente en nuestro pagerank, cantidad de visitas, etc.

Este complemento permite añadir al final de las entradas enlaces en HTML, BBCode y la URL por defecto, se verá mas o menos así:



La imagen es referencial, puedes darle el estilo que desees.

¿Cómo insertar este complemento en Blogger?

Paso 1: Añadir a las entradas:

Primero, vamos a ''Diseño/Edición HTML'' en donde marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente línea:
<data:post.body/>
Debajo de ésta, pegaremos la siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='compartiendo-post'>
<p>Si este artículo te ha gustado puedes publicarlo en tu web, blog o foro con los siguientes enlaces:</p>
<p>&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p><p>&lt;label for=&quot;aa-forum&quot;&gt;Enlace en HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;</p><p>
&lt;label for=&quot;aa-forum&quot;&gt;Enlace en BBCode:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;</p>
</div>
</b:if>

Paso 2: Añadiendo los estilos:

Ahora buscaremos la siguiente línea:
]]></b:skin>

Arriba de ésta, pegaremos el siguiente código:
/* Estilos Compartir entradas
----------------------------------------------- */
.compartiendo-post {
background:#f0f0f0; /* Color de fondo del contenedor */
margin-top:30px; /* Margen superior */
padding-top:5px; /* Espaciado superior */
padding-bottom:30px; /* Espaciado inferior */
padding-left:30px; /* Espaciado a la izquierda */
}
.compartiendo-post p {
font-size:12px; /* Tamaño de texto del mensaje */
}
.compartiendo-post input {
background:#ffffff; /* Fondo de las celdas */
border: 1px solid #A4A4A4; /* Borde de las celdas */
}

Guardamos los cambios y listo:


Consideraciones:
  • Recuerda que puedes cambiar los atributos de los estilos por los que desees.

No hay comentarios:

Publicar un comentario