Orangee✿Pruebas: ✦ MENU CUTE PERSONALIZABLE PARA TU BLOG ✦ #GADGET #CODIGO

Bienvenidos a una publicación nueva para personalizar blogger. Hoy les voy a compartir este menú que está muy bonito muy sencillo de aplicar Y la verdad es que queda bien lo puedes personalizar con los colores que tú quieras con las etiquetas también que tú quieras. Ojalá que te guste y que lo puedas aplicar en tu blog cualquier duda cualquier pregunta puedes dejarla en los comentarios del video de YouTube que te dejo en esta misma entrada. Muchísimas gracias por tu visita y vuelve pronto.

1° VAMOS A ABRIR UN BLOC DE NOTAS PARA EDITAR LOS VALORES:

Copia y pega el siguiente código para empezar a editar:

/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{

width:250;

text align:center;

list-style-type: none;

font: normal 20px Century gothic;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

overflow: auto; /*force hasLayout in IE7 */

color: white;

text-align:center;

text-decoration: none;

padding: 0px;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{

background-color: #CDFFE8; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

background-color: #FFCDF0;}

/* Holly Hack for IE \*/

* html .sidebarmenu ul li { float: left; height: 1%; }

* html .sidebarmenu ul li a { height: 1%; }

/* End */

</style>

//Nested Side Bar Menu (Mar 20th, 09)

//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){

for (var i=0; i<menuids.length; i++){

var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

for (var t=0; t<ultags.length; t++){

ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"

if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu

ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item

else //else if this is a sub level submenu (ul)

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

ultags[t].parentNode.onmouseover=function(){

this.getElementsByTagName("ul")[0].style.display="block"

}

ultags[t].parentNode.onmouseout=function(){

this.getElementsByTagName("ul")[0].style.display="none"

}

for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

ultags[t].style.visibility="visible"

ultags[t].style.display="none"

}

if (window.addEventListener)

window.addEventListener("load", initsidebarmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", initsidebarmenu)

</script>

<li><a href="URL">NOMBRE</a></li>

</ul>

</div>

2° VAMOS A MODIFICAR ESTOS DOS VALORES QUE ESTAN DEL MISMO COLOR QUE VES EN LA IMAGEN, BUSCA LOS CODIGOS DE LOS COLORES QUE TE GUSTEN EN ESTA WEB DA CLIC AQUÍ.

background-color: #CDFFE8; /*background of tabs (default state)*/}

background-color: #FFCDF0;}