Tutorial: Marcadores sociales deslizantes, con opacidad, y tip tip

MayRock

Beta
Verificación en dos pasos desactivada
Desde
21 Mar 2012
Mensajes
39
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.

Sin título.jpg

Como pueden ver, los marcadores que combine son de Ciudad Blogger y Way2Blogging.
Aca pueden ver un Demo 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, [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=f3961c%29]#f3961c)[/URL]
    background:-o-linear-gradient(#f9d835, [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=f3961c%29]#f3961c)[/URL]
    background:linear-gradient(#f9d835, [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=f3961c%29]#f3961c)[/URL]
    -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 [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=D0C9AF]#D0C9AF[/URL]
    -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;[url=http://www.facebook.com/plugins/like.php?href=&quot;]Like[/url] + 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;[url]http://widgets.bitacoras.com/votar/normal/&quot;[/url] + 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;[url]http://www.google.com/buzz/post?url=&quot;[/url] + 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;[url]http://www.stumbleupon.com/submit?url=&quot;[/url] + 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;[url]http://delicious.com/post?url=&quot;[/url] + 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;[url=http://technorati.com/faves?add=&quot;]Technorati[/url] + 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

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.358
Tema aprobado y agregado a la lista de tutoriales de blogger cc. [MENTION=22412]MayRock[/MENTION]
 

TheNyron6

Baneado
Gamma
SEO
Verificación en dos pasos desactivada
Desde
16 Mar 2012
Mensajes
426
Muy bueno, ahora ya no uso blogger, pero viene bien saberlo :)
 

Javier

Dseda
Redactor
Verificación en dos pasos desactivada
Desde
23 Abr 2010
Mensajes
1.173
Estaba buscando marcadores sociales para mi nuevo blog. Gracias!
 

shruken

Baneado
Préstamo
Pi
SEO
Verificación en dos pasos desactivada
Desde
27 May 2012
Mensajes
5.167
seria bueno actualizar eso de google buzz por google+1 no?
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba