Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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

  • 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="http://4.bp.blogspot.com/-qVUBbmCx-Ig/Twa1B9-s-9I/AAAAAAAAASc/XG49kOk0CTA/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/Blogspot-tips">
<img border="0" src="http://2.bp.blogspot.com/-Ua4DcaNG2lw/Twa1DeGE3AI/AAAAAAAAAS0/3-lUD6LlesY/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://facebook.com/USERNAME">
<img border="0" src="http://3.bp.blogspot.com/-gboABl8-TCM/Twa1BWF5OqI/AAAAAAAAASY/OClDlhtVKcE/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://twitter.com/USERNAME">
<img border="0" src="http://2.bp.blogspot.com/-moPYfBhKgwU/Twa1CZHTwdI/AAAAAAAAASk/dNMBASYVZOY/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://4.bp.blogspot.com/-49Dnq2gJrno/Twa1C5rAzSI/AAAAAAAAASs/bAbKDRbIZ1g/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="http://4.bp.blogspot.com/-qVUBbmCx-Ig/Twa1B9-s-9I/AAAAAAAAASc/XG49kOk0CTA/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://2.bp.blogspot.com/-Ua4DcaNG2lw/Twa1DeGE3AI/AAAAAAAAAS0/3-lUD6LlesY/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://3.bp.blogspot.com/-gboABl8-TCM/Twa1BWF5OqI/AAAAAAAAASY/OClDlhtVKcE/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://2.bp.blogspot.com/-moPYfBhKgwU/Twa1CZHTwdI/AAAAAAAAASk/dNMBASYVZOY/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://4.bp.blogspot.com/-49Dnq2gJrno/Twa1C5rAzSI/AAAAAAAAASs/bAbKDRbIZ1g/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="http://4.bp.blogspot.com/-qVUBbmCx-Ig/Twa1B9-s-9I/AAAAAAAAASc/XG49kOk0CTA/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://2.bp.blogspot.com/-Ua4DcaNG2lw/Twa1DeGE3AI/AAAAAAAAAS0/3-lUD6LlesY/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://3.bp.blogspot.com/-gboABl8-TCM/Twa1BWF5OqI/AAAAAAAAASY/OClDlhtVKcE/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://2.bp.blogspot.com/-moPYfBhKgwU/Twa1CZHTwdI/AAAAAAAAASk/dNMBASYVZOY/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://tutorialesblogger.blogspot.com.ar/">
<img border="0" src="http://4.bp.blogspot.com/-49Dnq2gJrno/Twa1C5rAzSI/AAAAAAAAASs/bAbKDRbIZ1g/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

- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar