Fantasticos iconos para compartir tus posts en Blogger

4 comentaron

Ya puedes ponerte en tu Blogspot estos iconos tan guapos creados con CSS3 para que aparezcan en todas las entradas del blog.

Para añadirlos, vamos a la plantilla y marcamos 'expandir plantillas de artilugios'. Buscamos (apreta control+F) la linea <div class='post-footer-line post-footer-line-3'/> y justo debajo pegamos el siguiente codigo:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class="redeando-social" id="redeando-cssanime">
<li class="redeando-facebook">
<a expr:href="&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on Facebook"><b>Facebook</b></a>
</li>
<li class="redeando-twitter">
<a expr:href="&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Tweet This!"><b>Twitter</b></a>
</li>
<li class="redeando-googlebuzz">
<a expr:href="&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;" href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Post on GoogleBuzz"><b>Google Buzz</b></a>
</li>
<li class="redeando-stumbleupon">
<a expr:href="&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Stumble upon something good? Share it on StumbleUpon"><b>StumbleUpon</b></a>
</li>
<li class="redeando-digg">
<a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Digg this!"><b>Digg</b></a>
</li>
<li class="redeando-delicious">
<a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on del.icio.us"><b>Delicious</b></a>
</li>
<li class="redeando-linkedin">
<a expr:href="&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;" href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on LinkedIn"><b>LinkedIn</b></a>
</li>
<li class="redeando-reddit">
<a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on Reddit"><b>Reddit</b></a>
</li>
<li class="redeando-technorati">
<a expr:href="&quot;http://technorati.com/faves?add=&quot; + data:post.url " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on Technorati"><b>Technorati</b></a>
</li>
</ul>
</b:if>



Ahora buscamos en la plantilla ]]></b:skin> y justo antes añadimos el siguiente codigo CSS y guardamos todos los cambios.


 ul.redeando-social { list-style:none; margin:15px auto;display:inline-block; }
    ul.redeando-social li { display:inline; float:left; background-repeat:no-repeat; }
    ul.redeando-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
    ul.redeando-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
    ul.redeando-social li.redeando-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); }
    ul.redeando-social li.redeando-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); }
    ul.redeando-social li.redeando-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); }
    ul.redeando-social li.redeando-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); }
    ul.redeando-social li.redeando-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); }
    ul.redeando-social li.redeando-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); }
    ul.redeando-social li.redeando-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); }
    ul.redeando-social li.redeando-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); }
    ul.redeando-social li.redeando-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); }
    #redeando-cssanime:hover li { opacity:0.2; }
    #redeando-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #redeando-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
    #redeando-cssanime li:hover { opacity:1; }
    #redeando-cssanime li:hover a strong { opacity:1; top:-10px; }




Y asi de majos apareceran los iconos debajo de tus entradas: