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.
Recuerda que tu mensaje será previamente revisado antes de que aparezca en el blog.
- Ten paciencia que tu mensaje pronto será aprobado.
- Comenta sobre el Artículo o Video que veas en esta Entrada.
- No dejes Spam
- No dejes comentarios fuera de lugar.
- Si necesitas contactarme deja tu mensaje aquí con un correo para contactarte. Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon