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'/> ►Este solo si no usas ya la librería, si ya la usas no es necesario.
<b:if cond='data:blog.pageType == "item"'>
<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?.
