Estás en: Inicio » Todas las entradas

Botones para compartir deslizantes (Facebook, Twitter, Google+, Taringa, Bitácoras)

El efecto deslizante lo haremos con jQuery, y la burbuja con el texto (el botón) lo haremos con CSS3.

Empecemos: primero ingresa en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y antes de </head> pega el script:

Ahora antes de ]]></b:skin> agrega los estilos:

/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px; /* Ancho de la burbuja */
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000; /* Color del texto */
background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
/* Color de fondo gradiente de la burbuja */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}

Por último, busca esta línea:

Justo arriba de ella coloca el contenedor con los botones:

<b:if cond='data:blog.pageType == "item"'>
<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>

<center>
<div class='btns-compartir' id='btns-compartir'>
<table border='0' cellpadding='7'>
<tr>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></td>

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

<td><script type='text/javascript'>(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></td>

<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></td>

<td><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url'><img alt='votar' expr:src='"http://widgets.bitacoras.com/votar/normal/" + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:10px;' title='Votar este artículo en Bitacoras.com'/></a></td>

</tr>
</table>
</div>
</center>
</b:if>

Guarda los cambios y listo. En las anotaciones en color verde he puesto como siempre las áreas que se pueden personalizar como el color de fondo, de texto, etc. En donde dice cellpadding='7' puedes controlar la distancia entre cada botón.

Recuerda que:

Sólo será visible en las entradas individuales, NO en la portada.
La burbuja está hecha con CSS3, así que si usas un navegador viejo como Internet Explorer 8 sólo verás un rectángulo.
En Internet Explorer el botón de Facebook no se verá bien, aunque sí funcionará.

Leer mas

sábado, 29 de octubre de 2011 // Etiquetas: Bitacoras , Compartir , Css , Facebook , Google Plus , Html , Taringa , Twitter // 5 comentarios //

Plantilla Taringa v3 Template

Hola amigos en esta oportunidad les traigo otra de mis plantillas , esta se llama Taringa v3 Template . A continuacion les muestro las particularidades de esta plantilla:

Boton para compartir en Taringa :

Este boton nos permitirá compartir nuestras entradas en Taringa a travez de "Mi Taringa".

Caja de suscripcion:

Gracias a esta caja tenemos la oportunidad de poner nuestro perfil de Facebook y de Twitter para que la gente pueda seguirnos o hacerse fan. Para modificar la caja debemos entrar al siguiente link y seguir los pasos.

http://plantillataringav3.blogspot.com/2011/09/editar-la-caja-de-redes-suscripcion.html

Barra al estilo Taringa:

Esta barra nos permitirá poner links . Para editar los links de la barra debemos hacer click en el siguiente link y seguir los pasos.

http://plantillataringav3.blogspot.com/2011/09/editar-la-barra-de-taringa.html

Votacion de comentarios:

Esto nos permitira votar los comentarios de forma negativa o positiva.

Compartir en foros/blog/web:

Esta plantilla nos da la posibilidad de compartir nuestra entrada en foros,blogs o paginas web.

Responder comentarios:

La plantilla tiene la opcion de responder comentarios. Esta opcion se encuentra desactivada
para activarla debemos hacer click en el siguiente enlace y seguir los pasos.

http://plantillataringav3.blogspot.com/2011/09/habilitar-la-opcion-responder.html

Relacionados:

Nos permite ver los posts que estan relacionados mediante tags , al igual que en Taringa.

Cabecera de los gadgets con el logo de T!:

La plantilla posee un simpatico icono de Taringa en la cabecera de los gadgets haciendo que esta adquiera un gran aspecto.

|Descargar| |Demo|

Leer mas

martes, 13 de septiembre de 2011 // Etiquetas: Mis creaciones , Plantillas , Taringa , Taringa template // 0 comentarios //

Plantilla Taringa v2 Template

|Descargar| |Demo|

Leer mas

// Etiquetas: Mis creaciones , Plantillas , Taringa , Taringa template // 0 comentarios //

Plantilla Taringa v1 Template

Plantilla de Taringa para Blogger hecha por mi. (Click en la imagen para agrandarla)

|Descargar| |Demo|

Peso : 9.28 KB

Leer mas

// Etiquetas: Descargas , Mis creaciones , Plantillas , Taringa , Taringa template // 0 comentarios //

Juego del Trollface

Leer mas

viernes, 19 de agosto de 2011 // Etiquetas: Juegos Flash , Memes , Trollface // 0 comentarios //

Texto titilante con link

Hola amigos hoy les vengo a mostrar como hacer un texto que contenga un link y titile , quedara de la siguiente forma.

Blog de Facu

Para agregarlo debemos reemplazar la palabra "TEXTO" por el texto que queramos y "LINK" por el link que queramos.

<a href="LINK"><span style="font-weight: bold;"><blink>TEXTO</blink></span></a>

Leer mas

lunes, 1 de agosto de 2011 // Etiquetas: Html , Textos , Tutoriales // 0 comentarios //

Volver al chat viejo de Facebook. (Funciona)

¿Estas harto del nuevo chat del Facebook?,tengo la solucion a tu problema. Consiste en utilizar unos scripts para lograr ver tus contactos como los veias con el chat viejo. Fuciona para Google Chrome y para Mozila Firefox.

Para Firefox

Lo primero que tenemos que hacer es instalar el Greasemonkey* , luego de instalarlo nospedira que reiniciemos el Firefox, lo hacemos. Una vez reiniciado el navegador ingresamos a http://userscripts.org/scripts/show/107159 y hacemos click al boton verde que dice "Install" y listo , ya tenemos el chat instalado.

*Greasemonkey es una extensión para Firefox que permite, por medio de scripts hechos por usuarios, añadir de forma arbitraria pequeñas dosis de DHTML a cualquier página web para modificar su comportamiento. Con esta extensión puedes mejorar la experencia de lectura de un sitio, hacerlo más usable, puedes añadirle nuevas funciones a Gmail, mejorar el uso de Flickr o agregar más cosas en las búsquedas de Google.

Para Google Chrome

Para instalarlo en Google Chrome solamente tenemos que entrar a http://userscripts.org/scripts/show/107159 , luego de entrar hacemos click en el boton verde que aparece en la esquina superior derecha .

Leer mas

sábado, 30 de julio de 2011 // Etiquetas: Chat viejo , Facebook , Greasemonkey // 0 comentarios //