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 == "item"'>
<div id="marcadores-sociales">
<a class="social-css-iconos primericono" expr:href='"http://twitter.com/home?status=" + data:post.title + ": " + data:post.url' rel='nofollow' target='_blank' title='Twittear'></a>
<a class="social-css-iconos segundoicono" expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url+ "&title=" + data:post.title' rel='nofollow' target='_blank' title='Compartir en Facebook'></a>
<a class="social-css-iconos tercericono" expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' target='_blank' title='Compartir en Blogger'></a>
<a class="social-css-iconos cuartoicono" expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + 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 + "&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 + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Yahoo!'></a>
<a class="social-css-iconos septimoicono" expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'></a>
<a class="social-css-iconos octavoicono" expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Reddit'></a>
<a class="social-css-iconos novenoicono" expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Digg This'></a>
<a class="social-css-iconos decimoicono" expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + 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.