Tutorial: Cómo agregar botones de compartir en tu blog de forma personalizada

MayRock · 24 Mar 2012

Hace poco recorriendo blogs de tutoriales descubri dos tipos de ''Marcadores Sociales'' (botones para compartir) que me gustrón mucho. El problema era que no sabia cual de los dos elegir para mi Blog.
Asi que, decidi combinarlos y crear estos.

Enlace eliminado

Como pueden ver, los marcadores que combine son de Ciudad Blogger y Way2Blogging.
Aca pueden ver un Enlace eliminado de como quedarian los marcadores.

EL TUTORIAL

Primero lo que vamos a hacer es seguir los pasos del el post de ''Ciudad Blogger''.

Nos dirijimos a Diseño - Edición de HTML - Expandir plantillas de artilugios y buscamos la etiqueta:

Insertar CODE, HTML o PHP:

</head>

Y justo antes pegamos el script:

Insertar CODE, HTML o PHP:

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery.noConflict();
    jQuery(function()
    {
    jQuery(&quot;#msg-compartir&quot;).click(function(event) {
    event.preventDefault();
    jQuery(&quot;#btns-compartir&quot;).slideToggle();
    });
    });
    </script>

Y ahora antes de

Insertar CODE, HTML o PHP:

]]></b:skin>

agregamos el CSS:

