Añadir Menu Sprite En blog de Blogger

En este tutorial te incluire una variedad de atractivos estilizados menu sprite,estos trabajan perfectamente con navegadores conocidos como  Firefox 3.5, IE 7, Chrome 3.0 y Opera 9.02
Muy elegante en su diseño y en cuatro maneras que hara de tu blog uno mas apelativo y profesional. La caracteristica de estos es que son facil de añadir a blog de blogger.

Solo sigue estos simples pasos.

 1. Entra en tu cuenta de blogger > Diseño >> Editar HTML



2.Encuentra este codigo usando Ctrl+F <div id='content-wrapper'>

4.  Copie y pegue el codigo de abajo antes de <div id='content-wrapper'>

<div class="ciudadblogger-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="http://www.ciudadblogger.info/"></a></li>
  </ul>
</div>

*Reemplace # con tu URL

5. Encuentra la siguiente etiqueta     ]]></b:skin> usando Ctrl+F

6. Pegue el codigo de abajo antes de la etiqueta ]]></b:skin>  (escoge el estilo que te guste.)

 Estilo 1

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

Estilo 2

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

7. Para finalizar guarda la plantilla y listo.
    

Read More