Mostrando entradas con la etiqueta Widgets. Mostrar todas las entradas
Mostrando entradas con la etiqueta Widgets. Mostrar todas las entradas

jueves, 31 de enero de 2013

Widget para que sigan y recomienden tu blog. Incluye: Botones de Twitter, Facebook, Insignia de Google+ y RSS

Creo que todos estamos de acuerdo en la importancia que tiene el tener en nuestro blog las vías que permitan estar en contacto con nuestros lectores/seguidores a través de las distintas redes sociales que usamos. Por ello, ponemos botones de Twitter, Facebook y Google+, de ese modo cualquier usuario puede acceder a nuestras páginas en dichas redes sociales, seguirnos o recomendarnos.



Pensado en eso y en alternativas efectivas para que puedas poner en tu blog, y así facilitarle a tus usuarios que sigan y/o recomienden tu contenido, vamos a integrar todos esos botones en una cajita contenedora para que todas las opciones estén siempre accesibles.



Esta cajita contendrá:

1. El botón de seguir de "Twitter para que te puedan seguirte desde ahí, sin tener que ingresar a tu página de Twitter".

2. El botón de Facebook, para que los usuarios recomienden tu blog.

3. La insignia standar de Google+, para que puedan agregarte a un círculo y hacer +1 a tu blog.

4. Agregaremos también la vía para que se suscriban al blog, pensando en que usas FeedBurner. También un icono para que puedan suscribirse usando algún agregador, de los muchos disponibles.



Tal y como la puedes ver a continuación:






Widget con botones redes sociales




Cómo agregar la cajita




Notas: Para la cajita tenga la apariencia que puedes ver, he hecho ajustes claves. En el caso de la insignia de Google+ por ejemplo, el ancho de ésta es mayor al ancho de la cajita contenedora, ésto para que no se vea una caja dentro de otra caja (la de la insignia dentro del contenedor).



El ancho de la cajita contenedora, es de 275 pixeles, por lo tanto, tu columna lateral deberá tener un ancho mayor a éste. Se puede reducir la cajita y hacer los ajustes para que todo se vea bien proporcionado, pero ésto lo recomiendo a usuarios que ya sepan algo de CSS y además hay que considerar que casi todos los botones e insignia, requieren un ancho mínimo para que se muestren con sus características.



