Menú2







Consejos, Trucos, Tutoriales ...



El momento que muchos estabais esperando ha llegado. Por eso hoy al fin os traigo esta nueva sección. Me habéis estado pidiendo mucho que os esplique como se hace el menú que tengo instalado en el blog. Así que aquí tenéis toda la información necesaria.


Partes en amarillo: son partes que tienes que buscar en el código
En rojo: partes que puedes modificar colocando tus datos
En verde: para indicar desde donde tienes que copiar no copies el texto Verde


Pasos:

1 Ir a blogger

2 Da un clic en “Plantilla”, luego un clic en “Editar HTML

3 Busca este código ]]></b:skin> y arriba de el inserta el siguiente código CSS


Copia desde Aquí

/* Código para menu
------------------------------ */



#jsddm {
margin: 0;
padding: 15px;
z-index:30;
position:static,top;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient
(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

Copia hasta Aquí


4. Busca: </script> y arriba de el inserta el siguiente código:

Copia desde Aquí

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});

document.onclick = jsddm_close;
//]]>
</script>

Copia hasta Aquí

Ahora dale un clic en “Guardar plantilla”.


5. En diseño añade un gradget, en el lugar que quieres colocar el menu: HTML/Javascript

<style>
#hcr {
position: relative;
top:20px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;

}
.hcrcontent {
float:left;
border:0px solid #FF2E2E;
background:#0000;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">
<div class="tabs section" id="crosscol"><div class="widget PageList" id="PageList1">
<h2>Páginas</h2>
<div class="widget-content">
<ul id="jsddm">
<li><a href="http://noneysagraw.blogspot.com.es/">Inicio</a>
</li>

<li><a href="http://noneysagraw.blogspot.com.es/p/mis-libros.html">Mis Libros</a>
<ul><li><a href="http://noneysagraw.blogspot.com.es/2013/06/mis-libros.html">Pedacitos de mí</a></li></ul>
</li>


<li><a href="http://noneysagraw.blogspot.com.es/">Momentos de Lectura</a>
<ul>
<li><a href="http://noneysagraw.blogspot.com.es/p/conoces.html">Conoces a... </a></li>
<li><a href="http://noneysagraw.blogspot.com.es/p/resenas.html">Reseñas</a></li>
<li><a href="http://noneysagraw.blogspot.com.es/p/compartiendo-mi-sueno.html">Compartiendo mi sueño</a></li>
<li><a href="http://noneysagraw.blogspot.com.es/p/punto-de.html">Punto libro</a></li>
</ul>
</li>




<li><a href="http://noneysagraw.blogspot.com.es/2012/07/coreo-para-recibir-las-cartas.html">Contacto</a></li>
</li></ul>

<div style="float:right;"></div></div></div></div></div></div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<br />
<br /><br />
<br /><br />
<br />
</span></span>


No hay comentarios:

Todo blog se hace grande gracias a los comentarios, por eso os animo a todos a dar vuestra opinión, estaré encantada de leer y responder todos vuestros comentarios.
Pero recordar que cuando deis vuestra opinión, sea siempre con respeto y sin ofender a los demás. Cualquier comentario ofensivo desaparecerá, al igual que los mensajes de Spam en el blog (PUBLICIDAD) Ni de ninguna otra cosa que no tenga que ver con la entrada, Si quieres publicidad o cualquier otra cosa envía un E-mail a: marymartinoficial@hotmail.com

Gracias por tu comentario.