GADGET DE MARCADORES FLOTANTES CON EFECTO HOVER

Add Comment Edit

GADGET DE MARCADORES FLOTANTES CON EFECTO HOVER.


 


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:



1-Un clic en “Diseño”                                    



2-Clic en “Añadir un gadget”                                        



3-Busca el widget que dice “HTML-Javascript” y ábrelo                         



4-Coloca el siguiente codigo en el interior






<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8wsaA9EbsXcjdEc9AxrNhbfI78HTkwQNSbW6P3wRcnQNJNi71Lky1OSUZMDyX1T77yGsF-xdC4nAxONJuc0dYZbIBwjfICbHA8dnD0cRjxGtMqeRRtBWG9ji2muaEraywsc6DNurI-Fo/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZZXBs-oIYmdlII40CLBcFIGt7_NxU5Ns61ZcBsrgWW_lErEnIZIfUjFk4q__bZBk0td_bXR3XaaryZE_Stv79visPxMYvqwUVMHrBaIuqtypUJL7hdrwHZKX-Z8OT51aI__QmaltcqE/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Pf-pfCTltee90-zvaXgDMyAx7z0etJQDkBupvOL4vXi6L43ad8hMBpYSHdFAQw7dbjb-L8OPIOcJ6VOtjQmEuXeb7F4jSVmQ0E860PkHx69G0JQ4tqkyDPAejWUr5pzLVmQGiVwY7_w/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDmrqumE6utXDTCY1qml-WfqnjvnEEb0JPXdcoOUl5GNmAmZof9NWKBfHrGeCQxLddGqTx8rN-4RbfwaZawTXp2rotdigHpKXUfIvKq98fFkenpySXDhKAtKzcSdCyT7cX53W2KGacDsQ/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.

Despues de haber insertado el código, un clic en  "Guardar"







Fecha de la Publicación;  18/11/2020



Fuente miltrucosblogger.




Publicado por:                                                    















CONVERSATION

0 comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )
Back
to top