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(https://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(https://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(https://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(https://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(https://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(https://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(https://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(https://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(https://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