Bueno, hoy les traigo un truco muy simple. Es un poco extraido de internet, y un poco hecho por mi, (mas hecho por mi que por internet)...
aclaro eso, porque este post no lleva fuente, ya que es un truco que aprendi con el tiempo y quiero enseñarselo a ustedes.
LA BOTONERA QUEDA ALGO ASI
Lo primero que hay que hacer para poner esta botonera en su blog es entrar en la plantilla del blog a tocarla un poco.
Van a Panel, seleccionan Editar > Edicion de HTML > y pegan esto justo despues de esta linea, (no remplazen la linea, pegenlo a continuacion).
LO QUE TIENEN QUE BUSCAR EN SU PLANTILLA ES EL OUTTER WRAPPER.
VA A APARECER ALGO ASI (esto es en mi blog, puede cambiar segun la plantilla que hayan escogido)
LA LINEA ES:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
BUENO UNA VEZ QUE ENCONTRARON SU OUTTER WRAPPER PEGAN ESTO JUSTO DESPUES DE ESO.
/*-- (Menú) --*/
.nav, .nav * {
margin:0px;
padding:0px;
}
#horiz-menu { /* this is a z-index ie6 and ie7 bug fix */
float: left;
width: 900px;
color: #FFFFFF;
}
.moo-menu {
margin: 0px;
padding: 0px;
float: left;
width: 894px;
}
.moo-menu-wrap {
background: transparent;
float: left;
width: 894px;
}
.nav {
float:left;
margin: 0px;
list-style-type: none;
position: relative;
background: #000000;
}
.nav ul {
float: left;
position: relative;
margin: 0px;
width: 125px;
padding: 0px;
}
.nav ul ul{
margin: 0px;
padding: 0px;
position: relative;
float: left;
width: 250px;
}
.nav li {
float:left;
list-style:none;
font-size: 0.6875em;
line-height: 25px;
position: relative;
display: inline;
background: #000000;
text-transform: capitalize;
margin: 0px;
text-align: center;
font-weight: bold;
}
.nav li li {
float:left;
font-size: 1em;
display: block;
line-height: 17px;
text-transform: capitalize;
margin: 0px;
position: relative;
}
.nav li li li {
font-size: 1em;
position: relative;
float: left;
line-height: 17px;
text-transform: capitalize;
margin: 0px;
}
.nav li a {
color: #FFFFFF;
text-decoration: none;
display: block;
float: left;
height: 25px;
padding-right: 12px;
padding-left: 12px;
background: #000000;
border-right: 1px solid #454545;
}
.nav li a:hover {
color: #FFFFFF;
text-decoration: none;
display: block;
float: left;
height: 25px;
padding-right: 12px;
padding-left: 12px;
background: #333333;
border-right: 1px solid #454545;
}
.nav li li a {
display:block;
text-decoration:none;
float:left;
background: #333333;
color: #FFFFFF;
padding: 3px 5px;
height: auto;
position: relative;
border-right: 1px solid #191919;
border-bottom: 1px solid #191919;
width: 114px;
}
.nav li li a:hover {
display:block;
padding: 3px 5px;
text-decoration:none;
float:left;
background: #565656;
color: #FFFFFF;
height: auto;
position: relative;
border-right: 1px solid #191919;
border-bottom: 1px solid #191919;
width: 114px;
}
.nav li li li a {
display:block;
padding: 3px 5px;
text-decoration:none;
float:left;
background: #333333;
color: #FFFFFF;
height: auto;
width: 114px;
position: relative;
border-right: 1px solid #191919;
border-bottom: 1px solid #191919;
}
.nav li li li a:hover {
display:block;
padding: 3px 5px;
text-decoration:none;
float:left;
height: auto;
background: #565656;
color: #FFFFFF;
width: 114px;
position: relative;
border-right: 1px solid #191919;
border-bottom: 1px solid #191919;
}
div#horiz-menu li:hover li,
div#horiz-menu li.sfHover li,
div#horiz-menu li.active:hover li,
div#horiz-menu li.active.sfHover li {
background-image: none;
}
div#horiz-menu li:hover li a,
div#horiz-menu li.sfHover li a,
div#horiz-menu li.active:hover li a,
div#horiz-menu li.active.sfHover li a {
background-image: none;
}
.nav li ul {
top:-999em;
position:absolute;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 25px;
left: 0px;
position: absolute;
}
.nav li:hover li ul,
.nav li.sfHover li ul {
top:-999em;
position: absolute;
}
.nav li li:hover ul,
.nav li li.sfHover ul {
top:0px;
position: relative;
left: 0px;
}
BIEN AHORA TIENEN QUE BUSCAR ESTA LINEA Y PEGAR EL SIGUIENTE CODIGO.
LA LINEA QUE TIENEN QUE BUSCAR ES :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TEMPLATE (cabecera)' type='Header'/>
</b:section>
</div>
Y TIENEN QUE PEGAR ESTE CODIGO A CONTINUACION:
<!-- (menu) -->
<div id='horiz-menu'>
<div class='moo-menu'>
<div class='moo-menu-wrap'>
<ul class='nav'>
<li class='navlinks'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li class='navlinks'><a href='URL BOTON'>BOTONN n°2</a></li>
<li class='navlinks'><a href='URL BOTON'>BOTON n°3</a></li>
<li class='navlinks'><a href='URL BOTON'>BOTON n°4</a></li>
<li class='navlinks'><a href='URL BOTON'>BOTON n°5</a></li>
<li class='navlinks'><a href='URL BOTON'>BOTON n°6</a></li>
</ul>
</div>
</div>
</div>
RECUERDEN CAMBIAR TODO LO QUE DIGA "URL BOTON" Y "BOTON n°"
EN ESTE CASO LES PUSE 6 BOTONES, PERO PUEDEN DISMINUIR O AUMENTAR LA CANTIDAD SOLO COPIEN Y PEGEN <li class='navlinks'><a href='URL BOTON'>BOTON n°</a></li> O BORRENLO COMO QUEDE MAS COMODO.
Esta botonera queda algo asi, por defecto la diseñe color negro.
Pueden cambiarle los colores, y eso es un poco mas dificil y largo de explicar, y lo dejo para otro post
ESPERO QUE LES HAYA SERVIDO ESTO Y QUE LO USEN.
LES DEJO UNA PAGINA CON COLORES EN HTML. PARA QUE PRUEBEN, RECUERDEN QUE CUANDO PEGUEN TODO, Y HAGAN TODO LO QUE LES DIJE NO LE PONGAN "GUARDAR PLANTILLA" DE UNA, VALLAN VIENDO COMO QUEDA, APRIETEN EN "VISTA PREVIA". (asi no arruinan su blog llegado al caso de que no les funque).
Pagina con colores html
http://www.december.com/html/spec/colorhues.html
Comenten si les sirvio. Si no les sirvio tambien comenten, me costo bastante hacer este post, y diseñar esa botonera.
~taquito