Como agregar marcadores sociales en Blogger

Sabemos lo importante que son las redes sociales hoy en día, mas aun para aquellos que tenemos un blog, estas redes sociales nos ayudan a compartir contenido e interactuar con nuestros lectores / usuarios de nuestro sitio, esto es muy bueno ya que podremos saber y conocer un poco mas de ellos compartiendo comentarios y críticas sobre el contenido que publiquemos. Por eso hoy vamos a compartir una herramienta la cual va a permitir que nuestros usuarios puedan compartir el contenido de nuestro sitio con sus redes sociales favoritas, esto nos va a ayudar a captar nuevos usuarios y por ende nuevas visitas a nuestro sitio, veamos como agregar los marcadores sociales en blogger, antes de empezar recuerda hacer una copia de tu plantilla:

Los marcadores agregados se veran de la siguiente manera como lo vamos a ver en esta imagen:

El primer paso es añadir los estilos para eso vamos a Diseño | Edición HTML y allí buscamos “]]></b:skin>” y arriba de este pega el siguiente código que vemos aquí abajo.

#marcadores-sociales {
width:420px;
border:1px solid #d2d2d2;
background:#2facd6;
padding:4px;
height:40px;
margin:0 auto;
}
.social-css-iconos {
width:32px;
height:32px;
margin:3px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
cursor:pointer;
}
.primericono{
background:url(http://3.bp.blogspot.com/-dC-4tAX2-GM/TqrktZj02nI/AAAAAAAAAVA/7w7n_y3eK6Y/s1600/twitter.png) 0 -32px no-repeat;
float:left;
}
.primericono:hover{
background:url(http://3.bp.blogspot.com/-dC-4tAX2-GM/TqrktZj02nI/AAAAAAAAAVA/7w7n_y3eK6Y/s1600/twitter.png) 0 0px no-repeat;
}
.segundoicono{
background:url(http://4.bp.blogspot.com/-YVN_-UZcY0o/TqrlVEtFRUI/AAAAAAAAAVI/Xx7WBwvjwno/s1600/facebook.png) 0 -32px no-repeat;
float:left;
}
.segundoicono:hover{
background:url(http://4.bp.blogspot.com/-YVN_-UZcY0o/TqrlVEtFRUI/AAAAAAAAAVI/Xx7WBwvjwno/s1600/facebook.png) 0 0px no-repeat;
}
.tercericono{background:url(http://4.bp.blogspot.com/-4Q96hcw8lJY/TqrlyGjN76I/AAAAAAAAAVQ/t5gy0bnwO2E/s1600/blogger.png) 0 -32px no-repeat;
float:left;
}
.tercericono:hover{background:url(http://4.bp.blogspot.com/-4Q96hcw8lJY/TqrlyGjN76I/AAAAAAAAAVQ/t5gy0bnwO2E/s1600/blogger.png) 0 0px no-repeat;
}
.cuartoicono{background:url(http://4.bp.blogspot.com/-sN_4UrnUYek/TqrmdO4rd3I/AAAAAAAAAVY/SMCKXjTGwD0/s1600/myspace.png) 0 -32px no-repeat;
float:left;
}
.cuartoicono:hover{background:url(http://4.bp.blogspot.com/-sN_4UrnUYek/TqrmdO4rd3I/AAAAAAAAAVY/SMCKXjTGwD0/s1600/myspace.png) 0 0px no-repeat;
}
.quintoicono{background:url(http://2.bp.blogspot.com/-pu7_VRyNojs/Tqrm0Gyyd2I/AAAAAAAAAVg/8xVumJgtN6c/s1600/delicious.png) 0 -32px no-repeat;
float:left;
}
.quintoicono:hover{background:url(http://2.bp.blogspot.com/-pu7_VRyNojs/Tqrm0Gyyd2I/AAAAAAAAAVg/8xVumJgtN6c/s1600/delicious.png) 0 0px no-repeat;
}
.sextoicono{background:url(http://2.bp.blogspot.com/-5mQz9yIKX2A/TqrncANzHGI/AAAAAAAAAVo/xsHF6yzWGNg/s1600/yahoo.png) 0 -32px no-repeat;
float:left;
}
.sextoicono:hover{background:url(http://2.bp.blogspot.com/-5mQz9yIKX2A/TqrncANzHGI/AAAAAAAAAVo/xsHF6yzWGNg/s1600/yahoo.png) 0 0px no-repeat;
}
.septimoicono{background:url(http://1.bp.blogspot.com/-MZb8Mnwt0LA/Tqrnw3A3-pI/AAAAAAAAAVw/CWVWJIhsz-w/s1600/stumbleupon.png) 0 -32px no-repeat;
float:left;
}
.septimoicono:hover{background:url(http://1.bp.blogspot.com/-MZb8Mnwt0LA/Tqrnw3A3-pI/AAAAAAAAAVw/CWVWJIhsz-w/s1600/stumbleupon.png) 0 0px no-repeat;
}
.octavoicono{background:url(http://2.bp.blogspot.com/-_xIth1DZ9UE/TqroOUldAlI/AAAAAAAAAV4/JoyBHm72DUI/s1600/reddit.png) 0 -32px no-repeat;
float:left;
}
.octavoicono:hover{background:url(http://2.bp.blogspot.com/-_xIth1DZ9UE/TqroOUldAlI/AAAAAAAAAV4/JoyBHm72DUI/s1600/reddit.png) 0 0px no-repeat;
}
.novenoicono{background:url(http://4.bp.blogspot.com/-9kOCLBYutKs/TqrokRTupXI/AAAAAAAAAWA/E7VRyk_yw-I/s1600/digg.png) 0 -32px no-repeat;
float:left;
}
.novenoicono:hover{background:url(http://4.bp.blogspot.com/-9kOCLBYutKs/TqrokRTupXI/AAAAAAAAAWA/E7VRyk_yw-I/s1600/digg.png) 0 0px no-repeat;
}

.decimoicono{background:url(http://1.bp.blogspot.com/-4Zd8x2OUfs8/TqrpbxBqBUI/AAAAAAAAAWI/Z36y4BVGllg/s1600/technorati.png) 0 -32px no-repeat;
float:left;
}
.decimoicono:hover{background:url(http://1.bp.blogspot.com/-4Zd8x2OUfs8/TqrpbxBqBUI/AAAAAAAAAWI/Z36y4BVGllg/s1600/technorati.png) 0 0px no-repeat;
}

.undecimoicono{background:url(http://3.bp.blogspot.com/-EmVGu_3i4FM/Tqt2XV1hShI/AAAAAAAAAWg/1EZlse2ymCg/s1600/bitacoras.png) 0 -32px no-repeat;
float:left;
}
.undecimoicono:hover{background:url(http://3.bp.blogspot.com/-EmVGu_3i4FM/Tqt2XV1hShI/AAAAAAAAAWg/1EZlse2ymCg/s1600/bitacoras.png) 0 0px no-repeat;
}

 El segundo paso que vamos hacer es marcar la plantilla “Expandir plantillas de Artilugios” y luego buscaremos el siguiente código:

<div class='post-footer-line post-footer-line-1'>

Debajo de este código pegaremos lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="marcadores-sociales">

<a class="social-css-iconos primericono" expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank' title='Twittear'></a>

<a class="social-css-iconos segundoicono" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartir en Facebook'></a>

<a class="social-css-iconos tercericono" expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Compartir en Blogger'></a>

<a class="social-css-iconos cuartoicono" expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Compartir en Myspace'></a>

<a class="social-css-iconos quintoicono" expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Delicious'></a>

<a class="social-css-iconos sextoicono" expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?url" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Yahoo!'></a>

<a class="social-css-iconos septimoicono" expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'></a>

<a class="social-css-iconos octavoicono" expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'></a>

<a class="social-css-iconos novenoicono" expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg This'></a>

<a class="social-css-iconos decimoicono" expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Technorati'></a>

<a class="social-css-iconos undecimoicono" expr:href='"http://bitacoras.com/anotaciones/" + data:post.url' rel="nofollow" target="_blank" title="Votar en Bitácoras"></a>
</div> </b:if>

Tercer paso y último es guardar los cambios y ya quedarían implementados los marcadores sociales en tu blog, la autoria de este tutorial es del blog  Ayuda Blogger.

Compartelo :

Tweet

✚

Entradas Relacionadas