Gadget iconos sociales a la izquierda del blog con efecto Hover Blogger

Hoy, para quién lea y corresponda este excelente truco referenciado de blogtipsntricks, se trata de un buen Gadget simple y perfecto de iconos sociales al lado izquierdo de tu blog desde luego con un elegante efecto deslizante.

Por aquí, dando click abajo podremos ver un Demo:

VAMOS A COLOCARLO

1. Lo primero será colocar el script de Jquery en nuestra plantila OJO si ya lo tenemos saltar al paso 2, de lo contrario vamos a plantillla o tema y buscamos lo siguiente </head> justo arriba pegamos el siguiente código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2. Ahora vamos a copiar el código CSS y parte con JS (Javascript) que se encargará del funcionamiento del truco para ello vamos a Diseño > Añadir un Gadget > HTML/Javascript y pegamos 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKjaJbcAbDIapaofoPsJlSolk0xWqc1dnuNT0cjcVsx6s7slEx9b3szb8kbK6BEsLhvdcT2Zbhf_XdxVfJxijeSwdPvCtO4OiRPT_SzxOOccXDZW_2zzuh5BjrTWQx11eyHVFObUrGpo/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJP4HMV40E7ln5GugMW56IAfbmlpqQb6H8E_y0hJk5rXF7u0C0u5myhVAr7SxSXwjTPF-cYqG2_f8yxzEPj4Z9tIxnIxMkS56SbhpUJ0jO7oDhleVcWL3HJiRgDsh8fZ_pVrooEGwJas/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXUYRf1ijO4MoMtse9MVn4ME1o2CtIjVwtFy1v4rGqoyinx3ueTmYjAyeSwyMtZGe1ZMsPcVKkNkupLHDgHtmAZfoBRzCGGCDs_5qyx0DyQJFbhFXvXCMLXk4E19QKi4GwKFQ9w-6EM-4/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRDr38JJpckz2-1dJZhIy2IecAZB08O-rjkfhFmbkeZ0hYiXVZGdumqQ4s7BoJePChbNG67v-86TXEch6dPa_8Lvdd8e8qs9pQg6Hr7rBsmiomASao9UcFRaIQd8wgsoL6Dm6VkugLdU/s1600/rss.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='AQUÍ ENLACE' title='Twitter'></a></li>
 <li class='googleplus'><a href='AQUÍ ENLACE' title='Google Plus'></a></li>
 <li class='facebook'><a href='AQUÍ ENLACE' title='Facebook'></a></li>
 <li class='rss'><a href='AQUÍ ENLACE' title='Rss'></a></li>
 </ul>

3. Guardamos y en esencia debería estar funcionando el truco, pero para este paso simplemente resaltaré que debemos modificar lo que dice "AQUÍ ENLACE" por la URL respectiva de cada Red social ¡Fácil!.

No siendo más ante la brevedad del asunto me retiro, cualquier duda comentar.

Hasta la próxima, ;)

Leer Más

Bloque carrito de compras debajo del menú horizontal Prestashop [Solución]

El bloque de carrito de compras es tan importante en nuestras tiendas prestashop desde su funcionamiento hasta en donde está ubicado, es por ello que hoy traigo a ustedes la solución a un problema muy común en usuarios que empiezan a experimentar en su tema de prestashop.

 
EL PROBLEMA

Básicamente el bloque de Carrito de compras se posiciona debajo del menú horizontal principal de nuestra tienda siendo así poco estético y robando mucho espacio al visualizar el tema ya en definitiva.


LA SOLUCIÓN

¡Fácil! tan fácil como lo corto de este post, no hará falta tocar código complejos o hacer maniobras extrañas simplemente lo que haremos será:

1. Vamos al Backend en nuestro prestashop (Yo tengo versión 1.6.1.X) allí click en Módulos y servicios >> Posiciones de los módulos:

2. Desplegará el listado de los módulos hasta aquí normal, necesitaremos buscar dos módulos para moverlos, dichos módulos a ubicar serán:

3. Una vez ubicados vamos a moverlos por encima del módulo que se llama:

4. Al final deberás pasar de estar (Antes) a dejar ubicado todo como está (Ahora), es decir, el módulo de "Menú horizontal superior" deberá estar debajo de los módulos buscados en el paso 2:

Finalmente guardamos los cambios y nuestro bloque estará en su posición normal, como se ve ahora:

No es más a problemas fáciles soluciones fáciles, si tienes dudas por favor comenta.

Hasta la próxima,

Leer Más