Social Icons

lunes, 25 de marzo de 2013

Marcadores Sociales estilo Windows 8 para Blogger

Con el reciente lanzamiento de Windows 8, las cosas con ese estilo se han puesto de moda y Blogger no es la excepción, teniendo en cuenta el estilo de este sistema operativo me decidi hacer unos marcadores para Blogger que tuvieran un ligero estilo de Windows 8 y este ha sido el resultado.


Puedes ver los marcadores funcionando en el siguiente blog de pruebas.

Para añadir este truco a tu blog, primero debes ir a la Edición HTML de tu blog y buscar con los artilugos expandidos, lo siguiente:
 <div class='post-footer-line post-footer-line-3'>

Debajo de la anterior linea pega lo siguiente:
<div class='separator' style='clear: both; text-align: right;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizy04DtbowCd620UsmomDacssMW6LFf9kWvimA1orwRwWt1oDjAYVuZhp3hv3VCk-9E393AgVTKnhIQR51dRSYPJryHic-ISS74kQm9o1guL4m6oIdZzdXGkvQx_exRvC9cJh0mMPrGGQ/s1600/Compartir.png'/></div>
<br/>
    <a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank' title='Twittear'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSpNjPlhrWHNSdYKtMEoguufVjmv82g2VEd-S6awoUDUqoNcRyGX53Or5qMkkLV6xI1cV4z5nlxYX1HtVFg5FCCJJGOrqf6B7PNxtVPNgc5q7sXoysFHlNPQXLCj_PZjvWjAas9il5-E/s86/twitter.png'/></a>


<a class='facebook' 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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZ1MeBZhAZlvcsNdz3nSGSc7ORoFGZ4axaEY3vOLoRcvxodhvEo8dusqq1I_qA_rzP1g9mD-1bIMd-EVnUMJ_umHtPDu5zb7IFrP5pRoJO1K9A_BSTOSl-pShoYon9SMiRfoeCx8rWfc/s108/facebook.png'/></a>

<a class='googleplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartir en Google Plus'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6yyx5JgjNMgIGG0jy9VW1CM9D3GnxeYBIGp8j4T5cxeMbSh2NpNxrJSm6lRIorO2wuV8stPzPXhipruP6BCpe7_P3H5JiBVF7FdVbsV37nyiGocxHBnO31oBsgHTadWJCCKgSe41eto/s97/google%252B.png'/></a>

<a class='pinterest' expr:href='&quot;https://pinterest.com/login/?next=/pin/create/bookmarklet/%3Fmedia%3Dhttp%253A%252F%252F&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartir en Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVObthWui0S8bDLok3Q2aoqIflXz5LmHZ3FqPkpA35C61fIDNQFirkRBJc8H3UB7jMWJ8EUxSScSAjsLAwdXIhp49rfWhngPJ5ys9OPPIWIQkH5y2NaujPswd8jC3Q56zU0Yntu2U25Q/s100/pinterest.png'/></a>

Ahora solo resta guardar los cambio y listo. En el pack vienen los iconos de Twitter, Facebook, Google + y Pinterest. 

Este es un pequeño truco, que espero sea de su agrado.

No hay comentarios:

Publicar un comentario

 

Sample text

Sample Text