Botones sociales para Blogger (Mejora tu Plantilla)

Como supongo que os habreis fijado,he añadido a todas mis paginas al final de los post un grupo de botones sociales para que podais compartir cada post en vuestras redes sociales favoritas con mayor facilidad.

Hay botones para twiter,facebook,meneame,feed rss,etc.Ademas de ser unos botones muy utiles para que vuestros post lleguen todavía a mas gente,tambien le dan un aire mas atractivo a vuestras paginas,por lo que con este script que os voy a explicar a continuación ganais mucho en el aspecto tecnico de vuestros blogs para lograr una mayor difusión de vuestro trabajo pero tambien visualmente.

Ya sabeis que suelo explicar las cosas muy detalladamente,así que si seguis los pasos tal cual podreis conseguir vuestros botones sociales facilmente.El resultado final debe ser como en esta captura de esta misma pagina.Los botones se ven medio escondidos y al pasar el puntero del ratón se asoman.Las entradas salen resumidas porque yo las tengo resumidas,pero a vosotros os saldrá el post entero o como lo tengais.


Lo primero es ir a la edición de vuestra pantilla.Si usais la interfaz de toda la vida teneis que pinchar en diseño,luego pinchar en "Edición de HTML" y una vez allí debeis marcar una casilla pequeñita que dice "Expandir plantillas de artilugios".

Si sin embargo usais la nueva interfaz de Blogger debeis ir a plantilla y luego pinchar sobre "Edición de HTML" y una vez allí debeis marcar la casilla que dice "Expandir plantillas de artilugios".

A partir de ahí lo que teneis que hacer es lo mismo useis la interfaz que useis.

Ahora para buscar cada cosa dentro de la plantilla debeis hacer una cosa que os simplificará mucho la labor para buscar cada codigo.Debeis pinchar la tecla "ctrl" y al mismo tiempo pinchar la letra "f".Vreis que se abre como un pequeño buscador que es donde escribireis los codigos a buscar y así el marcador os llevará directamente a donde está cada uno.

Pues bien,marcamos ctrl+f y en el buscador poneis esto:

]]></b:skin>

Justo encima de donde está ]]></b:skin> debeis copiar y pegar todo este codigo:

/* Sexy-Bookmarks
-----------------------------------------------*/


div.marcadores {
height:65px;
position:relative;
width:480px;
}
div.marcadores ul.cat {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:50px;
}
div.marcadores ul.cat li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:60px !important;
width:60px !important;
cursor:pointer !important;
padding: 0 !important;
}
div.marcadores ul.cat a {
display:block !important;
width:60px !important;
height:60px !important;
font-size:0 !important;
color:transparent !important;
}

