Hosting en inglés

alojamiento web con Webhostinghub
Hosting SSD con Raiola

Pestañas de menú más coloridas en Blogger

 

El siguiente tutorial permite añadir pestañas más coloridas y animadas a nuestro menú en Blogger mediante jQuery. Los pasos del tutorial son los siguientes:

  • Ingresar a Dashboard > Template > Edit HTML > Proceed.
  • Buscar <Head> y añadir inmediatamente abajo el siguiente código:

 
 
  • Buscar el Body class como el mostrado en el siguiente ejemplo:
body {

----

---

)
  • Pegar los siguientes valores dentro del Body class:
body {

margin:0px

padding:0px;

---

---

} 
  • A continuación buscamos <body> <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>.
  • Abajo de este código colocamos los siguientes:
 margin: 0;  padding: 0;

border: 1px solid #cfcfcf;

}

ul#nav {

 border-left: 1px solid #cfcfcf;

 border-right: 0px solid #cfcfcf;

 background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x;

 position: relative;

 font-size: 12px; font-family: helvetica, arial, sans-serif;

 list-style: none;  margin: 0 auto;  padding: 0;

 width: 960px;

}

#nav ul {

 margin: 0; 
}

:focus {

 outline: 0;

}

*html ul#nav { clear: both; height: 1%; }

ul#nav li a {

 display: block;

 float: left;

 text-transform: uppercase;

 font-weight: bold;

 line-height: 33px;

 padding: 0 13px 0 10px;

 color: #333;

 text-decoration: none;

 background: url(http://3.bp.blogspot.com/-GhdMtMAzybA/UEIRnwbrOqI/AAAAAAAAHeU/fShdjYuWetk/s400/menu-rule.png) right 2px no-repeat;

}

*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }

*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }

ul#nav li a:hover, ul#nav li a.open { color: #fff; }

ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }

ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }

ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }

ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }

ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }

ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }

ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }

ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }

ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }

ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }
ul#nav li#link-home a {

 padding: 0 33px 0 10px;

 text-indent: -9999px;

 background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right 0px no-repeat;

}

*html ul#nav li#link-home a { padding: 0; width: 43px; }

ul#nav li#link-home a:hover { background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right -33px no-repeat; }

/* Sub-Vertical Navigation */

ul.sub-nav {

 position: absolute;

 top: 33px;

 left: -1px;

 overflow: hidden;

 width: 960px;

 display: none;

 z-index: 999;

list-style: none;

 padding-left:0px;

}

ul#nav li#mbt ul.sub-nav { background: #6f7987 url(http://4.bp.blogspot.com/-gRDfUUsFFvo/UEIRmB-rQHI/AAAAAAAAHdk/PnpJ42Y5ylk/s400/business-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(http://4.bp.blogspot.com/-x-W--ENCpB4/UEIRmWbi1WI/AAAAAAAAHdw/VWjPx1M9Fow/s400/entertainment-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-news ul.sub-nav { background: #e28a67 url(http://1.bp.blogspot.com/-mow7_vOvv4Y/UEIRwMycevI/AAAAAAAAHeg/Cc6h-0Hv-7Y/s400/news-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-life ul.sub-nav { background: #aa8eac url(http://2.bp.blogspot.com/-UmuzlpeD1EM/UEISysxvDbI/AAAAAAAAHe4/N78T1ifkhug/s400/life-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(http://2.bp.blogspot.com/-ZrSwFUKdaJE/UEIRwVZsdKI/AAAAAAAAHes/M8UCU-GrSoI/s400/technology-subnav-bgd.png) top left repeat-x; }

ul#nav li ul.sub-nav li { float: left;   }

ul#nav li ul.sub-nav li a {

 float: none;

 background: none;

 font-size: 11px;

 text-transform: none;

 color: #fff;

 line-height: 25px;

}

ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }

ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }

ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }

ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }

ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }



  
  
  
  
  
  
 







 
  •  

    • Por último salvamos la plantilla.

     

    Antes de implementar tantos cambios en la plantilla de nuestro blog es recomendable hacer un respaldo por si cometemos un error.

     

    Más Trucos Blogger


    SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

    Escribe tú correo electrónico:

    Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

    Acelera tu sitio

    Leave a Reply