Tutoriales Sobre Blogger: Botones Compartir tus Redes Sociales con CSS3 para Blogger

Botones de Redes Sociales que giran 180º o 60 º  que giran a la izquierda o la derecha , dependiendo de los efectos que le vallamos a agregar

Antes de Comenzar veamos una demostración de lo que vamos a ver

Demostracion

• Paso 1: Vamos a Blogger>>Plantillas>> Edición HTML
• Paso 2: Justo por encima de </Head> agregamos el siguiente código

<style>
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the &quot;transition prop is added */
}
p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>

• Paso 3: Guardar Plantilla 
• Para añadirlos a tu blog vamos a Blogger>>Diceño>>Añadir un Gadget>>HTML/Javascript

Si queremos que gire 360 grados , agregamos el siguiente Código HTML

<p id="socialicons">
<a href="http://tutorialesblogger.blogspot.com.ar/t">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTzy7JEE8gISO_gUT7BrCCVu9RmxUs6afjLvcws94FGbN7EhfDFEdIiK4mLCEV4Yf4IeerMizr1caKpooTdnaMJseVRtIluvRpMQ6PFmKgrj4kD16AjLQyFNwZ97Xtr5W7lVax8AATBtxq/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/Blogspot-tips">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCgnx0jxdczzj98OcQL6LpzFD7hdsGOohS2NhpiyeCNs7dTO3rjrPpQdq6UO8x6apEMyCKAnpCyhgEpjLZ7TqE32S8XLfDhJtMFn_xRSrxexagMSvtw4kK8khzmqlSVtIe2ytkk0KeVL2/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://facebook.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6BQHEGA2fiBBcJOkGiTwBn7AT6n7bMm9_uBrriy9QcCUIgc3pLrfXOT1B63FrjQssgAcqd6kQiZbEV-J27iaK42FhxMMHn2MfpOv2dVl_2eENP6v_-VdCPDGB2rzXiULTi_jl-PDpyjht/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://twitter.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoX2JA8XcHpfhZrc_sHaJpHAU9MiCNUgDYjnlcmbXUSE_cDvo5Nrq_dN3Bj2CtZz9lS14BtJZTVMlvmTQmphVxGmaGnErhD8ux7wuoD3a4aIhmsPYTGhdfFAAFPmGm2biI2-xKD1rbDdb/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1E5xU67TWrH10SWo8Ys_9bUdvjWfwj0lerfK3O8nrCjsBRtZpZ57tV__UxVW2Zg72hpkLcZC3lEhoyzCaJEMmOhQZz4f-CLKljwv5KlqdDgjfoarv7CorxGsG0murHriYCsaqwRbngpF8/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

Si queremos que Gire 60 grados , agregamos el siguiente Código HTML

<p id="socialicons2">
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTzy7JEE8gISO_gUT7BrCCVu9RmxUs6afjLvcws94FGbN7EhfDFEdIiK4mLCEV4Yf4IeerMizr1caKpooTdnaMJseVRtIluvRpMQ6PFmKgrj4kD16AjLQyFNwZ97Xtr5W7lVax8AATBtxq/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCgnx0jxdczzj98OcQL6LpzFD7hdsGOohS2NhpiyeCNs7dTO3rjrPpQdq6UO8x6apEMyCKAnpCyhgEpjLZ7TqE32S8XLfDhJtMFn_xRSrxexagMSvtw4kK8khzmqlSVtIe2ytkk0KeVL2/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6BQHEGA2fiBBcJOkGiTwBn7AT6n7bMm9_uBrriy9QcCUIgc3pLrfXOT1B63FrjQssgAcqd6kQiZbEV-J27iaK42FhxMMHn2MfpOv2dVl_2eENP6v_-VdCPDGB2rzXiULTi_jl-PDpyjht/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoX2JA8XcHpfhZrc_sHaJpHAU9MiCNUgDYjnlcmbXUSE_cDvo5Nrq_dN3Bj2CtZz9lS14BtJZTVMlvmTQmphVxGmaGnErhD8ux7wuoD3a4aIhmsPYTGhdfFAAFPmGm2biI2-xKD1rbDdb/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1E5xU67TWrH10SWo8Ys_9bUdvjWfwj0lerfK3O8nrCjsBRtZpZ57tV__UxVW2Zg72hpkLcZC3lEhoyzCaJEMmOhQZz4f-CLKljwv5KlqdDgjfoarv7CorxGsG0murHriYCsaqwRbngpF8/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

Por ultimo si queremos que gire -360 en contra a las agujas del Reloj agregamos el Siguiente Código

<p id="socialicons3">
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTzy7JEE8gISO_gUT7BrCCVu9RmxUs6afjLvcws94FGbN7EhfDFEdIiK4mLCEV4Yf4IeerMizr1caKpooTdnaMJseVRtIluvRpMQ6PFmKgrj4kD16AjLQyFNwZ97Xtr5W7lVax8AATBtxq/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCgnx0jxdczzj98OcQL6LpzFD7hdsGOohS2NhpiyeCNs7dTO3rjrPpQdq6UO8x6apEMyCKAnpCyhgEpjLZ7TqE32S8XLfDhJtMFn_xRSrxexagMSvtw4kK8khzmqlSVtIe2ytkk0KeVL2/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6BQHEGA2fiBBcJOkGiTwBn7AT6n7bMm9_uBrriy9QcCUIgc3pLrfXOT1B63FrjQssgAcqd6kQiZbEV-J27iaK42FhxMMHn2MfpOv2dVl_2eENP6v_-VdCPDGB2rzXiULTi_jl-PDpyjht/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoX2JA8XcHpfhZrc_sHaJpHAU9MiCNUgDYjnlcmbXUSE_cDvo5Nrq_dN3Bj2CtZz9lS14BtJZTVMlvmTQmphVxGmaGnErhD8ux7wuoD3a4aIhmsPYTGhdfFAAFPmGm2biI2-xKD1rbDdb/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1E5xU67TWrH10SWo8Ys_9bUdvjWfwj0lerfK3O8nrCjsBRtZpZ57tV__UxVW2Zg72hpkLcZC3lEhoyzCaJEMmOhQZz4f-CLKljwv5KlqdDgjfoarv7CorxGsG0murHriYCsaqwRbngpF8/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

• Paso 4: Guardamos el Gadget

Nota:- Solo queda cambiar la URL de los enlaces y si también quieres las imágenes