Tutoriales Sobre Blogger: Gadget de Redes Sociales Compartir con CSS3 y ToolTip

En este tutorial veremos como crear un Gadget hermosos de Redes sociales con CSS/JQuery , y un Tooltip para cada Marcador Social



Antes de Empezar veremos de que se trata con un demostración

Demostracion

• Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>Marcamos "Expandir Plantilla de Artilugios"
• Paso 2: Buscamos con Ctrol + F 

</head>

• Paso 3: Justo por encima pegamos el siguiente código CSS 

<style type="text/css">
    /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
    ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; }
    ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
    ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
    ul.way2blogging-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.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO9IMVnPLXiE5cLOg-U2rS5nPuCDZkLfi3sz18A00nFR4gtj2jrITGsjmG02C98Yde9KLxZKmCTr4R3ZN46cTae16Ysj05h6qGfRVIqusvMqKCW7IjB_GOzkofXSMr3dDJTmzyw4e-zScU/s1600/way2blogging-facebook.png"); }
    ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0kDmNcSoACxTfEDoSMxaltRBFrw0NauuifVKQrcEr8pWUGVxmH9Jv6Cg1XueQl_IghozGPSXYk8NxWvURK4N7C_V6ZKoMwEHmPUVkrF0-3ySm5M3P-E1Bjb2N5Rcjk7zwOPIRovwjWxOK/s1600/way2blogging-twitter.png"); }
    ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLDew3r7_x8XZ7vFR4Q-LKS7-baeD7edUzuJ5T1IsW7PZh38O_sEPt46yvP73Vu60-u11Ko4GiZPACtQEVwFhhGcxO7SNAvJRtKfI3bxo48vfdpQp1WUHDFs33XpWB4YRv1KoYQ73ZIaqi/s1600/way2blogging-googlebuzz.png"); }
    ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY1bJoVt-XnhY9DTzsUJd9ZWyl7CSxPSqB0Zsy8ShnBN6DiMCTqwkTG5qzkR07rVJqnVeMN4RppfGg5rgBeheNx5Lc2uxFKVdkLRtc46uhAXqtt68yBieVwkK6BXjEFo26T8QIGILgVvjS/s1600/way2blogging-stumbleupon.png"); }
    ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi53nVcxhcOCHUCfpP2BmJFBg1b2rjBjjntLD-0TkqxSMagr5x_TVHxRrdO5zFAzI4MXo_aPLWWJwy3MK2YoQfdBuKK4OnQM_LzoTPyaSZXsNosNtel7TUUNPQnLdGX-QIVez6ZQ8rlws1L/s1600/way2blogging-digg.png"); }
    ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEji0WBUb5Tl83trfs8wHgK1rAkhQh8esvoFXb618vxKiRWd3BBv-S6_0APV-idUEXHvwoxOgLMGX-YAht75YtdaBnPBqQoRBgtSijzQZHHowwQsDFsMhnvT-EFQXHwNXL-Rv68dpt6_X/s1600/way2blogging-delicious.png"); }
    ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWdHKCLSWi29twGSxasvfRXbAV5RCPxxTakdWak0fuSE66nbNbhFbMfpq6YqXcWO_WSk2DvO6WVGbeBsaXu6oB66eAWNLcShDKwdAwmZrhkOWNdGG7DMFjT1uSBme67wW-tbx06xtVgx0/s1600/way2blogging-linkedin.png"); }
    ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M0Sm2i-rFZAUm8_1FMJpnRXkZ0eJkZrcJTIu0_oMVZYpDy2Y1EFOgBPVqCTGGXj62MN8r_M6W6G29y62G7xX62qxh0d1R1HJ9dhjxXsfIHHl8GUub3KkuU0ygAEkG5GcT_Gcsk9Ihpfl/s1600/way2blogging-reddit.png"); }
    ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46m3moE7n6CSz-vpiE7g7K1w0fnJKYLCPt5WtbT9FDlPNNScrqLGIRPrV60C1UzP5E9iA3zHbb0I1DVsp0lfT63bBecaCfTeUaFzFmARTM0pr9R9j-EHuOCnxOlKKd2_snqI3Lw1NGHF1/s1600/way2blogging-technorati.png"); }
    #way2blogging-cssanime:hover li { opacity:0.2; }
    #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
    #way2blogging-cssanime li:hover { opacity:1; }
    #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }
    /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
    </style>

• Paso 4: Buscamos el siguiente codigo (Ctrol + F)

 <data:post.body/> 

• Paso 5: Justo debajo pegamos el siguiente codigo

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <ul class='way2blogging-social' id='way2blogging-cssanime'>
    <li class='way2blogging-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 ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Comparte esta entrada en Facebook'><strong>Facebook</strong></a>
    </li>
    <li class='way2blogging-twitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Comparte en Twitter'><strong>Twitter</strong></a>
    </li>
    <li class='way2blogging-googlebuzz'>
    <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Comparte esta entrada en GoogleBuzz'><strong>Google Buzz</strong></a>
    </li>
    <li class='way2blogging-stumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Da esta noticia en StumbleUpon'><strong>StumbleUpon</strong></a>
    </li>
    <li class='way2blogging-digg'>
    <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Comparte en Digg'><strong>Digg</strong></a>
    </li>
    <li class='way2blogging-delicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Comparte esta entrada del.icio.us'><strong>Delicious</strong></a>
    </li>
    <li class='way2blogging-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;' rel='nofollow' title='Comparte esta entrada en LinkedIn'><strong>LinkedIn</strong></a>
    </li>
    <li class='way2blogging-reddit'>
    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Comparte esta entrada en Reddit'><strong>Reddit</strong></a>
    </li>
    <li class='way2blogging-technorati'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Comparte esta entrada en Technorati'><strong>Technorati</strong></a>
    </li>
    </ul>
    </b:if> 

• Paso 6: Guaramos los cambios afectados a la plantilla y listo

Ya podremos compartir todas nuestras entradas con las Redes Sociales