Para poner el icono de redes sociales en cada uno de nuestros post, de modo que sí alguno de nuestros visitantes utiliza uno de ellos, tenga el link para agregarlo a sus favoritos de forma rápida, no es necesario que el blog esté suscrito a ninguno de estos servicios, más bien, los enlaces son precisamente para que el usuario lo suscriba y tenga a mano tu link sí lo considera de utilidad.
Para hacerlo seguimos los siguientes pasos:
1º.- En nuestro Panel elegimos la pestaña Diseño, y después la opción Edicion Html, donde activamos la casilla Expandir plantilla de Artilugios.
2º.- Buscamos el siguiente código:
<p class='post-footer-line post-footer-line-3'/>
3º.- Sustituimos esa linea por:
<p class='post-footer-line post-footer-line-3'>
<div class='rsociales'>
Agregar a marcadores favoritos:
<ul>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNvZwb62g6h5lC5LPOozRhBBlzh11dm7gDr0CjmDf3ziyGmJQAAzYDoU_jGVUDQuMfQG8Sj_fVaxR_vOUcPtRyO8aOfgFuzHrcaWHKyOyVDwCaXsPHlRXXZNIpxvj3NKqCWe-YQDprNk/s1600/technorati.gif'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9NRvJUKk954DXFpKODGUDh2jWEnHbU06nJpulcOuqh4HvRrXdC8I9JHwwct5dXhqxI0jO2tuJE2UURMRRy3-WqiRmhhiLwden9ja0CmPeQ-g8GZOTaO7tUEU39s5UbAFGtR7m3OCTIM/s1600/delicious.gif'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielQpJxWxzfdKB4cFHi11a8rMTjKG9w6DlfaJU1EwW2-uyqMrVK6nsF8Xk9G_wZO-q67-2I1rJJVvaD0F4skgE_N-ONh-U-Zl52M52T5YIe7iwlCn9H8TYKXeUWPj6C0ey3su54_RtPqs/s1600/digg.png'/></a></li>
<li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_ep9uHozdxAZ0EOooaxzY8kTwthi2uFObEPDOiWS9sQaUwpCDlhhMX9dAMeMD6N80rK_e7iDISwNp-WTQJaizPl_ojUtmXVZ3KTMoDLT3FiNMeq9YXEFlHCIknzqgeA8mjmQkBiCtDQ/s1600/yahoo.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKJvQ4ULcBGGbSvdAPoWn9hNb8qyYzxfPK5wWG6Mn1TGlMdzcK05a7fR3Gtx4cLgJitY8-4iLsb7AyH1pxNmSIpJqzInrb1JDghi7lCtAAp4xfZv_37dvdIurRwjk1fMmzTANYQzPejI/s1600/google.gif'/></a></li>
<li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Meneame' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOmskvFFDX28MHJIS_Ahes0W_j4A5Gv7CBf_Ekq_p_kVh1N0FmQiUPh1SN9IM75D3gAiPoKyCrsvzgrFeJobPPOHmKzQD_s6TNRtPlC4_4d6wY4CqtQORy_Mw-2GNWOI6QF3yMBfz4nHo/s1600/meneame.png'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Furl' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3kwyDTLQeg6eUaRX2nwRRr_KDv0YMEft5P-TMihThPk1bBvZYiU5349Rb_Kn3qEfyiTFPCB304q_82eIoUTJYgkLtc4j7DxBTmWGNGU0KKXsvjy-hPQ83W_j16tXAEjVh-wAR6Pa9Rc/s1600/furl.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp2fHhivcDFMn2OZYb2Jux9eo4KUUAj82AhaANo_XYpfsETPPT8MtOw2jx1vAc0QL7yXa5XYCv3HjAdAjgB3pwCrwhwCVPDV6JB0Ppu90bWkMxkmShHnAwkIkrCDRhKqd-AyvMW3xKv8U/s1600/reddit.gif '/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFna7agDBBBM5iTtmbaN9EKKSgXIio2h0o8UL-UMG_fRs_uU0vToGSjxIYtUQgtxQLAuB_n4CFWDgqpaCb7iBEhU9z_aTXccInnYjjpHJSXJHcZRXnf0-Kj6uPJz22R-yhYbMZFNtiI5A/s1600/magnolia.gif'/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vAy-R_OgCzD869QhW8alsq8ZflKGEE9mam62EZQ6dx_GexZWfxdfZpEMwR2vaVSvJMF5H8K-f1EbHnTBGNYpIBkWBsLy8Pk979O1gsCRLxhHdqzE6ce4_HLo8AtoHI5w2NbPlHqzzX8/s1600/blinklists.gif'/></a></li>
<li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUyo7a0NpXDqTawT9FbHz9hRKX94VqqIg3LKmqdesSCXVATE0yqB0xCn0PPk4Wwgado2SQ_vIsTeoLc7bDSqiuAQNllhq1RyxQhRvD0Lh6FI8iCOBm1duo5dFPFeCHroQkvyPfUdFDgfY/s1600/blogmarks.gif'/></a></li>
</ul>
</div>
</p>
Se podrian poner más, pero estas son las más importantes.
4º.- Buscamos el codigo siguiente:
]]></b:skin>
5º.- Justo encima de esta linea, pegamos el siguiente código:
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}
Estos son los estilos aplicados a los iconos. Se pueden modificar para que se adapten al blog de cada uno.
Via|Blogandweb
Leer el resto de esta entrada »