Insertar CODE, HTML o PHP:

    /* Botones para compartir
    ----------------------------------------------- */
    .msg-compartir {
    width:140px; /* Ancho de la burbuja */
    position:relative;
    padding:10px;
    margin:1em 0 3em;
    text-align:center;
    color:#000; /* Color del texto */
    background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
    /* Color de fondo gradiente de la burbuja */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, [B]Enlace eliminado[/B]
    background:-o-linear-gradient(#f9d835, [B]Enlace eliminado[/B]
    background:linear-gradient(#f9d835, [B]Enlace eliminado[/B]
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    }
    .msg-compartir::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 67px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */
    display: block;
    width: 0;
    }
    .btns-compartir {
    display: none;
    margin-top:-10px;
    background:#F2F2F2; /* Color de fondo del contenedor de los botones */
    border:1px solid [B]Enlace eliminado[/B]
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    margin-bottom:20px;
    }
    ul.way2blogging-social { padding:0;list-style:none; margin:15px auto !important;display:inline-block;width:100%; text-align:center;}
    ul.way2blogging-social li { padding:0;display:inline-block; background-repeat:no-repeat; }
    ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
    ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
    ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://1.bp.blogspot.com/-g7iysrErmVQ/Tzt2z_deDEI/AAAAAAAAE-Q/glYbzMAsd_k/s000/way2blogging-facebook.png"); }
    ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://1.bp.blogspot.com/-X5zmTGbE78I/Tzt20D1asxI/AAAAAAAAE-Y/ovkCBF7yt1I/s000/way2blogging-twitter.png"); }
    ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://1.bp.blogspot.com/-el-xYhf5mlU/Tzt20USD-AI/AAAAAAAAE-g/L9dZNcxVwOs/s000/way2blogging-googlebuzz.png"); }
    ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://3.bp.blogspot.com/-EBDiqP13hhQ/Tzt20eie_ZI/AAAAAAAAE-o/5xonEYjdmbA/s000/way2blogging-stumbleupon.png"); }
    ul.way2blogging-social li.way2blogging-digg { background-image:url("http://4.bp.blogspot.com/-Ehx0v-Z5oqc/Tzt20uB4WSI/AAAAAAAAE-w/7U5Z5iuZk6M/s000/way2blogging-digg.png"); }
    ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://4.bp.blogspot.com/-9vbIFSJhWXc/Tzt20j5q8wI/AAAAAAAAE-4/3WDG8LYQ6xQ/s000/way2blogging-delicious.png"); }
    ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://2.bp.blogspot.com/-urRLmxRJ_zM/Tzt205EvoNI/AAAAAAAAE_A/vl6SzWnqOnA/s000/way2blogging-linkedin.png"); }
    ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://1.bp.blogspot.com/-SQCcz1DFS6s/Tzt20xzEhQI/AAAAAAAAE_I/U_f-xJYpmEI/s000/way2blogging-reddit.png"); }
    ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://3.bp.blogspot.com/-V68yZAYqCvE/Tzt21Gsdt3I/AAAAAAAAE_Q/Xg-qbtrF3fk/s000/way2blogging-technorati.png"); }
    #way2blogging-cssanime:hover li { opacity:0.2; }
    #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
    #way2blogging-cssanime li:hover { opacity:1; }
    #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }

Ahora buscamos la linea:

Insertar CODE, HTML o PHP:

<div class='post-footer'>

Y justo arriba pegamos lo siguiente:

Insertar CODE, HTML o PHP:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>

    <center>
[B][I]    <div class='btns-compartir' id='btns-compartir'>
    <table border='0' cellpadding='7'>
    <tr>
    <td><iframe allowTransparency='true' expr:src='&quot;[B]Enlace eliminado[/B] + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></td>

    <td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>

    <td><script type='text/javascript'>(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>
    <t:sharer data-layout='big'/></td>

    <td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></td>

    <td><a expr:href='&quot;[url=http://bitacoras.com/anotaciones/&quot;]Enviar post en Bitacoras.com[/url] + data:post.url'><img alt='votar' expr:src='&quot;[B]Enlace eliminado[/B] + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:10px;' title='Votar este artículo en Bitacoras.com'/></a></td>

    </tr>
    </table>[/I][/B]
    </div>
    </center>
    </b:if>

Lo que esta resaltado en negrita y cursiva, lo remplazaremos por esto:

Insertar CODE, HTML o PHP:

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <ul class='way2blogging-social' id='way2blogging-cssanime'>
        <li class='way2blogging-facebook'>
        <a expr:href='&quot;[url=http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot;]Log In | Facebook[/url] + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
        </li>
        <li class='way2blogging-twitter'>
        <a expr:href='&quot;[url=http://twitter.com/home?status=&quot;]Sign in to Twitter[/url] + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
        </li>
        <li class='way2blogging-googlebuzz'>
        <a expr:href='&quot;[B]Enlace eliminado[/B] + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
        </li>
        <li class='way2blogging-stumbleupon'>
        <a expr:href='&quot;[B]Enlace eliminado[/B] + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
        </li>
        <li class='way2blogging-digg'>
        <a expr:href='&quot;[url=http://digg.com/submit?phase=2&amp;url=&quot;]Digg - Submit a link[/url] + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
        </li>
        <li class='way2blogging-delicious'>
        <a expr:href='&quot;[B]Enlace eliminado[/B] + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
        </li>
        <li class='way2blogging-linkedin'>
        <a expr:href='&quot;[url]http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;[/url] + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
        </li>
        <li class='way2blogging-reddit'>
        <a expr:href='&quot;[url=http://reddit.com/submit?url=&quot;]reddit.com: login or register[/url] + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
        </li>
        <li class='way2blogging-technorati'>
        <a expr:href='&quot;[B]Enlace eliminado[/B] + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
        </li>
        </ul>
        </b:if>

Recuerda que:

Tal vez no funcione con todos los servidores.
Sólo será visible en las entradas individuales, NO en la portada.
La burbuja está hecha con CSS3, así que si usas un navegador viejo como Internet Explorer 8 sólo verás un rectángulo.

Carlos Arreola · 25 Mar 2012

Tema aprobado y agregado a la lista de tutoriales de blogger cc. [MENTION=22412]MayRock[/MENTION]

1000negocios · 25 Mar 2012

me a encantado el tuto muchas gracias.

TheNyron6 · 25 Mar 2012

Muy bueno, ahora ya no uso blogger, pero viene bien saberlo

MayRock · 26 Mar 2012

Gracias :laugh:

Javier · 27 Mar 2012

Estaba buscando marcadores sociales para mi nuevo blog. Gracias!

MayRock · 28 Mar 2012

Por nada

shruken · 20 Jun 2012

seria bueno actualizar eso de google buzz por google+1 no?

dagvor · 13 Jul 2012

Gracias

penwen · 30 Nov 2013

muy bueno
gracias