En esta oportunidad compartiré con ustedes un espectacular truco para Blogger, se trata de un espectacular menú de marcadores flotantes que se ubican en la parte izquierda del blog y al pasar el cursor sobre los iconos estos se expanden.

Puedes ver el truco en acción en esta misma entrada (en la parte izquierda de la pantalla).

Para añadir este gadget en tu blog ve a Diseño, Añadir gadget, HTML/JavaScript y pega allí lo siguiente:

<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(http://www.miltrucosblogger.com/wp-content/uploads/2013/10/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(http://3.bp.blogspot.com/-1mYMKQENXdI/UPFOeK31VzI/AAAAAAAAA4k/w2Qk48tpleQ/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(http://1.bp.blogspot.com/-3M1F3Y29Yoc/UPFOeAAUFvI/AAAAAAAAA4c/ALvfOPDwJ-g/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(http://4.bp.blogspot.com/-twR0g7wotpE/UPFOfFtFOuI/AAAAAAAAA4o/uJMUf9hjRco/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a   {
    background:#963336 url(http://2.bp.blogspot.com/-xgOrG4ysqyM/UPFOeKFKMtI/AAAAAAAAA4Y/i_jnKpHsK24/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);
    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<ul id='social'>
 <li class='twitter'><a href='URL DE TWITTER' title='Twitter'></a></li>
 <li class='googleplus'><a href='URL DE TU GOOGLE PLUS' title='Google Plus'></a></li>
 <li class='facebook'><a href='URL DE TU FACEBOOK' title='Facebook'></a></li>
 <li class='rss'><a href='URL DE TU RSS' title='Rss'></a></li>
 <li class='pinterest'><a href='URL DE TU PINTEREST' title='Pinterest'></a></li>
</ul>

Reemplaza lo que esta en resaltado en color azul  por lo que se indica en cada caso y guarda los cambios.

Como lo ves, es un truco espectacular y muy fácil de agregar en nuestros blogs.

Si tienes algo que decirnos no dudes en comentar.

Vía:Blogtipsntricks


18 commentarios

Codificarlos · octubre 14, 2013 a las 1:52 am

Simplemente genial ese marcador gracias, continua asi me han servido de mucho en mi sitio y mas este gadget me ha encantado

Luis Hernan Gonzalez · octubre 15, 2013 a las 7:27 am

puesss a mi no me aparece

Vanedis · enero 29, 2014 a las 3:41 pm

Me ha encantado..me lo llevo a mi blog…muchísimas gracias !

    Hayder Juvinao · febrero 4, 2014 a las 9:04 pm

    Vanedis gracias por comentar, espero que vuelvas a visitarnos.

    Saludos

Raúl Granados · abril 13, 2014 a las 12:01 pm

Muchas gracias por la barra. Está genial. Funciona de fábula. Enhorabuena

Raúl Granados · abril 13, 2014 a las 12:02 pm

Muchas gracias por compartir. Funciona de fábula y está genial. Un saludo

Omar Jiménez Flores · julio 17, 2014 a las 6:01 pm

Gracias me sirvio pero com hago para cambiar el logo quiero persnalizar con mis propios logos me ayudas ? 🙂

María Eugenia Marínez Garcés · agosto 8, 2014 a las 1:29 am

Hola, Jaider. Tengo una pregunta. Instalé el artilugio, pero debajo de cada botón aparece una línea que sobresale mucho. Me podrías indicar a qué se debe. Esta es mi página
http://horizontefemenino.blogspot.com/

Gracias. Siempre encuentro muy buen material en tu blog

María Eugenia Marínez Garcés · agosto 8, 2014 a las 1:54 am

Hola, ya lo resolví. Sólo debía deslizar hacia abajo el cajón donde esta el archivo. Saludos

Imagine Carilo · julio 7, 2015 a las 8:06 pm

Gracias por tu aporte, los estaré utilizando, para porderlos ver aplicados pueden consultar

imagine cariló

Imagine Carilo · julio 7, 2015 a las 8:07 pm

perdon, el link es

imagine cariló

Botones Sociales Blogger - Hogar Bloguero · septiembre 4, 2015 a las 1:01 pm

[…] Mil Trucos Blogger, de nuevo, nos llega un interesante Gadget para instalar unas pestañas flotantes en el lateral del […]

Botones Sociales Blogger - Rocío Bloguera · febrero 5, 2016 a las 7:09 pm

[…] Mil Trucos Blogger, de nuevo, nos llega un interesante Gadget para instalar unas pestañas flotantes en el lateral del […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *