Mostrando las entradas con la etiqueta bullet list. Mostrar todas las entradas
Mostrando las entradas con la etiqueta bullet list. Mostrar todas las entradas

domingo, 19 de mayo de 2013

Añadir Efecto a los Bullet list en Blogger

Leave a Comment
Añadir Efecto a los Bullet list en Blogger
Es Cuestion de personalizar el listado de puntitos o conocido como (Bullet List).Estaremos añadiendole un efecto especial al pasar el cursor del mouse sobre estas se tornaran de otro color.Dandole un atractivo especial a lasmismas que pongas en tu blog.Ademas de llamar la atencion del visitante o lector de los temas que expongas en tu blog.

Este truco es sumamente sencillo de implementar a tu blog.Solo añadimos un codigo simple a la plantilla de tu blog.

Pasos ha seguir :
    Paso 1.Entra en la interface de  Blogger > Plantilla> Edite HTML
    Paso2.Busca la siguiente etiqueta ]]></b:skin>
    Paso3.Copia el codigo de abajo y pegalo sobre la siguiente etiqueta ]]></b:skin>

Nota:(Consejo:- Presiona Ctrl + F)para buscar la etiqueta ]]></b:skin>

Ejemplo del Efecto:

  • This is Sample Text
  • This is Sample Text
  • This is Sample Text


    .post ul {list-style:none;

    }

    .post ul li {
        line-height: 1.4em;
            background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDc5l18XwpQq2MYf3NEbZR_-PBTrb568X7zOGlbhG1Ho7u438dajvgMNrrzeYSRTDlbZZRUDyQifaLteA-FGULF2pjSgVuer9nwPE-fhtTjKXoh9NT0_p6MqFN5BLa2fDN_G9b0cVeIk/s400/265.gif) no-repeat scroll 0px 4px;
        margin: 0.3em 0;
        padding: 0 0 0.8em 20px;
    }

    .post ul li:hover {
            background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPPmE3SkWx8zDjEQ3VbQTex-IDdeOqdfDLD-MXQZuKpgRv8bm3Y-aYAOaFED4GOu5bvnbJAwQ8mp6ZVtgg_bPFbbpZ9ckXltpaXMJ9KZWOQVBcHLl4V2lV1g2Oueau3qDzdFZwaF3MQGE/s400/261.gif) no-repeat scroll 0px 4px;

    }

    

Guarda tu Plantilla y LISTO.
Read More