Cómo Agregar Estilo Css Sprites De Navegación Barra De Menú Para Blogger

Comparteme :

Demostración

1. Acceder a la cuenta de blogger y Ir a Diseño, Edición de HTML
2. Encuentre el código mediante el uso de Ctrl + F <div id='content-wrapper'>
3. Pega el código de abajo Antes <div id='content-wrapper'>

<div class="bloguero-tutorial-navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="#"></a></li>
  </ul>
</div>

4. Ahora encuentra esta etiqueta usando Ctrl + F ]]></b:skin>
5. Pega continuación el Código Antes de ]]></b:skin>
* [ Style-1 ] Con Negro y negro color de la libración Efecto

/*menu bar by bloguero-tutorial.blogspot.com */
.bloguero-tutorial-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bloggersstand-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bloggersstand-navi1 ul li {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfMeFO1ErR_8XojgH24gQ7aR95UYAUx0pwuORpvl8aFIuXYS9H90oBSo_aCo0CDD3SHtJzyTWvVsb79M8CjeU28VABP_q5sYj7CyOc7NNLFhom9IZjzF7ENv6eIcAhY_BHvyWBOW6xjXA/s1600/bloggertrix.com-tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bloguero-tutorial-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.bloguero-tutorial-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bloguero-tutorial-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bloguero-tutorial-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bloguero-tutorial-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bloguero-tutorial-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bloguero-tutorial-navi1 ul li:hover {
    z-index:1000; }
.bloguero-tutorial-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.bloguero-tutorial-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.bloguero-tutorial-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.bloguero-tutorial-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.bloguero-tutorial-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menubar by bloguero-tutorial.blogspot.com */

* [Estilo-2] Para Sprites de color con efecto de desplazamiento de color

/*menu bar by bloguero-tutorial.blogspot.com */
.bloguero-tutorial-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bloguero-tutorial-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bloguero-tutorial-navi1 ul li {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtRWG-qVH_eOt2CMRoCG-kdcUl6C_J4hiTpaDwSNNhkMK6yVhoQlk9EGjWrrLRfn34Ky-nreg7W7QP_2NOivDOQNH_3DqE6fFyOYVNpAEcXNdRPB5xAIxY3G4MEl7X2ICsFhu6jpLN_A/s1600/tab-2.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bloguero-tutorial-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.bloguero-tutorial-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bloguero-tutorial-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bloguero-tutorial-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bloguero-tutorial-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bloguero-tutorial-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bloguero-tutorial-navi1 ul li:hover {
    z-index:1000; }
.bloguero-tutorial-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.bloguero-tutorial-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.bloguero-tutorial-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.bloguero-tutorial-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.bloguero-tutorial-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menu bar by bloguero-tutorial.blogspot.com */

* Cambiar Todos # Con sus enlaces.
6. Ahora guarda el código HTML / Javascript ", hecho!

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Cómo Agregar Estilo Css Sprites De Navegación Barra De Menú Para Blogger.

Comparte