Donde hacer los MEMEs de Facebook?

Seguramente ya sabes sobre los memes que están de moda en todas las redes sociales, los hay en todos los estilos, formas, tamaños, colores y escriben en ellos infinidades de ocurrencias, desde religión, política hasta los temas mas ridículos.

Arrastra y Comparte con Jquery

Pues ya que esta muy de moda los marcadores sociales, para propagar informacion por internet a traves de estas redes, me gustaria dejar este codigo para uso en tu Blog.

Este metodo de arrastra y comparte, lo sumo a los marcadores que ya trae mi Blog de "sharing is caring".

Solo con la diferencia que aca ubico algunos marcadores sociales Hispanos.

Este metodo de compartir es al mas puro estilo de Mashable pero como alli usan Meebo, Pizcos nos a traido la solucion ya configurada con nada mas y nada menos que Jquery.

Coloco este post en mi Blog para las personas que se preguntaban como hacerlo y tambien para las que aun no lo descubrian, basta con arrastrar la imagen de cada post y aparecen los marcadores sociales ya mencionados y se comparte todo el post.

Solo tienes que poner este codigo antes de : </body>
---------------------------------------------------------------------------------------------------------------
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> &#9658;Este solo si no usas ya la librería, si ya la usas no es necesario.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js ' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {

//cache selector
var images = $(".post-body img"),
title = $(".post h3").text() || document.title;