.cat-bitacoras, .cat-bitacoras:hover,.cat-delicious, .cat-delicious:hover,.cat-facebook, .cat-facebook:hover, .cat-meneame ,.cat-meneame:hover, .cat-technorati, .cat-technorati:hover, .cat-twitter, .cat-twitter:hover, .cat-wikio, .cat-wikio:hover {
background:url(http://1.bp.blogspot.com/-QEd493BnnBs/TuVlJyEUS9I/AAAAAAAAEYY/pj4Np8iiOL0/s1600/botones+sociales.png) no-repeat !important;
}
.cat-bitacoras { background-position: left top !important; }
.cat-bitacoras:hover { background-position: left bottom !important;}
.cat-delicious { background-position: -70px top !important; }
.cat-delicious:hover { background-position: -70px bottom !important; }
.cat-facebook { background-position: -140px top !important; }
.cat-facebook:hover { background-position: -140px bottom !important; }
.cat-meneame { background-position: -210px top !important; }
.cat-meneame:hover { background-position: -210px bottom !important; }
.cat-technorati { background-position: -280px top !important; }
.cat-technorati:hover { background-position: -280px bottom !important; }
.cat-twitter { background-position: -350px top !important; }
.cat-twitter:hover { background-position: -350px bottom !important; }
.cat-wikio { background-position: -420px top !important; }
.cat-wikio:hover { background-position: -420px bottom !important; }


A continuación en ese pequeño buscador que abrimos antes pinchando ctrl+f pegamos este codigo:

<div style='clear: both;'/> <!-- clear for photos floats -->

Os aparecerán 2 resultados,pero a nosotros nos interesa el numero 1.Tras buscar esa linea que os puse antes <div style='clear: both;'/> <!-- clear for photos floats -->,vereis que debajo pone este codigo  </div>.Pues justo debajo,o al lado de ese codigo pegais el siguiente codigo:

<!-- Ini Sexy-Bookmarks -->

<div class='marcadores'>
<ul class='cat'>
<li class='cat-bitacoras'><a alt='Bitacoras' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bitacoras'/></li>

<li class='cat-delicious'><a alt='Delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'/></li>

<li class='cat-facebook'><a alt='Facebook' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'/></li>

<li class='cat-meneame'><a alt='Meneame' expr:href='&quot; http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Meneame'/></li>

<li class='cat-technorati'><a alt='Technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Technorati'/></li>

<li class='cat-twitter'><a alt='Twitter' expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitter'/></li>

<li class='cat-wikio'><a alt='Wikio' expr:href='&quot; http://www.wikio.es/vote?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Wikio'/></li>
</ul>
</div>
<!-- Fin Sexy-Bookmarks -->


Antes de darle a guardar los cambios os recomiendo previsualizar para que veais si lo habeis hecho bien y aparecen los botones al final del post,aunque si habeis seguido bien los pasos no debería de haber ningun problema.

Este es el post de hoy que como siempre digo,espero que os haya sido de utilidad y nos vemos en el proximo.

Milú

11 comentarios:

  1. Nueva entrada con este script de botones sociales para vuestro blog que hace que vuestros post puedan tener mucha mas difusión y al mismo tiempo le dan un mejor aspecto a vuestras plantillas.Aunque no tengais mucha idea ya sabeis que explico todo muy clarito y si seguis los pasos os aseguro que no tendreis el menor problema.

    Milú

    ResponderEliminar
  2. Hola otra vez!
    Pues al fin no he podido solucionar el problema... y he acabado comprando (regalo de navidad adelantado) un disco duro de EMTEC para descargarme ahí las películas bajadas y verlas directamente en la tv. Lo he probado y funciona.

    Había estado dudando entre comprar el nero más completo o ese aparato y me ha parecido mejor inversión este último, pues el nero sale bastante caro (más o menos el mismo precio que el aparato nuevo) y no estoy segura de que me solucionase el problema ya que estoy utilizando la versión de prueba que dura un mes y no podía ver las películas como ya te comenté.

    Lo del CD no pude hacerlo porque no tenía la suficiente capacidad. Es cierto que tengo películas en CDs pero creo que hubiese sido lo mismo.

    Te agradezco todos tus consejos Milú, porque estoy segura que si tu no sabes el porqué de estos problemas, difícilmente lo voy a averiguar.

    Un montón de gracias y un abrazo.

    ResponderEliminar
  3. Hola Durrell,quizas al usar una versión de prueba y el cdburnerxp es posible que uno por no pertenecer al sistema operativo (7) y otro por ser de prueba te hayan jugado esa mala pasada,de todos modos has tomado una solución brillante ya que así podrás volcar todos los archivos a ese disco duro lo que te facilita el visionado y ademas no tendrás que andar cambiando de disco.Buena idea.

    Milú

    ResponderEliminar
  4. Gracias Milú,creo que si que ha sido una estupenda idea.

    Espero que pases una feliz Navidad.

    Besos.

    ResponderEliminar
  5. Hola Milú, feliz año. A ver si se explicarme, jejeje, que me acaban de preguntar cómo se eliminan los accesos directos del escritorio del hotmail, gmail, yahoo y blog. Vamos, que es un ordenador en el que no quieren dejar rastro de nada, porque por lo visto entra a estos sitios sin necesidad de contraseña y ahora se traslada a otro lugar y no quiere dejar ninguna huella.

    Gracias, besos.

    ResponderEliminar
    Respuestas
    1. Hola ion,perdón por la tardanza.Yo uso siempre al acabar de navegar un limpiador,de hecho uso varios,pero con el Ccleaner debería bastar para lo que dices,solo tienes que abrir el Ccleaner y marcar que es lo que quieres que te borre.

      Al abrir el programa se abre en "limpiador",allí verás que se ven dos pestañas "windows" y "programas",segun el navegador que uses debes marcar en un lugar u otro,si es el explorer entonces en windows marcas todas las casillas menos autocompletado y contraseñas guardadas si es otro navegador vas a "programas y allí verás firefox y google chrome por ej. Marcas lo mismo respetando los formularios y las contraseñas y listo.

      Milú

      Eliminar
    2. No pidas perdon, no pasa nada. Pues no sé cómo lo habra hecho, pero ya está ubicada en su nuevo sitio. Era borrar toda información completa de ese equipo para que nadie fisgoneara ni supiera qué tiene.

      Gracias Milý y feliz año, besos.

      Eliminar
    3. lo bueno es que lo consiguió que era lo importante.Maneras hay muchas,yo intenté darte una que no fuera muy complicada,pero me alegra que ya esté todo listo.

      Saludos

      Milú

      Eliminar
  6. Ahhhhh ,se me olvidaba jajaja FELIZ 2012,Espero que sea el mejor año de vuestras vidas....

    Milú

    ResponderEliminar
  7. Gracias me sirvió =D

    ResponderEliminar
    Respuestas
    1. Hola Rodrigo,si ahora quieres centrarlos o ponerlos mas hacia derecha o izquierda solo tienes que jugar con donde dice en la primera parte del código left:50px;

      Si los quieres mas a la izquierda le quitas pixeles,en lugar de 50 pones 30 por ejemplo y si los quieres mas a la derecha entonces sumas pixeles,en lugar de 50 pones 80 por poner un ejemplo.

      Milú

      Eliminar

Comenta,¡¡¡que es gratis!!!

Subir pagina