Bien, pues dicho lo anterior, ahora veamos cómo agregaras la cajita, y como ya todo está integrado, tú sólo tendrás que agregar los códigos a tu blog, y editarlos con tus datos.




  1. Primero, agregas el CSS de la cajita, yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. De ese modo, podrás hacer cambios y ver el resultado desde ahí. No olvides aplicar los cambios en Aplicar al blog.



    CSS


    /* Caja Redes */

    ul#caja-redes{

    width:275px

    padding:0;

    margin:0;

    list-style:none;

    background:#f7f7f7;

    border:1px solid #dcdcdc;

    overflow:hidden;

    }

    ul#caja-redes strong, li.c-rss{

    color:#848484;

    font-size:12px;

    }

    ul#caja-redes li{

    overflow:hidden;

    }

    li.cg-plus{

    height:108px;  

    padding-bottom:6px;     

    border-right:1px solid #dcdcdc;

    border-bottom:1px solid #dcdcdc;

    margin:0 -1px 0 -5px;

    }

    li.c-fb{

    border-bottom:1px solid #dcdcdc;

    padding:8px 3px 2px;

    margin:5px;

    }

    li.c-tw, li.c-mail{

    margin:5px;

    padding:6px 3px 0;

    }

    li.c-rss{

    float:left;

    margin:5px;

    padding:0 4px 4px;

    }

    a.c-rss {

    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2c14hk33exbYBIkrR8WTVo1xAD22YjRp7y7q3L-_9Mvd3Ue_yYuKifRDpqTdErns3eOJ-eaquKFJEKSSGyFz7InTzUsQWJ_hbjPXE39Wf7pjoL_TX0bFqkWrLK6-yIoK5xm7qYfLyO0/s1600/rss1.png) no-repeat 25% 40%;

    display:inline;

    padding:0 0 1px 26px;

    color:#848484;

    }

    input[type="text"].campo, input[type="submit"].enviar {

    border:1px solid #dcdcdc;float:left;color:#848484;display:block; height:20px;font-size:11px;}

    input[type="text"].campo{text-indent:3px;width:145px; margin-right:-3px;}

    input[type="submit"].enviar {height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;

    background:-webkit-linear-gradient(top,white,#d8d8d8); 

    background:-moz-linear-gradient(top,white,#d8d8d8); 

    background:-ms-linear-gradient(top,white,#d8d8d8); 

    background:-o-linear-gradient(top,white,#d8d8d8);}


  2. Luego, Vas a "Diseño" y seleccionas un gadget en la sección de la columna lateral, con la opción de HTML/Javascript, y pones el siguiente código que tendrás que editar con tus datos. Una vez editados, guarda los cambios.


  3. <ul id="caja-redes"><li class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fwww.compartidisimo.com&amp;send=false&amp;layout=standard&amp;width=260&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </li> <li class="c-tw"><a href="https://twitter.com/compartidisimo" class="twitter-follow-button" data-dnt="true"  data-lang="es" data-dnt="true">Seguir a @compartidisimo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </li> <li class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div> <!-- Inserta esta etiqueta después de la última etiqueta de insignia. --> <script type="text/javascript">   window.___gcfg = {lang: 'es'};   (function() {     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;     po.src = 'https://apis.google.com/js/plusone.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })(); </script> </li> <li class="c-mail"> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><strong>Compartidísimo directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscríbete'/></form> </li> <li class="c-rss">O suscríbete por otras vías:<a class="c-rss"  href="//feeds.feedburner.com/compartidisimo" title="Vía RSS" target="_blank">RSS</a></li> </ul>


      Edita los datos, de arriba hacia abajo tomando en cuenta que en:

      • www.compartidisimo.com pones la URL de tu blog, omitiendo el http:// pondrías por ejemplo miblog.blogspot.com, pensado que usas subdominio. 

      • compartidisimo ahí pones el nombre de usuario de Twittter.

      • Seguir a @compartidisimo  es el texto del botón de twitter.

      • 109627432877953314897 ahí pones el ID de tu página de Google+, o el del perfil. Para conseguir ese número tienes que ir a la página en Google+, y copiar la numeración que aparece en la barra de direcciones de tu navegador.

      • compartidisimo ahí pones la URI de FeedBurner. Puedes obtenerla accediendo a la página de FeedBurner,y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana con tus feeds. El nombre de la URI es el texto que aparece después de la barrita diagonal "/" en la barra de direcciones. 

      • Compartidísimo directamente a tu e-mail ese es el texto que aparece antes del campo para que ingresen el e-mail para la suscripción del blog.

      • compartidisimo otra vez pones la URI de FeedBurner.

      • O suscríbete por otras vías: este es el texto que esta antes del icono de RSS.

      • compartidisimo ahí va de nuevo la URI de FeedBurner.






    ¡Y listo!, ya habrás agregado una cajita con todos los elementos para que sigan y recomienden tu blog ;)






    Notas finales:


    • El código que esta de morado es de los scripts de Twitter y Google+ respectivamente (de arriba hacia abajo) Si ya usas algunos de esos elementos, no vuelvas a agregar el script, y asegúrate que esté colocado hacia abajo después del último botón.

    • En el caso de la sección de facebook, no vayas a disminuir el alto en el código (si usas el mismo ancho) , ya que hasta ahora, se muestran distintas leyendas si has o no ingresado a tu cuenta de Facebook.



    Seccion de Facebook



    Ah!, a propósito de facebook, hace mucho que quité el botón para que hagas me gusta al blog, agradezco a quienes compartieron el enlace sin que yo tuviese el botón.  Todos los me gusta se perdieron al hacer el cambio de dominio, así que si te gusta el blog, no olvides compartirlo en Facebook haciendo "Me gusta" ;)



    ¿Quieres ver la cajita en acción?, entonces echa un vistazo a la demostración.






    Importante: Si vas agregar la insignia usando el perfil, y no una página de Google+, necesitarás cambiar el alto del espacio reservado para la insignia, (ya que ahí no se muestran los avatares, y por lo tanto, ésta es menos alta). Lo haces en esta parte del CSS (del paso 1)


    li.cg-plus{

    height:108px


    ...

    Cambia 108px,  por 52px. Ten cuidado de no borrar el punto y coma al final.



    Enlaces de las páginas de las distintas redes sociales, con los botones oficiales

    Botón de Seguir de Twitter

    Botón de Me gusta de Facebook

    Insignia de Google+





    jueves, 22 de marzo de 2012

    3 Estilos diferentes para el widget de últimos comentarios con avatar + cómo crear bordes hundidos y con relieve con CSS

    Seguramente recordarás y posiblemente tengas el widget de últimos comentarios con avatar del comentarista en tu blog. Es ampliamente personalizable, como ya lo había mencionado, por la estructura que tiene (como fué creado) y porque el código CSS viene de forma separada.



    Pues me di un tiempo para crear algunos estilos diferentes para que puedas usar. Además ya antes me habían comentado que querían crear bordes que simulen estar hundidos y otros con relieve usando CSS, así que voy a aprovechar para tratar de explicar esto.



    Usando algunas propiedades como bordes, outline, margen, padding, y una buena combinación de colores, podemos crear efectos interesantes sin usar imágenes, creando un look moderno y/o elegante. Con algunas limitaciones en versiones viejas de Internet explorer en algunos casos, pero, sin que se estropee tanto el resultado.



    Cómo aplicar el estilo.

    Bueno, echa un vistazo a los tres estilo, y lo único que tendrás que hacer es sustituir el CSS (que está dentro de la etiqueta <style>), en el código de este widget. La resaltaré de azul (principio y final),  para que puedas identificarla fácilmente. Claro que si quieres cambiar los colores deberás entender cómo crear los efectos, pero, eso yo te lo voy a decir ;)



    Veamos de qué se trata...



    1. Estilo "Elegante". Un estilo elegante, que simula bordes hundidos debajo de cada comentario.




    Widget de Comentarios





    CSS


    <style type="text/css">

    ul.w2b_recent_comments{width:100%;margin:2px 0 15px 0;padding:0; background:#f2f2f2;border:5px solid #fefefe; outline:thin solid #efefef}.w2b_recent_comments li{background:none !important;padding: 0 !important;margin: 4px 4px 4px; display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #fff}.w2b_recent_comments li:last-child{border-bottom:none}.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 7px 0;position:relative;overflow:hidden} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block}.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 4px 6px 4px;line-height: 1.2;border-bottom:1px solid #dfdddd}.w2b_recent_comments li:last-child span{border-bottom:none} .w2b_recent_comments li a{color:#676f6f; font-weight:bold;text-shadow:0px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;color:#2e9798}</style>

    Nota: para eliminar los bordes al fondo del "último comentario", utilizo un selector llamado :last-child, que no soporta IE8 y versiones anteriores, sólo la versión 9, por lo que ese borde será visible en versiones viejas de IE.



    El truco: Para crear este efecto en el borde, usamos un borde de 1px en cada elemento de lista (.w2b_recent_comments li), y otro debajo de cada elemento de lista que contiene la etiqueta span, que es donde está el texto del comentario (.w2b_recent_comments li span) y hacemos los ajustes con el margen y el padding para que se junten y queden uno arriba de otro y además se separe de los extremos derecho e izquierdo. Es muy importante que tomes en cuenta los colores que vas a usar, y el borde que queda arriba, debe de ser más obscuro que el de abajo. El segundo borde que queda debajo, debe de ser más claro que el fondo, para los tonos grises el blanco queda muy bien. Los "tonos" de los tres colores deben de ser, de preferencia del mismo orden de colores monocromáticos. Por ejemplo si usamos grises, usas un gris obscuro, otro más claro y otro más claro, hasta llegar al blanco. Si inviertes el orden de los colores en el borde, entonces obtendrás el efecto contrario, es decir, con relieve o levantado.



    Lo que puedes editar lo resalté de rojo, y esta es la explicación:



    En: .w2b_recent_comments li, puedes cambiar el color de fondo en: background:#f2f2f2.





    El borde claro y grueso alrededor del widget lo cambias en: border:5px solid #fefefe, y el último borde (gris) que lo envuelve en: outline:thin solid #efefef. 





    Para cambiar el color de los bordes que están debajo de cada comentario, buscas: .w2b_recent_comments li, ahí, en: border-bottom:1px solid #fff cambias el color del borde de arriba. Ese es el primer borde. El segundo borde y que está debajo del anterior, está en: .w2b_recent_comments li span y lo editas en: border-bottom:1px solid #dfdddd.





    2. Estilo "Recto y elegante". Otro estilo elegante, que separa los comentarios en cajitas, con bordes dobles que logramos con la ayuda de las propiedades border y outline, para lograr ese efecto. La propiedad outline, es soportada por IE8 y versiones siguientes, y la propiedad border por todas las versiones de ese navegador; con el resto de navegadores no tenemos problemas, el latoso, generalmente es Internet Explorer.




    Estilo widget comentarios



    CSS


    <style type="text/css">

        ul.w2b_recent_comments{list-style:none;margin:0 0 15px 0;padding:0;background:#f3f3f3;border:1px solid #fff;outline:thin solid #ececec; width:100%}

        .w2b_recent_comments li{background:#f7f7f7 !important;padding:3px !important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px;border:1px solid #fff; outline:

    thin solid #e7e7e7}.w2b_recent_comments li .avatarImage{padding:2px;background:#fff;border:1px solid #e7e7e7;float:left;margin:0 4px 7px 3px;position:relative;overflow:hidden}

    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block}.w2b_recent_comments li span{text-shadow:1px 1px 1px #fff;margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 0 6px 0;line-height: 1.2} 

    .w2b_recent_comments li a{color:#1f9495;text-shadow:1px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;}

    </style>

    El truco: en este caso, usamos borde alrededor de cada elemento de lista de los comentarios (.w2b_recent_comments li), este debe de ser más claro que los fondos usados, y como usamos tonos grises, el blanco queda perfecto: border:1px solid #fff; también tiene fondo gris: background:#f7f7f7 que es más claro que el del contenedor.



    Luego usamos la propiedad outline, que agrega también borde en el exterior del widget, y está declarado así: outline:thin solid #e7e7e7.



    Hacemos lo mismo con el contenedor de los elementos de lista de los comentarios (ul.w2b_recent_comments), ponemos un fondo color gris más obscuro que el de cada elemento de lista, (citado anteriormente), background:#f3f3f3 y agregamos borde blanco:border:1px solid #fff y un segundo borde alrededor de éste, usando la propiedad outline: outline:

    thin solid #e7e7e7.



    Los efectos que se logran en este ejemplo es mixto, es decir, algunos bordes lucen hundidos y otros con relieve, pero siguiendo un patrón, y esto depende de cómo quedó colocado el borde blanco y obscuro respectivamente arriba, a la izquierda, a la derecha y abajo.



    A ver, a ver, entonces, ¿cómo se forman los bordes dobles?



    Es simple, sólo juntamos dos bordes y dependerá de la estructura del elemento donde queremos aplicarlo, si usamos sólo bordes (la propiedad borde), o también necesitemos usar el borde con la propiedad outline.



    Este es una imagen que muestra los dos distintos tipos de borde que podemos formar, cuando están en posición horizontal:




    Ejemplo de borde hundido y con relieve







    3. Estilo "Corrugado". En este caso usamos borde discontinuo (dashed) para crear esa apariencia como de ondas, o como un ticket recortado.




    Widget de comentarios





    CSS


    <style type="text/css">    ul.w2b_recent_comments{list-style:none;margin:0 0 15px 0;padding:0; background:none;width:100%}    .w2b_recent_comments li{background:#c4dcdc !important;padding:3px 4px 3px 0!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px 0; border:1px dashed #fafafa    .w2b_recent_comments li .avatarImage{padding:2px;border:1px solid #e7e7e7;background:#fff;float:left;margin:0 4px 7px 3px;position:relative;overflow:hidden}.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}            .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block}    .w2b_recent_comments li span{text-shadow:1px 1px 1px #fff;margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 0 6px 0;line-height: 1.2} .w2b_recent_comments li a{color:#064f4c;text-shadow:1px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;}</style>





    El truco. Es muy fácil crear este efecto con el borde, simplemente, usamos un color de borde, en cada elemento de lista (.w2b_recent_comments li) del mismo color que usa el fondo donde está puesto el widget. Si por ejemplo el fondo del blog, "donde lo colocas", es blanco, pues usamos blanco.



    Entonces,  para cambiar el fondo de cada comentario, buscas:.w2b_recent_comments li en background:#c4dcdc editas el valor (#c4ddcd). Recuerda conservar la almohadilla.





    En border:1px dashed #fafafa editas el color de borde que deberá ser del mismo color de fondo donde lo pongas.





    ¿fácil, verdad? Para que puedas ahondar en el uso de algunas propiedades que usé, te dejo algunas referencias para que puedas consultar:



    Propiedad outline

    Propiedad borde

    Selector :last-child


    jueves, 1 de marzo de 2012

    3 Nuevas opciones de botones de redes sociales para que sigan tu blog (widgets)


    iconos sociales



    Así como ocurre en las telenovelas, este post es la continuación del anterior, donde compartía contigo cuatro opciones de iconos sociales, listos para que los pongas en tu blog. En esta ocasión he preparado otras tres opciones, para que tengas más posibilidades de que alguna se adapte al diseño de tu blog, y al igual que la vez anterior, también usan solo una imagen.



    Y por si fuera poco, para que sea todavía más fácil, en este caso, vas a poner todo el código (CSS+HTML), en un gadget, eligiendo la opción HTML/Javascript, solo vas a llevarte el código completo de los botones que más te gusten, y vas a editar lo que resalté con rojo, al final del código.



    Cómo poner los botones, paso a paso



    Paso 1. Ve a Diseño, o elementos de la página de la vieja interfaz, y pon el código completo de los botones que te gustaron, en un gadget HTML/Javascript.



    Paso 2. Luego, edita la última parte del código, que es la del HTML y resalté de azul,  escribiendo la dirección web de la red social, donde está la almohadilla (#). Es fácil saber a que red corresponde cada almohadilla, ya que antes verás la clase (class), que lleva el nombre de la red.



    Por ejemplo, esta es la linea de código en el HTML, del botón de Twitter:



    <li><a class="twitter" href="#"><span>Twitter</span></a></li>



    Ahí donde esta la almohadilla o signo de número  (#), pones la dirección web de tu cuenta de Twitter. El gatito se debe de quitar, solo debe de llevar la dirección web, cuidado con no borrar las comillas antes y después.También puedes editar el texto del tooltip y que en este caso, dice: Twitter.



    Paso 3. Ya que editaste el código para todos los botones, guarda los cambios y listo ;)









    (ver opciones 5,6, y 7)

    Opción 5




    botones sociales











     Código (CSS + HTML) 




    <style type="text/css">

    ul#m-soc5{  margin:19px 0 0 10px; padding:0; width:220px; height:60px}

    ul#m-soc5 li{list-style:none; margin:4px; padding:0; float:left; border:none}

    ul#m-soc5 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwwvycdEEXKudRbqzXKo5p6eXOoCXgUDPus6kzWlPNFpSOtLpqTBHeGlOdTrBdzuaECfNP0bpZTzcQw1NwWXhyN7dnFHb6slEMo3R3unfyMoXhBj8Bj3TPLVtjZMrFG1-q0CUtOx8atBZ/s400/sprite5-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:33px; height:33px; overflow:visible}

    ul#m-soc5 li a.twitter{background-position:0 0}

    ul#m-soc5 li a.facebook{background-position:-33px 0}

    ul#m-soc5 li a.google{background-position:-66px 0}

    ul#m-soc5 li a.youtube{background-position:-99px 0}

    ul#m-soc5 li a.rss{background-position:-132px 0}

    ul#m-soc5 li a span{background:#555; position:absolute; top:-5px; left:-10px;width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none;border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}

    ul#m-soc5 li a:hover{text-decoration:none}ul#m-soc5 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-28px}

    </style>





    <ul id="m-soc5">

    <li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span>Youtube</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li>

    </ul>





    Opción 6 




    iconos













     Código (CSS + HTML) 


    <style type="text/css">

    ul#m-soc6{  margin:19px 0 0 10px; padding:0; width:190px; height:55px}

    ul#m-soc6 li{list-style:none; margin:4px; padding:0; float:left; border:none}

    ul#m-soc6 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYaVfgETCZkeiNj4yFL6qva9CABT67Ib3170w7pnQOj_F1AuQFl8lECLWMhXG4wkgr8qpvHZEfOHmy0jdQfSpx9MQjpq_JwUUQ17L8RdVtKDOhj0TGjTET5vCaagmidNOEl5sU5lkO0Xu8/s400/sprite6-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:32px; height:32px; overflow:visible}

    ul#m-soc6 li a.twitter{background-position:0 0}

    ul#m-soc6 li a.facebook{background-position:-32px 0}

    ul#m-soc6 li a.google{background-position:-64px 0}

    ul#m-soc6 li a.rss{background-position:-96px 0}

    ul#m-soc6 li a.twitter:hover{background-position: 0 -32px;}

    ul#m-soc6 li a.facebook:hover{background-position: -32px -32px;}

    ul#m-soc6 li a.google:hover{background-position:-64px -32px;}

    ul#m-soc6 li a.rss:hover{background-position:-96px -32px;}

    ul#m-soc6 li a span{background:#555; position:absolute; top:-5px; left:-10px; width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}

    ul#m-soc6 li a:hover{text-decoration:none}ul#m-soc6 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-27px}

    </style>






    <ul id="m-soc6"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li></ul>





    Opción 7




    Iconos















     Código (CSS + HTML) 


    <style type="text/css">

    ul#m-soc7{margin:18px 0 0 10px; padding:0; width:280px; height:66px}

    ul#m-soc7 li{list-style:none; margin:4px; padding:0; float:left; border:none}

    ul#m-soc7 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnv9dtzoamzuOd47XmQGS0rLjarogxDNCbyah_NwjesUQlwia4USbOWAcjXR6TF11Fnojs7-MgLOVj49mXmHf1N5pTfpQWF10TVZfGm901E2UR6v7LDE67PDWYM6cGGMjxPXIRWk3gOik/s400/sprite7-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:48px; height:48px; overflow:visible}

    ul#m-soc7 li a.twitter{background-position:0 0}

    ul#m-soc7 li a.facebook{background-position:-48px 0}

    ul#m-soc7 li a.google{background-position:-96px 0}

    ul#m-soc7 li a.youtube{background-position:-144px 0}

    ul#m-soc7 li a.rss{background-position:-192px 0}

    ul#m-soc7 li a.twitter:hover{background-position:0 -48px}

    ul#m-soc7 li a.facebook:hover{background-position:-48px -48px}

    ul#m-soc7 li a.google:hover{background-position:-96px -48px}

    ul#m-soc7 li a.youtube:hover{background-position:-144px -48px}

    ul#m-soc7 li a.rss:hover{background-position:-192px -48px}

    ul#m-soc7 li a span{background:#555; position:absolute; top:-10px; width:auto; left:0;opacity:0; padding:3px; text-align:left;text-decoration:none; color:#fff; filter:alpha(opacity=0); white-space:nowrap; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}ul#m-soc7 li a:hover{text-decoration:none}

    ul#m-soc7 li a:hover span{opacity:.8; filter:alpha(opacity=80); top:-24px}

    </style>

    <ul id="m-soc7"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span style="border:0;">YouTube</span></a></li><li><a class="rss" href="#"><span style="border:0;">Suscripción</span></a></li></ul>



    Nota: Puse la URL de la imagen, de cualquier modo, te recomiendo que la alojes por tu propia cuenta en Blogger, para luego sustituirla, así evitas cualquier problema.



    Actualización, 20/marzo/2012: Agregué una linea de código en el CSS, para que no se subraye el texto del tooltip; ésto ocurre solo en las plantillas que tienen una regla que hace que se subrayen todos los textos de los enlaces en la plantilla, al poner el puntero del ratón sobre un enlace.



    Créditos por los botones:

    awicons

    Ca-creation

    sábado, 21 de enero de 2012

    Widget de Últimos Comentarios con Avatar del Comentarista


    ultimos comentarios con avatar

    Este es un widget muy mono y de muy reciente creación, que encontré por casualidad en la página de Way2Blogging, que muestra los últimos comentarios y el avatar del comentarista, lo que lo hace ver más atractivo.



    Lo más interesante es que es muy personalizable. El avatar puede lucir circular o no, gracias a una propiedad de CSS3, que ya funciona en Internet Explorer 9. Luce muy limpio, y puedes configurar las opciones desde su página, del mismo modo que lo puedes hacer si editas el CSS del código, una vez que lo hayas agregado.



    Desde ayer lo estoy probando en el blog, y sí, ¡me gusta!; si lo quieres probar en tu blog, no lo pienses mas y llévatelo ;)



    ¡Espero que tengas buen fin de semana!

    lunes, 12 de septiembre de 2011

    Como poner una cajita flotante con botones de: Me gusta de Facebook, twitter y Google +1


    boton de facebook twitter y google flotantes

    Antes habíamos visto la forma de agregar botones para compartir las entradas usando una sola imagen. Hoy vamos a ver otra forma de facilitarle a tus usuarios compartir las entradas o artículos de tu blog, usando botones de: Me gusta de Facebook, Twitter y Google +1, dentro de una cajita flotante



    Yo no sé quien fue el primero al que se le ocurrió ésto, (meterlos en una caja flotante) pero es muy popular, y páginas como Mashable, Naldz Graphics, por mencionar algunas,  lo usan.



    ¿Qué vamos a hacer?



    Para conseguir que los botones se mantengan fijos o floten, y tengan la apariencia que queramos, lo que hacemos, es declarar algunas reglas de estilo en el CSS para la cajita que los contiene, y posicionamos los botones dentro de la cajita por medio del margen, con la clase que creamos para poder mover los botones.



    Por tu parte, puedes personalizar el color de la cajita contenedora a tu gusto, el borde, y el mensaje arriba de los botones;).



    ¿Cómo poner la cajita con los botones?



    Paso 1. Ve al Diseñador de plantillas  Avanzado  Añadir CSS y en el campo a la derecha, pega este código:


    #caja-botones{

    width: 90px; /*el ancho de la caja*/

    height: 240px; /*el alto de la caja*/

    position: fixed; /*para que la caja se mantenga fija*/

    top: 200px; /*movemos la caja de arriba*/

    left: auto;

    margin: 80px 0 0 -120px; /*los margenes que puedes editar*/

    background-color: #ffffff; /* el color de fondo de la barra*/

    border: 1px solid #cccccc; /*el color del borde*/

    }

    #caja-botones p {

    margin: 4px 0;

    padding: 0;

    text-align: center;

    font-size: 12px;

    color: #0d72fb; /*el color del texto*/

    font-weight: normal;

    letter-spacing: 0em; 

    }

    .b-entradas {

    margin: 6px 0 7px 9px;

    padding: 0;

    }

    .b-google {

    margin: -2px 0 0 16px;

    padding: 0;

    }




    Importante: 


    Con el margen negativo, arriba marcado con rojo (-120px) hacemos que la caja siempre se mantenga en la misma posición, sin importar la resolución de pantalla del usuario, ya que de no ser así, en resoluciones de pantalla pequeñas, la caja se va a ir encima del contenido, o en resoluciones muy grandes, se va a ir hasta el extremo. Esto no sería necesario si por ejemplo usáramos un diseño fluido y declaráramos en porcentajes los márgenes o superpusiéramos el contenido sobre la caja, pero ese es otro rollo.

    Esto quiere decir que resoluciones de 1024 pixeles o menos, no verán la caja con los botones, a menos que se use un ancho del blog completo menor de 800 pixeles.




    Paso 2: Ve a la edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y con la ayuda de Ctrl F busca: <data:post.body/> (el primero de arriba hacia abajo) e inmediatamente después pega esto:


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

    <div id='caja-botones'><p>&#161;Compártelo!</p>

    <div class='b-entradas'>

    <a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

        </div>

    <div class='b-entradas'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=80&amp;height=65&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:65px'/>

        </div>

    <div class='b-google'>

    <g:plusone size='tall'/>

    </div>

      </div>

        </b:if>

    Puedes cambiar: &#161;Compártelo! por otro mensaje corto que quieras que aparezca arriba de los botones.



     &#161; es el código del signo de admiración inicial: ¡.



    El texto del 
    botón de Facebook siempre se mostrará en Español: "Me gusta".



    Paso 3: Con la ayuda de Ctrl F, busca: </body> y justo antes, pega el script del botón +1 de google:




    <!-- Place this render call where appropriate -->

    <script type="text/javascript">

      window.___gcfg = {lang: 'es'};



      (function() {

        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

        po.src = 'https://apis.google.com/js/plusone.js';

        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

      })();

    </script>

    Nota: Si ya tienes el script pegado ahí, porque usas los botones para compartir tu blog, incluyendo el de +1, entonces no lo pongas.



    Paso 4: Internet Explorer 6 tiene problemas con la posición
    fixed, cuando esta no se usa en el body (background o fondo de la plantilla), pensando en eso,  tenemos tres opciones: (1)ignorarlo, (2)hacerlo funcionar, o (3) evitar que se vea, eligiendo la última opción, tendrías que agregar esto después de ]]></b:skin> 


    <!--[if IE 6]>

    <style type="text/css"
    >


    #caja-botones{

    display: none;

    }

    </style>

    <![endif]-->

    Con el código anterior, estamos condicionando, para que no se muestre la caja en IE6 (Internet explorer 6).



    *Otra opción es usar un hack, en el que se puede declarar cualquier propiedad para IE6 y solo lo al CSS del Paso 1:




    * html #caja-botones {

        display: none;

    }



    Paso 5: checa en vista previa y si todo luce bien, guarda los cambios. La caja con los botones aparecerán al estar dentro de cada post o artículo.



    Notas:


    • Puedes agregar otros botones, solo tienes que aumentar el tamaño del alto de la caja (height) 


    • Siempre es bueno ir a obtener los códigos de los botones en las respectivas páginas, para no perderse de actualizaciones, etc.


    • Esta caja flotante, no debería ser la única opción para compartir entradas,  ya que en resoluciones pequeñas no se verá, por ello, es aconsejable, usar la caja + los botones ya sean los de Blogger para compartir entradas u otros personalizados dentro del mismo post.


    ginas oficiales de los botones:

    Facebook

    Twitter

    Google







    Referencias:







    También puedes ver como hacer funcionar la posicion fija en IE6:


    fixed positioning in IE6





    Puedes echarle un vistazo a la caja en distintas resoluciones de pantalla en test size.



    [*Actualizado: Oct/07/2011]

    viernes, 26 de agosto de 2011

    Botones para Compartir las Entradas + Sprite Gratis + Botón Google +1

    El otro día me hacían un comentario en donde me decían que si el hecho de tener un botón, haría que tuviéramos más visitas, y lo que pienso es que "dependerá" del contenido que se comparta (el tema), de donde fue compartido (la red social) y quien lo vio, obviamente si alguien lo ve en una red social y le intereza, irá a echar un vistazo al artículo, para ver de que se trata el asunto, por otro lado, si no tenemos una vía para que el contenido sea compartido, entonces, menos probabilidades tendremos de que se comparta y que otras personas lo vean, pueda interesarles, y vengan a verlo, ¿no lo crees?



    Blogger ya facilita unos botones para compartir el contenido de tu blog, y para que aparezcan en cada entrada, tienes que ir a  los elementos de la página o Diseño (en la nueva interfaz, ahora disponible en Blogger in Draft) , luego, haces click en "editar" en la sección de "Entradas del blog", y marcas la casilla correspondiente.



    Si esos botones no se ajustan a tu diseño, o quieres poner botones personalizados  lo puedes hacer libremente, y hoy te tengo una imagen que contiene todos los iconos que puedes ver a continuación  y que puedes usar, si así lo quieres:




    sprite iconos sociales


    Imagen con fondo blanco 



    Para hacer funcionar los botones, vamos a usar una técnica llamada sprites, de ese modo, estamos usando sólo una imagen para todos los botones, en lugar de las 16 imágenes que necesitaríamos para lograr poner los 8 botones + los del evento hover, (al poner el puntero del ratón encima del botón) y ésto se traduce en menos tiempo de carga para tu blog.



    La imagen incluye:


    • Botón de Twitter

    • Botón de Facebook

    • Botón de Google Buzz (leer actualización abajo)

    • Boton de Orkut

    • Boton de Stumbleupon

    • Botón de Delicious

    • Botón de Bitácoras

    • Botón para compartir entradas por email.


    Si estás convencido y quieres probarlos,  entonces, veamos como ponerlos...




    Cómo poner los botones paso a paso:


    Paso 1: Estando en tu escritorio, ve a Plantilla ► Personalizar ►Avanzado► Añadir CSS, y ahí en el campo grande, a tu derecha, pega el siguiente código:


    /* Botones para compartir entradas*/

    ul#m-soc{    

    margin: 10px 0 0 10px;

    padding: 0;

    width:
    400px;

    height: 84px;

    background: none;

    }

    ul#m-soc h4 {

    padding: 5px;

    margin: 0;

    }

    ul#m-soc li {

    list-style: none;

    margin: 0;

    padding: 0;

    float: left;

    border: none !important;    

    }

    ul#m-soc li a {

    background: url(
    URL_DE_LA_IMAGEN) no-repeat 0 0;

    margin: 0;

    padding: 0;

    display: block;

    width: 50px;

    height: 42px;

    overflow: hidden;

    text-indent: -9999px;                  

    }

    ul#m-soc li a.twitter{

    background-position: 0 0;

    }

    ul#m-soc li a.facebook{

    background-position: -50px 0;

    }

    ul#m-soc li a.g-buzz {

    background-position: -100px 0;

    }

    ul#m-soc li a.orkut {

    background-position: -150px 0;

    }

    ul#m-soc li a.stumb {

    background-position: -200px 0;

    }

    ul#m-soc li a.deli {

    background-position: -250px 0;

    }

    ul#m-soc li a.bitacoras {

    background-position: -300px 0;

    }

    ul#m-soc li a.correo {

    background-position: -350px 0;

    }

    ul#m-soc li a.twitter:hover{

    background-position: 0 -42px;

    }

    ul#m-soc li a.facebook:hover{

    background-position: -50px -42px;

    }

    ul#m-soc li a.orkut:hover {

    background-position: -150px -42px;

    }

    ul#m-soc li a.stumb:hover {

    background-position: -200px -42px;

    }

    ul#m-soc li a.deli:hover {

    background-position: -250px -42px;

    }

    ul#m-soc li a.bitacoras:hover {

    background-position: -300px -42px;

    }

    ul#m-soc li a.correo:hover {

    background-position: -350px -42px;

    }

    Importante: Necesitas poner la URL de la imagen con los iconos

    Con el código anterior, estamos declarando la imagen que vamos a usar, estamos creando una clase para cada botón para definir la posición de cada uno, su tamaño, etc.






    Para guardar lo que has agregado, haces click en APLICAR AL BLOG.






    Paso 2: Vas a la edición de HTML de la plantilla y luego, marcamos la casilla de: expandir plantillas de artilugios, y con la ayuda de ctrl F, buscamos:


    <data:post.body/>

    O bien, cualquier linea del post-footer, en donde solo afectaremos la posición de los botones dentro de la entrada:


    <div class='post-footer-line post-footer-line-1'>

    Inmediatamente después pegas esto:



    <b:if cond='data:blog.pageType == &quot;item&quot;'><ul id='m-soc'><h4>¡Si te gusto, compártelo!</h4><li><a class='twitter' expr:href='&quot;https://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' target='_blank' title='Twittear'>    Twitter</a></li><li><a class='facebook' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Compartir en Facebook'>Facebook</a></li><li><a class='orkut' expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;du=&quot; + data:post.url + &quot;&amp;tt=&quot; + data:post.title' target='_blank' title='Compartir en Orkut'>Orkut</a></li><li><a class='stumb' expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Compartir en Stumbleupon'>Stumbleupon</a></li><li><a class='deli' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Compartir en Delicious'>Delicious</a></li><li>         <a class='bitacoras' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' target='_blank' title='Compartir en bitácoras'>Bitacoras</a>          </li> <li><!-- email post links --><b:if cond='data:post.emailPostUrl'>          <span class='item-action'><a class='correo' expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>                        </a></span></b:if></li></ul></b:if>


    Todo lo que está marcado de rojo, lo puedes personalizar; donde dice: ¡Si te gusto compártelo! ,es el texto que aparecerá antes de los botones, y todo lo demás son los textos del tooltip (el texto que aparece al poner el puntero sobre el botón) para cada botón.



    Paso 3: Checa en vista previa y si todo luce bien guarda los cambios. Los botones no los verás hasta que entres a cada entrada.



    Importante:  el código marcado de azul, sirve para que se puedan compartir las entradas por correo electrónico, a través del formulario que ofrece Blogger, y ésto sólo funcionará si lo habilitamos, y para hacerlo, tenemos que ir a la pestaña "Diseno", y hacer click en "Editar" de la sección de las entradas, y luego activar la casilla que dice: Mostrar enlaces de envío de entradas, como puede apreciarse en la siguiente imagen:






    Envío de entradas de Blogger



    Si no lo haces, simplemente el botón de sobre en el sprite no se verá.



    Ese código viene en la plantilla, para que no se repita esta función y salga el icono de Blogger para envío de entradas, que es este: icono de envio de entradas necesitas buscarlo y eliminarlo, y ese código lo encuentras al expandir plantillas de  artilugios, en la edición de HTML de la plantilla:



    <!-- email post links -->

            <b:if cond='data:post.emailPostUrl'>

              <span class='item-action'>

              <a class='correo' expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

                            </a>

              </span>

            </b:if>



    Para que se entienda, lo estamos "moviendo de lugar" y agregando la clase para que se vea la imagen de sobre de la imagen con los iconos, por eso lo eliminamos. Algunas plantillas editadas o nuevas no lo trae.





    Cómo Agregar el botón de Google +1





    Si quieres agregar el botón de Google +1, y ya tienes el script de éste añadido, entonces, sólo necesitas agregar antes de </ul>  esto :


    <li><div class='google1'><g:plusone size='medium'/></div></li>

    ...también modificar el ancho de: ul#m-socde 400px   a: 450px; y agregar esta linea al código del paso 1:


    .google1{

    margin: 12px 0 0 0;

    }

    Así de fácil y rápido.





    Imágenes con otros fondos





    Fondo transparente:


    alt





    Fondo Negro:




    sprite iconos sociales



    Puedes ver el demo en este blog, y en mi blog funcionando, ahora sin el botón de Bitacoras. Esto funciona en todos los navegadores incluyendo IE6.



    ACTUALIZACIÓN:  Octubre/20/2011. He eliminado las lineas de código que corresponden al botón de Google Buzz, ya que ese servicio de Google será retirado próximamente. También cambiado la opción para acceder  a la configuración de envío de entradas considerando que ya tenemos nueva interfaz.



    Crédito por lo botones:

    Iconos