add

Como compartir todo tipo de Widget de las mejores redes sociales utilizando los métodos de flipper


Compartir en tu blog o web diferentes widgets de las mejores redes sociales es muy facial hacerlo con nosotros. En la cual nosotros solo usaremos scripts CSS con el fin que se mueva automáticamente en una forma circular a lado de cada widget, para que las personas que lo vean te den un clic en ellos y así se haga más conocido tu sitio web o blog dentro de las redes sociales más famosas de hoy en día. Ahora que usted ya ha aprendido a realizar todo tipo de transiciones en CSS3, es hora de aplicar su habilidad de una manera diferente. Los iconos que vera a continuación están en forma vertical y al momento que se muestran darán una rotación o giran sin que su mouse pase por ellos. El tiempo empleado en el efecto de cada icono es tan reducido que el usuario casi no lo notara, ya que solo se darán cuenta cuando las rotaciones de cada icono vayan cambiando de un lugar a otro, todo esto lo vamos hacer sin la utilización de jQuery.
Como compartir todo tipo de Widget de las mejores redes sociales utilizando los métodos de flipper

Todos se preguntaran ¿Cómo funciona?

Primero usamos nuestros iconos prediseñados y empacados en una sola imagen. Luego creamos clases separadas para cada icono especificando la propiedad de posición de fondo,  con el fin de conectar las subclases de la clase principal que contiene la imagen Packed. Para el efecto vertical nosotros vamos a utilizar ease-in que nos da un tiempo de espera en cada icono de 0,15 segundos.
 

Nosotros teníamos un conjunto de iconos en forma vertical de 12 iconos, de los cuales sann excluidos los siguientes, Technorati, Yahoo y YouTube, con el fin de hacer uso de las mejores redes sociales que tenemos hoy en día, las cuales son:

1 Google Plus
2 Facebook
3 Twitter
4 Pinterest
5 Delicious
6 Digg
7 Stumble upon
8 Reddit
9 RSS

Algunos se preguntaran ¿Porque debemos usarlos?

Tengo 4 respuestas para ello, son las siguientes:

1  Aquí vamos a utilizar solo CSS y scripts no,
2  Se carga desde tu propio blog y no se conecta a servidores de terceros,
3  Se carga rápido y se ve muy bien!
4  Atrae a los lectores y aumenta las posibilidades de circulación en las redes sociales
 

Añadir a Blogger
 

Este gadget se puede insertar fácilmente en cualquier plataforma de blogs haciendo cambios simples a los enlaces de uso compartido. Los usuarios de Blogger pueden seguir estos sencillos pasos para instalar estos iconos en sus blogs:

1. Ir a Blogger> Plantilla
2. Haga una copia de seguridad de su plantilla
3. Haga clic en "Editar HTML" luego en "continuar"
4. Haga clic en expandir plantilla
5.
Luego busque este <data:post.body/>
6. Justo debajo de ese codigo se pega el siguiente código HTML

<style>
/*--------Flipper Sharing www.ayudadeblogger.com Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(http://4.bp.blogspot.com/-dlD3BDKTZjA/T9IuXkfhSeI/AAAAAAAAGno/s8BGOkjdwX0/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;   
-moz-transition: ease-in 0.15s all;   
-o-transition: ease-in 0.15s all;   
-ms-transition: ease-in 0.15s all;   
transition: ease-in 0.15s all;
cursor:pointer;

}

.flipper a.googleplus {
background-position: 0px -348px;

}
.flipper a.googleplus:hover {
background-position: 0px -406px;

}

.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;

}

.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;

}
.flipper a.digg {
background-position: 0px -116px;

}
.flipper a.digg:hover {
background-position: 0px -174px;

}
.flipper a.stumbleupon {
background-position: 0px -812px;

}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;

}
.flipper a.technorati {
background-position: 0px -928px;

}
.flipper a.technorati:hover {
background-position: 0px -406px;

}
.flipper a.twitter {
background-position: 0px -928px;

}
.flipper a.twitter:hover {
background-position: 0px -986px;

}
.flipper a.facebook {
background-position: 0px -232px;

}
.flipper a.facebook:hover {
background-position: 0px -290px;

}
.flipper a.reddit {
background-position: 0px -580px;

}
.flipper a.reddit:hover {
background-position: 0px -638px;

}
.flipper a.rss {
background-position: 0px -696px;

}
.flipper a.rss:hover {
background-position: 0px -754px;

}

.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;

}
</style>


<div class='flipper'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="Pleaseshare">
Por
favor comparta esto! :)
</div>


<!--Google Plus-by www.grupodelecluse.com->
<a class='googleplus' href="http://plus.google.com/" rel='external nofollow' target='_blank' title='+1 it :&gt;'/>


<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>


<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>


<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>


<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>


<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>


<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>

<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>

</b:if></div>
<div style="clear:both"/>

Realice estos cambios:

Para cambiar el color del texto que aparece en la parte superior del widget cámbielo desde la edición html de su blog y cambie los números por este # 333333
Si en caso de que usted quiera eliminar algunos de los iconos lo podrá realizar a continuación, basta con borrar su código. Por ejemplo, si deseamos eliminar el icono de Digg de la lista, lo único que tenemos que hacer es borrar el código y listo:

Ejemplo:

<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

¿Necesitas ayuda?

Si usted tiene algún problema con la configuración de este gadget solo háganos saber y de inmediato les responderemos.

Saludos.

5 comentarios:

  1. buen post,........... les felicito webmaster...

    ResponderEliminar
  2. Gracias, recuerde que estamos para ayudarle..
    saludos...

    ResponderEliminar
  3. Hola gracias el post pero necesito ayuda de como centrarlo y aparte no me acepta el código de google+ te agradeseria mucho que me ayudaras con eso un saludo y excelente pagina :D

    ResponderEliminar
  4. Hola, el codigo es muy simple y facil de realizarlo, no debe de ocurrirte el error que indicas. Enviame la direcciond de tu blog para poder analizarla
    Saludos.

    ResponderEliminar

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios