Hola amigos, hoy les traigo una interesante caja flotante hecha con Css, la cual nos va a permitir tener la opcion de copartir en Google +, Twitter y Facebook. Para utilizarla en nuestro blog debemos hacer lo siguiente:

Antes de ]]></b:skin> pegamos el siguiente código:

/****** Contenedor de botones facebook, twitter y Google ********/
#caja-botones {
position: fixed;
top:207px;
bottom: 30%;
margin: 120px 0 0 -160px;
left: auto;
z-index: 2;
width: 85px;
height: 245px;
background-color:#f7fcfd;
border: 1px solid #ffffff;
-webkit-border-radius:  6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
#caja-botones h4{
font-size: 11px;
margin: 4px 0 3px 0;
padding: 0;
text-align: center;
color: #0d72fb;
font-weight: normal;
background: none;
letter-spacing: 0em;
}

.boton-facebook {
float: left;
display: block;
margin: 3px 0 2px 7px;
padding: 0;
width: 80px;
height: 70px;
}
.boton-twitter {
float: left;
display: block;
width: 80px;
height: 70px;
margin: 4px 0 2px 9px;
padding: 0;
}
.boton-google {
float:left;
display: block;
text-align: center;
margin: 2px 0 0 7px;
padding: 0;
width: 70px;
height: 65px;
}



Una vez realizado el paso anterior buscamos <div class='post-footer'> y antes de esto pegamos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='caja-botones'><h4>&#161;Compartir!</h4>
 <div class='boton-twitter'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='facu_b' href='http://twitter.com/YOUR_USERNAME'>Twettear</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div>
<div class='boton-facebook'><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=70&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:70px'/>
 </div>
<div class='boton-google'>
<g:plusone size='tall'/>
</div>
 </div>
  </b:if>


Pueden ver un ejemplo funcionando en este blog de pruebas.

Leer mas

Hola gente, hoy les vengo a mostrar como insertar iconos de suscripcion arriba del titulo de las entradas , esto es muy facil y realmente util. Podes ver un ejemplo funcionando en este blog de pruebas .

Antes de ]]></b:skin> pegamos este código :


#suscribir {
float: left;
margin-top:-38px;
margin-bottom:18px;
margin-left:-13px;
position: relative;
}

Los valores marcados en negrita nos permitiran cambiar la posición.


Abajo de <div id='outer-wrapper'> pegamos lo siguiente :

<div id='suscribir'>
<a href='http://EL NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default' imageanchor='1' style='margin-left: 1em;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVvEoMt2GCmNHU9PuyPZd_zfsjSmZsSwm72x2_bWt_tvIgMjMJ5HHFY4APH5QFrsLOSbBmezIbl1X9VBzAphKjcTRakPh_gWrckldAZJhuDhjA19b514_trpriE02aPakQV5TKq2xVv2ph/s1600/rss.png'/></a><a href='http://twitter.com/TU NOMBRE EN TWITTER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZXr4WczeV8HnW36XBHO1NkjH57EbmYq-9CXhuXNVMvUoKYWPoU9wlHCRGT5lmWiN_zPlt7aAOTlzGrckeuHqVh7ekPVmhiun13z3WQ5t9ZaObzyRWO5COQsRjI_L1V4HJ656pdHIO0VJD/s1600/twitter.png'/></a><a href='TU PÁGINA DE FACEBOOK' imageanchor='1' style='margin-right: 1em;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJnR_zWdAy2k0lx8wTNcnnylycYrTc6CdyVv7tWqiB55Zt-r8pVpjS0dCvWQrjWMYsR27H7xmu3B8GXQELUaiHtvPWoVwj5GCw2Ru6XUa8Ir3FDvb45xrmUndDUnU4KBx4feS265OtEpg7/s1600/facebook.png'/></a>
</div>



El resultado será algo como esto :

Leer mas



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:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function()
{
jQuery(&quot;#msg-compartir&quot;).click(function(event) {
event.preventDefault();
jQuery(&quot;#btns-compartir&quot;).slideToggle();
});
});
</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:


<div class='post-footer'>


Justo arriba de ella coloca el contenedor con los botones:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' 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(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;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='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/normal/&quot; + 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


¿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




Como ya habran visto un nuevo virus circula en Facebook , se trata de utilizar la opcion "No me gusta" , aclamada por muchos de los usuarios de esta red social. Pero esta opcion no fue desarrollada por la gente de Facebook , sino que fue desarrollada por terceros que buscan expandir el virus.
Este puede aparecer de dos formas distintas :

1° Forma :

"¡Por fin! ya se puede poner el botón -No me gusta- yo ya me lo he puesto, si quieres ponértelo para poder darle tu también clicka en el texto azul de abajo que pone Botón No Me Gusta"  2° Forma:    "Que  bien, Facebook ha puesto por fin el boton NO ME GUSTA, si quieres  tenerlo tu tambien pulsa en el boton que sale aqui abajo, que dice  Instalar NO ME GUSTA."     Imagenes  
Si apollamos el puntero sobre el link (no haciendo click) veremos que nos lleva a paginas que no son Facebook.















   

En este caso pasara lo mismo.

   Recomendaciones:
  • No hacer click en los textos que dicen"Instalar opcion NO ME GUSTA" o "Boton No Me Gusta"
  • Borrar todo tipo de estas publicaciones (para evitar que mas gente sea infectada)

    Leer mas


















    Leer mas



    • Dehumanized EP
    Facebook SoundcloudTwitterYoutube

    Escuchalo en vivo

    Seguidores

    Ultimos comentarios