Colocarlo es bastante sencillo, entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pegas el código del menú que más te agrade.
Si queréis verlo en acción podéis ir mi probador de códigos copiar el código
y pegadlo en el probador y lo veréis tal como es:
Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
Menú 1
<style>#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8jmXfq9DNv2BSdZebez_Vwz_XeUhLzmtoi7Shwb3zC6GsPUYHeKaq70Rezs2W_KoNHoPvKK2d8O4b-iF4MFQKlus7gcbeRn09yyus4NgiJ_7Br7laupjbdbaRm5VtSBUlSLk1SZVSJ78/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8jmXfq9DNv2BSdZebez_Vwz_XeUhLzmtoi7Shwb3zC6GsPUYHeKaq70Rezs2W_KoNHoPvKK2d8O4b-iF4MFQKlus7gcbeRn09yyus4NgiJ_7Br7laupjbdbaRm5VtSBUlSLk1SZVSJ78/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }</style>
<div id="menu8"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>
<div id="menu8"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>
Menú 2
<style>
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75pnpc2WvRs3yAQyXVZZgg0r3LX6JAlaa-rFPwyYS_YwQTGRzED8Pmc0OBsqYYCDlC4HX3TgdJ88cS0rG445o6a1ZJZAUfyE7QRjM6tRwxNfeSegAlVdeePTvzGySVNtBFuVz7HqoaUA/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75pnpc2WvRs3yAQyXVZZgg0r3LX6JAlaa-rFPwyYS_YwQTGRzED8Pmc0OBsqYYCDlC4HX3TgdJ88cS0rG445o6a1ZJZAUfyE7QRjM6tRwxNfeSegAlVdeePTvzGySVNtBFuVz7HqoaUA/s800/menu14.gif); padding: 8px 0 0 10px; }
</style>
<div id="menu2"><ul><li><a href="#1">Entrada 1</a></li> <li><a href="#2">Entrada 2</a></li> <li><a href="#3">Entrada 3</a></li> <li><a href="#4">Entrada 4</a></li> <li><a href="#5">Entrada 5</a></li> </ul></div>
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75pnpc2WvRs3yAQyXVZZgg0r3LX6JAlaa-rFPwyYS_YwQTGRzED8Pmc0OBsqYYCDlC4HX3TgdJ88cS0rG445o6a1ZJZAUfyE7QRjM6tRwxNfeSegAlVdeePTvzGySVNtBFuVz7HqoaUA/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75pnpc2WvRs3yAQyXVZZgg0r3LX6JAlaa-rFPwyYS_YwQTGRzED8Pmc0OBsqYYCDlC4HX3TgdJ88cS0rG445o6a1ZJZAUfyE7QRjM6tRwxNfeSegAlVdeePTvzGySVNtBFuVz7HqoaUA/s800/menu14.gif); padding: 8px 0 0 10px; }
</style>
<div id="menu2"><ul><li><a href="#1">Entrada 1</a></li> <li><a href="#2">Entrada 2</a></li> <li><a href="#3">Entrada 3</a></li> <li><a href="#4">Entrada 4</a></li> <li><a href="#5">Entrada 5</a></li> </ul></div>
Menú 3
<style>
#menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCu73oLbw6IvljO1aS5JOdEzudFhtHObx7c9mD5AYtOf3Nu0msa8UucqzGRbpFgN3OGnIBZud-WIRf62vPq3AmYX690ZZMqIIAuP26s0XayMf0gTd7kZQzhtodRK1qcDET_snWuKF0T2M/s800/menu4.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCu73oLbw6IvljO1aS5JOdEzudFhtHObx7c9mD5AYtOf3Nu0msa8UucqzGRbpFgN3OGnIBZud-WIRf62vPq3AmYX690ZZMqIIAuP26s0XayMf0gTd7kZQzhtodRK1qcDET_snWuKF0T2M/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
</style>
<div id="menu1"><ul><li><a href="#1">Entrada 1</a></li> <li><a href="#2">Entrada 2</a></li> <li><a href="#3">Entrada 3</a></li> <li><a href="#4">Entrada 4</a></li> <li><a href="#5">Entrada 5</a></li> </ul></div>
#menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCu73oLbw6IvljO1aS5JOdEzudFhtHObx7c9mD5AYtOf3Nu0msa8UucqzGRbpFgN3OGnIBZud-WIRf62vPq3AmYX690ZZMqIIAuP26s0XayMf0gTd7kZQzhtodRK1qcDET_snWuKF0T2M/s800/menu4.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCu73oLbw6IvljO1aS5JOdEzudFhtHObx7c9mD5AYtOf3Nu0msa8UucqzGRbpFgN3OGnIBZud-WIRf62vPq3AmYX690ZZMqIIAuP26s0XayMf0gTd7kZQzhtodRK1qcDET_snWuKF0T2M/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
</style>
<div id="menu1"><ul><li><a href="#1">Entrada 1</a></li> <li><a href="#2">Entrada 2</a></li> <li><a href="#3">Entrada 3</a></li> <li><a href="#4">Entrada 4</a></li> <li><a href="#5">Entrada 5</a></li> </ul></div>
Menú 4
<style>
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6oBrVCuxXJkhw-iKixLP0IQ7S-vQ5ozzM0OSk5yjlLxQJdJEWARYcD21xYIcTpHVFSSlMRQyAgahxbvLkXYjA3buhpyZXMdXnbBhoi3ejpA24DD_7Z9QFkCJoK8f9bO6HCykNeiAlvc/s800/menu6.gif); padding: 8px 0 0 10px; } #menu4 li a:hover, #menu4 li #current, #menu4 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6oBrVCuxXJkhw-iKixLP0IQ7S-vQ5ozzM0OSk5yjlLxQJdJEWARYcD21xYIcTpHVFSSlMRQyAgahxbvLkXYjA3buhpyZXMdXnbBhoi3ejpA24DD_7Z9QFkCJoK8f9bO6HCykNeiAlvc/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
</style>
<div id="menu4"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6oBrVCuxXJkhw-iKixLP0IQ7S-vQ5ozzM0OSk5yjlLxQJdJEWARYcD21xYIcTpHVFSSlMRQyAgahxbvLkXYjA3buhpyZXMdXnbBhoi3ejpA24DD_7Z9QFkCJoK8f9bO6HCykNeiAlvc/s800/menu6.gif); padding: 8px 0 0 10px; } #menu4 li a:hover, #menu4 li #current, #menu4 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6oBrVCuxXJkhw-iKixLP0IQ7S-vQ5ozzM0OSk5yjlLxQJdJEWARYcD21xYIcTpHVFSSlMRQyAgahxbvLkXYjA3buhpyZXMdXnbBhoi3ejpA24DD_7Z9QFkCJoK8f9bO6HCykNeiAlvc/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
</style>
<div id="menu4"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>
Menú-5
<style>
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ze93UmeY6l1VfuTOv-XH3sX9DY4IVKAag1PJMUYY75MzjOydwhAkDRFfy_4T3B8R7xsTz1qxIy_-pcljUay6migMfJks8OrU_2H4S_wdNR3U7GXbgA0sWjSHHNC-pyuKm1o9UI9Kmd8/s800/menu12.gif); padding: 10px 0 0 35px; } #menu5 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ze93UmeY6l1VfuTOv-XH3sX9DY4IVKAag1PJMUYY75MzjOydwhAkDRFfy_4T3B8R7xsTz1qxIy_-pcljUay6migMfJks8OrU_2H4S_wdNR3U7GXbgA0sWjSHHNC-pyuKm1o9UI9Kmd8/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
</style>
<div id="menu5"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ze93UmeY6l1VfuTOv-XH3sX9DY4IVKAag1PJMUYY75MzjOydwhAkDRFfy_4T3B8R7xsTz1qxIy_-pcljUay6migMfJks8OrU_2H4S_wdNR3U7GXbgA0sWjSHHNC-pyuKm1o9UI9Kmd8/s800/menu12.gif); padding: 10px 0 0 35px; } #menu5 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ze93UmeY6l1VfuTOv-XH3sX9DY4IVKAag1PJMUYY75MzjOydwhAkDRFfy_4T3B8R7xsTz1qxIy_-pcljUay6migMfJks8OrU_2H4S_wdNR3U7GXbgA0sWjSHHNC-pyuKm1o9UI9Kmd8/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
</style>
<div id="menu5"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>
Menú 6
<style>
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin-top: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFwrZFnvh76B11xYUf1qs1BAWQdOe5LzGXzxmDx_yqInOB1hr2i1uEhcQ01Kt6gFgXN_VSqQ9sRbyMGn0RgOOReos-tXBAwWt3tCfm-uOdVEPeCOqUdlenHIpoZp61oPjA-wapRjh9LI/s800/menu9.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFwrZFnvh76B11xYUf1qs1BAWQdOe5LzGXzxmDx_yqInOB1hr2i1uEhcQ01Kt6gFgXN_VSqQ9sRbyMGn0RgOOReos-tXBAwWt3tCfm-uOdVEPeCOqUdlenHIpoZp61oPjA-wapRjh9LI/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu6 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFwrZFnvh76B11xYUf1qs1BAWQdOe5LzGXzxmDx_yqInOB1hr2i1uEhcQ01Kt6gFgXN_VSqQ9sRbyMGn0RgOOReos-tXBAwWt3tCfm-uOdVEPeCOqUdlenHIpoZp61oPjA-wapRjh9LI/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
</style>
<div id="menu6"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin-top: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFwrZFnvh76B11xYUf1qs1BAWQdOe5LzGXzxmDx_yqInOB1hr2i1uEhcQ01Kt6gFgXN_VSqQ9sRbyMGn0RgOOReos-tXBAwWt3tCfm-uOdVEPeCOqUdlenHIpoZp61oPjA-wapRjh9LI/s800/menu9.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFwrZFnvh76B11xYUf1qs1BAWQdOe5LzGXzxmDx_yqInOB1hr2i1uEhcQ01Kt6gFgXN_VSqQ9sRbyMGn0RgOOReos-tXBAwWt3tCfm-uOdVEPeCOqUdlenHIpoZp61oPjA-wapRjh9LI/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu6 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFwrZFnvh76B11xYUf1qs1BAWQdOe5LzGXzxmDx_yqInOB1hr2i1uEhcQ01Kt6gFgXN_VSqQ9sRbyMGn0RgOOReos-tXBAwWt3tCfm-uOdVEPeCOqUdlenHIpoZp61oPjA-wapRjh9LI/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
</style>
<div id="menu6"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>
Después de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 17-08-2019
Fuente; amorsevillista
Publicado por;
0 comentarios