viernes, 17 de diciembre de 2010

Agregar iconos flotantes de las redes sociales

Hoy vamos a aprender cómo agregar iconos flotantes de los medios sociales en Blogger. Los iconos de los botones se dice que se conecte, ya que sólo permitirá que sus lectores del blog para comunicarte con tu blog, así como que, a través de sitios de medios sociales, por lo que no entienden esto con marcadores iconos.

En este tutorial, los sitios sociales que he incluido son Facebook, Twitter, Delicious con RSS y los botones de correo electrónico, de curso, se pueden ver flotando. Así que vamos a pasar por el tutorial.

1. Ir a Diseño de Blogger > Edición HTML.

2. Encuentra el cierre </body> y antes de que añadir lo siguiente:

<!-- Pichujitos.co.cc -->

<div class="flt-wdt">

<a href="http://www.facebook.com/Page id" title="Join me on Facebook"><img alt="Join me on Facebook" src="your image.png" /></a>



<a href="http://twitter.com/Your profile" title="Follow me on Twitter"><img alt="Follow me on Twitter" src=""your image.png" /></a>




<a href="http://www.delicious.com/Profile" title="Find me on Delicious"><img alt="Find me on Delicious" src=""your image.png" /></a>



<a href="http://feeds.feedburner.com/feed-address" title="Subscribe to RSS"><img alt="Subscribe to RSS" src=""your image.png" /></a>




<a href="http://your blog.blogspot.com/p/Contact page" title="Email me"><img alt="Email me" src="your image.png" /></a>



<!-- Example/Delete -->

<a href="Any Social Site" title="Give it a title"><img alt="Give it a title" src="your image.png" /></a>


</div>

<!-- End -->



Si hay algún JavaScript agregó body en el cierre, a continuación, agregue el código anterior antes de las secuencias de comandos. A continuación se muestra un ejemplo:


Floating icons



Ahora todo lo que tienes que hacer es cambiar los códigos marcados en negrita. Por ejemplo, cambiar el "id de la página"o la "Identificación del perfil" a la suya. También subir tus propios iconos, conseguir los enlaces directos y reemplazar "su image.png" con los iconos correspondientes a sus sitios.

Si necesita añadir más iconos flotantes de tus sitios favoritos social, entonces el formato se da dentro de los códigos anteriores como "Ejemplo / Eliminar". Si no lo necesita, a continuación, eliminar estos fragmentos.

3. Buscar ]]></b:skin> y antes de agregar la siguiente parte de CSS:

.flt-wdt{

position:fixed;

margin-right:10px;

right:0;

top:40%;

}

.flt-wdt img{

float:right;


clear:right;

margin:5px;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

.flt-wdt img:hover{


-moz-transform: scale(1.2) rotate(6deg);

-webkit-transform: scale(1.2) rotate(6deg);

-o-transform: scale(1.2) rotate(6deg);

-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);

transform: scale(1.2) rotate(6deg);

}


El widget se verá en la derecha. Cambiar todos los "correctos" marcados en negrita en el paso 3, a "left" hará que el widget a flotar a la izquierda. Si usted necesita para restablecer la posición de la misma desde la parte superior, a continuación, subir o bajar "40%", o dejarlo como está.

4. Por fin guardar la plantilla.

Ahora tienes botones flotantes de los medios de comunicación social de los blogs en Blogger.
Para Comentar Elige el Sistema de Comentario de tu Agrado:
comentarios google
comentarios blogger
comentarios facebook

Comparte este post con tus amigos!

...o también puedes seguir el blog en:

No olvides suscribirte, para recibir todas mis actualizaciones, directamente a tu email.

Ingresa tu correo electrónico:

Recuerda confirmar tu suscripción, haciendo click en el enlace que recibirás por email.

2 comentarios:

Anónimo

hey
Buena info gracias, ahora ya se como hacer esos botones,
al parecer tu isiste tu pagina con dominio .co.cc
pero tengo una duda,
fijate que yo estoy asiendo una mi pagina,
pero me preguntaba como puedo cambiar el (icono de pagina web)? al parecer tu icono es una "M"
a mi me sale el de (.co.cc)

otra duda donde puedo crear mis paginas web,donde se mire menos publicida o nada, tmbn donde se puedan hacer una flash o normal.

al parecer el icono es de donde agas tu paginas, pero bueno me gustaria saber un poco mas para lograr una pagina asi de buena como la tuya!
gracias desde ya cualqier respuesta.
mi correo es:
coaster@hotmail.es

pd: si deseas borra este comentario ! gracias

Anónimo

yo tmb quiero saber como cambiar el icono .co.cc esque me molesta.
Por favor sime lo podrias explicar o algo pliss.
mi correo es pkalma@hotmail.com

Comparte tu opinión con los demás, deja un comentario. ↓

Los comentarios son moderados, si contienen insultos o son ofensivos no se publicaran.

Es muy importante saber tu opinion sobre lo que se publica en este blog asi que POR FAVOR DEJA TU COMENTARIO.

Comentar es facil, simplemente escribe tu comentario en el cuadro de abajo, trata de comentar con tu perfil abilitado o donde dice Comentar como: selecciona Nombre/URL escribes tu nombre y listo!! (URL puede dejarse en blanco)

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t Add smileys to Blogger +

 

©2009 - 2013 Pichujitos | Theme diseñado por chicoloco123 para Fuutec.com | Ir arriba ↑