Poner marcadores sociales debajo de las entradas en Blogger (Shareaholic Slide jQuery)

Hoy les traigo este marcador social muy por cierto yo lo estoy utilizando sin más que decir el que lo quiera que se lo lleve comencemos:

Éste gadget cuenta, cada vez que alguna persona publica algo a través de la herramienta, el marcador lo pueden ver perfectamente en nuestro sitio al final de la entrada, puede verificar que sí, funciona...

Pues bien vamos a empezar, y lo primero sería (si no sabes de HTML, haz una copia de seguridad de la plantilla), entrar en el Editor de HTML y expandimos los artilugios..

Ahora bien, buscar lo siguiente:

]]></b:skin>

No se olviden de presionar CTRL + F para encontrar el código más rápido, ahora pegar el siguiente CSS antes del código que mencioné anteriormente.

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

 Hasta ahora vamos bien, lo siguiente sería buscar:

<div class='post-footer'>

Después del código encontrado pegar antes lo siguiente:

<!--Inicio de Social Bookmarks desde  http://blogginred.blogspot.com  -->

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

<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:
&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,
&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,
&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,
&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,
&quot;twitter_template&quot;:&quot;Some titulo del post - http://goo.gl/dbqlx via @andreslozanoNH&quot;}};
</script>

<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href=' http://blogginred.blogspot.com/2012/07/marcadores-sociales-shareaholic-slide.html ' target='_blank'>Marcadores Sociales</a></b:if>
<!-- Fin de Social Bookmarks desde http://blogginred.com -->

Y eso es todo amigos espero les guste no olviden comentar, compartir, dar like etc. por cierto lo que esta en color rojo arriba donde dice andreslozanoNH es mi twitter Pueden cambiarlo por el de ustedes !!

Hasta la próxima BloggeRs,