Ya hemos visto unos cuantos marcadores, entre los cuales están: Marcadores Sociales estilo huevo para blogger, Marcadores Sociales estilo corazón para blogger en fin hay una gran veriedad para elegir y por lo cual no hay que tener excusa, en mi opinión éste marcador social que le estaré compartiendo me llama más la atención por su función...
Como los vi estos botones en una pagina web... pues quise buscarlos por internet y compartirlo con nosotros/as para que los puedan podaí tener por si alguno/a no los conociaís.
Éste gadget cuenta, cada vez que alguna persona publica algo a través de la herramienta, el marcador lo pueden ver perfectamente al final de esta entrada del blog de un amigo. Aqui dejo una captura para que lo vean.
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 pegen 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:
<!--Start Ssocial Bookmarks from http://www.spiceupyourblog.com -->
<b:if cond='data:blog.pageType == "item"'>
<div class='shr_class shareaholic-show-on-load'></div>
<script type='text/javascript'>
var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @DeejayAfm"}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
<!-- End Social Bookmarks from http://www.spiceupyourblog.com -->
Lo que está marcado en azul, es la condiciónal, que hace que los marcadores
sociales se vean sólo en las entradas, si desea que se muestre también en
el home (portada) usa las condicionales de blogger (Tutorial CiudadDeBlogger) ahí eliges la condición que quieras. Lo que está marcado en color rojo es el nombre de mi twitter, el cual deberás reemplazar por el que queramos que en este caso el vuestro.
Todo los créditos son de Shareaholic. Espero que les guste esta entrada y que disfruten de estos marcadores sociales.
Un saludo a tod@s.
sociales se vean sólo en las entradas, si desea que se muestre también en
el home (portada) usa las condicionales de blogger (Tutorial CiudadDeBlogger) ahí eliges la condición que quieras. Lo que está marcado en color rojo es el nombre de mi twitter, el cual deberás reemplazar por el que queramos que en este caso el vuestro.
Todo los créditos son de Shareaholic. Espero que les guste esta entrada y que disfruten de estos marcadores sociales.
Un saludo a tod@s.
No hay comentarios:
Publicar un comentario