//make images draggable
images.draggable({
//create draggable helper
helper: function() {
return $("<div>").attr("id", "helper").html("<span>" + title + "</span><img id='thumb' src='" + $(this).attr("src") + "'>").appendTo("body");
},
cursor: "pointer",
cursorAt: { left: -10, top: 20 },
zIndex: 99999,
//show overlay and targets
start: function() {
$("<div>").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
$("#tip").remove();
$(this).unbind("mouseenter");
$("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
},
//remove targets and overlay
stop: function() {
$("#targets").slideUp();
$(".share", "#targets").remove();
$("#overlay").remove();
$(this).bind("mouseenter", createTip);
}
});

//make targets droppable
$("#targets li").droppable({
tolerance: "pointer",
//show info when over target
over: function() {
$(".share", "#targets").remove();
$("<span>").addClass("share").text("Compartir en " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
},
drop: function() {
var id = $(this).attr("id"),
currentUrl = window.location.href,
baseUrl = $(this).find("a").attr("href");

if (id.indexOf("twitter") != -1) {
window.location.href = baseUrl + "/home?status=" + title + ": " + currentUrl;
} else if (id.indexOf("delicious") != -1) {
window.location.href = baseUrl + "/save?url=" + currentUrl + "&title=" + title;
} else if (id.indexOf("facebook") != -1) {
window.location.href = baseUrl + "/sharer.php?u=" + currentUrl + "&t=" + title;
} else if (id.indexOf("wikio") != -1) {
window.location.href = baseUrl + "/sharethis/?url=" + currentUrl + "&t=" + title;
} else if (id.indexOf("meneame") != -1) {
window.location.href = baseUrl + "/submit.php?url=" + currentUrl + "&t=" + title;
} else if (id.indexOf("bitacoras") != -1) {
window.location.href = baseUrl + "/anotaciones/" + currentUrl + "&t=" + title;
}
}
});

var createTip = function(e) {
//create tool tip if it doesn't exist
($("#tip").length === 0) ? $("<div>").html("<span>Pincha y arrastra para compartir esta entrada</span><span class='arrow'></span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null;
};

images.bind("mouseenter", createTip);

images.mousemove(function(e) {

//move tooltip
$("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
});

images.mouseleave(function() {

//remove tooltip
$("#tip").remove();
});
});
//]]>
</script>
<style type='text/css'>
.ui-draggable { cursor:move !important; }
#tip { position:absolute; display:none; height:25px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }
#tip .arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }
#targets { display:none; list-style-type:none; position:fixed; top: 50%; left: 50%;z-index:99999;}
#targets li { float:left; margin-right:20px; display:block; width:60px; height:60px; background:url(URL ALOJAMIENTO DE LA IMAGEN) no-repeat 0 0; position:relative; }
#targets li#delicious { background-position:0 -60px; }
#targets li#facebook { background-position:0 -120px; }
#targets li#wikio { background-position:0 -180px; }
#targets li#meneame { background-position:0 -240px; }
#targets li#bitacoras { background-position:0 -300px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#fff; }
#overlay { background-color:#000; position:fixed;top:0;left:0;width:100%;height:100%; z-index:99997; }
#helper { background-color:#c2c2c2; position:absolute; height:35px; padding:15px 70px 0 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:18px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:3px solid #7d7d7d; }
#thumb { width:50px; height:50px; position:absolute; right:0; top:0; border-left:3px solid #7d7d7d; }
.share { font-weight:bold; position:absolute; font-size:12px; text-align: center; }
</style>
</b:if>
---------------------------------------------------------------------------------------------------------------
 Ahora bajas esta imagen y la subes a tu alojador de archivos, y pegas la direccion de la imagen dentro del codigo donde dice "URL DE LA IMAGEN"

Despues guardamos cambios y vamos a Diseño y añadimos un elemento HTML y pegamos.

---------------------------------------------------------------------------------------------------------------

<ul id="targets">
<li id="twitter"><a href="http://twitter.com"><!-- --></a></li>
<li id="delicious"><a href="http://delicious.com"><!-- --></a></li>
<li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li>
<li id="wikio"><a href="http://www.wikio.es"><!-- --></a></li>
<li id="meneame"><a href="http://meneame.net"><!-- --></a></li>
<li id="bitacoras"><a href="http://bitacoras.com"><!-- --></a></li>
</ul>

---------------------------------------------------------------------------------------------------------------

Listo guardamos y a disfrutar, porque no haces la prueba compartiendo este post?.

Nieve en tu Blog

Pues pasando a las decoraciones navideñas, les dejo algunos codigos para aplicar el efecto "nieve" en tu Blog.

- Todos los colocas antes de : </body>

Aqui tienes que bajarte el archivo javascript primero y luego subirlo a tu alojador de archivos y poner la URL dentro de este codigo. El archivo lo bajas en Red Blogs

<script type=”text/javascript” src=”URL archivo nieve.js”></script>

 

El siguiente es de Dinamic Drive, esta mas largo pero es configurable.

 

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
 
  //Configure below to change URL path to the snow image
  var snowsrc="snow.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;
 
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) { 
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>");
      } else {
        document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
       

if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }

</script>

Y por ultimo el que ya aplique en mi Blog es de Ayuda Imaginaria.

<script src="http://s2.wordpress.com/wp-content/plugins/snow/snowstorm.js" type="text/javascript"></script>

Espero les guste, esta desde el mas complicado, hasta el mas sencillo, pruebenlos y me dicen si les funciono o estan batallando.

 

Tomate la foto, en mi Blog.

El Potro nos a dejado en su web un buen gadget para tomarnos una foto online con nuestra propia camara web.

Si eres Blogger y necesitas este gadget puedes ingresar a su sitio Ciudad blogger y leer las instrucciones que no estan nada dificiles para instalar este gadget en tu sitio.

Si te da flojera puedes ir directo a la web que nos deja el codigo para pegarlo en tu blog, se llama Trombiblog y aunque esta en frances y en ingles la verdad no tiene muchas complicaciones.

Claro que tendras que registrarte para poder acceder al codigo y a las configuraciones y si quieres tomarte una foto en tu web o en otro sitio como el mio, lo unico que nesecitas es obviamente una web-cam.

Que no les de pena, adelante tomense la foto, solo denle click abajo de la imagen que aparece en el lado derecho de mi blog ( donde dice: click para tu foto) y si ademas quieres ver quienes son esas personas raras y graciosas que aparecen en la imagen puedes dar click en la misma o donde dice "Voir le trombi" para acceder al album donde todos han dejado su recuerdo de su paso por el Blog.

Se me olvidava, tambien puedes dejar comentarios y hasta calificar las fotografias del album, asi que ánimo quien sabe y como dijeron en Ciudad blogger alomejor alguien descubre tus talentos como Top model.....

Actualiza tu estado desde mi Blog

Bueno esta novedad (al menos para mi) la encontre en TodoTwitter y alli podras encontrar la informacio que el nos da para ubicar esta herramienta en nuestro Blog, aqui dejo el enlace directo solo clikea aqui.

Esta herramienta la dejare en mi Blog para que la puedas utilizar apartir de hoy, claro comenten si salta algun error o algo por el estilo, pero si eres de los que no les gusta andar de enlace en enlace pues aqui les dejo un breve Tuto de como colgar esta herramienta en su Blog o Web ya que es de mucha utilidad si usas redes sociales como Twitter, Facebook o My space....

Principiamos por entrar a la pagina que nos ofrece el script.
Bien pues lo copiamos y lo pegamos en nuesro Blog, ya saben sidebar, post, footer, post-footer, donde quieras.

Utilizarlo-
 Primero colocamos un texto para actualizar nuestro estado.

Despues clikemos en el lugar donde querramos la actualizada: Twitter, Facebook, My space.

Entonces aparecera un Pop-Up pidiendo que nos autentifiquemos, tranquilos es seguro. Tras cerrarse aparecera un mensajito como este.

Creeck10, Your status has been updated   Ok

Si damos clik en Ok volvera al estado original, y si aun seguimos en el Blog ya no sera nesesario autentificarnos para la segunda vez o tercera o cuarta, etc...

Bien ahora dejo la caja para que la pruebes, recuerda que si es tu primera vez usandola, inmediatamente que actualizes tu estado puedes ir a tu red social y comprobar que se actualizo.

Iconos Halloween

Bueno si habias estado esperando estos iconos para la tan ya mencionada fecha de halloween pues aqui te dejo los enlaces para que te los descargues, en el blog de Banaka.

Ojala los disfrutes, voy a probar algunos en mi Blog.

Estos son para Twitter

Trucos Facebook

La verdad es que estos dias he descuidado un poco mi Blog y les voi a contar el porque.
Pues resulta que tanto tiempo en el Facebook yo rechazaba y rechazaba invitaciones que me hacian para entrar al mentado juego de Farmville. Bueno " yo no tengo tiempo para jugar a la granjita" decia ignorantemente, una de tantas veces una de mis amigas del face me invita por el chat y me explica que tambien esta la opcion de configurar tu casa granja y algo asi como hacerle de arquitecto para formar tu granja a tu gusto.

Me llamo la atencion y entre. Vaya sorpresa se volvio algo absorvente, no les voi a contar las reglas ni de que se trata porque me quitaria mucho tiempo que podria invertir en m granja jajajajajaj. Ademas que es una de las Apps mas conocidas y usadas del sitio.

Oie porque no entrarle a otro jueguillo, el primero que me aparecio fue una noticia de un amigo que habia expandido su restaurante en Cafee World, dije que tal si puedo construir mi propio restaurante? pues va......

Ahora me ha gustado un poco mas el Caffe ya que lo utilizo cuando en mi granja no requiere estar presente o espero que germine todo.

Si eres de los que piensan como pensaba yo, que es para gente que se la pasa todo el dia en el Face, pues deberias entrar y darle la oportunidad.... La verdad solo es de administrar las cosechas en Farmville y las comidas en Caffe World.

Como tampoco me dio tiempo de subir una foto, les dejo esta pagina que me gusto y me ayudo a ser buen jugadro de Facebook.

trucos facebook