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.
Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo 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/AVvXsEiK1zhZbfyqvY_9Rhyg_4RGKjxLz_1nEaFVqTTRFKh-XAWRePozsBBpuBqpqZPVz-7Zu-aFh0m9-TXNQdav_OGO0xt3xvJ79MVTfzWm9kVPjk77EH8aN3Zy4tWIddB0sWvuirXJGd1jtiE/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1zhZbfyqvY_9Rhyg_4RGKjxLz_1nEaFVqTTRFKh-XAWRePozsBBpuBqpqZPVz-7Zu-aFh0m9-TXNQdav_OGO0xt3xvJ79MVTfzWm9kVPjk77EH8aN3Zy4tWIddB0sWvuirXJGd1jtiE/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/AVvXsEixCC-UhM1aeDYpB6P8CspnbIs5o8CReBpPaRjdJf7Dko4HBlXfXDQnNwy0I8M1wxh3AdOvg4nKh6KdQvLEV2gOXX8Yvl8gNK8VQN5xukz-OMyj2mIYeOoaC-z8sdAtQyHU9m9isikEJUk/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/AVvXsEixCC-UhM1aeDYpB6P8CspnbIs5o8CReBpPaRjdJf7Dko4HBlXfXDQnNwy0I8M1wxh3AdOvg4nKh6KdQvLEV2gOXX8Yvl8gNK8VQN5xukz-OMyj2mIYeOoaC-z8sdAtQyHU9m9isikEJUk/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/AVvXsEixCC-UhM1aeDYpB6P8CspnbIs5o8CReBpPaRjdJf7Dko4HBlXfXDQnNwy0I8M1wxh3AdOvg4nKh6KdQvLEV2gOXX8Yvl8gNK8VQN5xukz-OMyj2mIYeOoaC-z8sdAtQyHU9m9isikEJUk/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/AVvXsEixCC-UhM1aeDYpB6P8CspnbIs5o8CReBpPaRjdJf7Dko4HBlXfXDQnNwy0I8M1wxh3AdOvg4nKh6KdQvLEV2gOXX8Yvl8gNK8VQN5xukz-OMyj2mIYeOoaC-z8sdAtQyHU9m9isikEJUk/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/AVvXsEjTrTC1Bz9bmTx_FgPoImPLMBgVPrzCyQum-D3t-bKB1AE0GoovwATWT7_sIpCvIPH_R0h9ATO7ua6AYFTWdj2v0JGw4xe0NjbOBCqToLTSmOehu9CJv96um6nhOqX2AiIdDPY4VNqzznA/s800/menu4.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrTC1Bz9bmTx_FgPoImPLMBgVPrzCyQum-D3t-bKB1AE0GoovwATWT7_sIpCvIPH_R0h9ATO7ua6AYFTWdj2v0JGw4xe0NjbOBCqToLTSmOehu9CJv96um6nhOqX2AiIdDPY4VNqzznA/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/AVvXsEjTrTC1Bz9bmTx_FgPoImPLMBgVPrzCyQum-D3t-bKB1AE0GoovwATWT7_sIpCvIPH_R0h9ATO7ua6AYFTWdj2v0JGw4xe0NjbOBCqToLTSmOehu9CJv96um6nhOqX2AiIdDPY4VNqzznA/s800/menu4.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrTC1Bz9bmTx_FgPoImPLMBgVPrzCyQum-D3t-bKB1AE0GoovwATWT7_sIpCvIPH_R0h9ATO7ua6AYFTWdj2v0JGw4xe0NjbOBCqToLTSmOehu9CJv96um6nhOqX2AiIdDPY4VNqzznA/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/AVvXsEiwgPXz0M2MD9T5a45_vyWq_RH-ZOW12KC7c47eb39jdWuLOlnJNg15b_Irf9XF4OwNln8Z77m7QVK3nSWaoje_45IS5FYLmuraJaM0Ep1BkHP_rflYsdr6FQtrThp8l7jz5aZqMsItkSE/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/AVvXsEiwgPXz0M2MD9T5a45_vyWq_RH-ZOW12KC7c47eb39jdWuLOlnJNg15b_Irf9XF4OwNln8Z77m7QVK3nSWaoje_45IS5FYLmuraJaM0Ep1BkHP_rflYsdr6FQtrThp8l7jz5aZqMsItkSE/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/AVvXsEiwgPXz0M2MD9T5a45_vyWq_RH-ZOW12KC7c47eb39jdWuLOlnJNg15b_Irf9XF4OwNln8Z77m7QVK3nSWaoje_45IS5FYLmuraJaM0Ep1BkHP_rflYsdr6FQtrThp8l7jz5aZqMsItkSE/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/AVvXsEiwgPXz0M2MD9T5a45_vyWq_RH-ZOW12KC7c47eb39jdWuLOlnJNg15b_Irf9XF4OwNln8Z77m7QVK3nSWaoje_45IS5FYLmuraJaM0Ep1BkHP_rflYsdr6FQtrThp8l7jz5aZqMsItkSE/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/AVvXsEiTxkTBNOSweqp6LyH7sMMLyTvQAIwlGa__7NUQPyClkRX-Rkywg3cvfjKjZLZBH3jdJtSDazLM1_JuO7UybCjmsohLXM9w3dkLcXbGjRI3fc0bdOj9lo6wEVCGfTOYkZQxKgaZ6V8esmM/s800/menu12.gif); padding: 10px 0 0 35px; } #menu5 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxkTBNOSweqp6LyH7sMMLyTvQAIwlGa__7NUQPyClkRX-Rkywg3cvfjKjZLZBH3jdJtSDazLM1_JuO7UybCjmsohLXM9w3dkLcXbGjRI3fc0bdOj9lo6wEVCGfTOYkZQxKgaZ6V8esmM/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/AVvXsEiTxkTBNOSweqp6LyH7sMMLyTvQAIwlGa__7NUQPyClkRX-Rkywg3cvfjKjZLZBH3jdJtSDazLM1_JuO7UybCjmsohLXM9w3dkLcXbGjRI3fc0bdOj9lo6wEVCGfTOYkZQxKgaZ6V8esmM/s800/menu12.gif); padding: 10px 0 0 35px; } #menu5 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxkTBNOSweqp6LyH7sMMLyTvQAIwlGa__7NUQPyClkRX-Rkywg3cvfjKjZLZBH3jdJtSDazLM1_JuO7UybCjmsohLXM9w3dkLcXbGjRI3fc0bdOj9lo6wEVCGfTOYkZQxKgaZ6V8esmM/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/AVvXsEjaw9-_Vod8Ra_gi5L___sfSWKGKUSBf0wOzUWdHwY2Kb_3dhkYdcKYGsCBvxDrhShO7jqPvo1Xwt1Gn_7Emdatei8_NjFxpZvijPT6c8JrYI9sn1pEguWX6oyJkhefE1XRJupVsoDIxws/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/AVvXsEjaw9-_Vod8Ra_gi5L___sfSWKGKUSBf0wOzUWdHwY2Kb_3dhkYdcKYGsCBvxDrhShO7jqPvo1Xwt1Gn_7Emdatei8_NjFxpZvijPT6c8JrYI9sn1pEguWX6oyJkhefE1XRJupVsoDIxws/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/AVvXsEjaw9-_Vod8Ra_gi5L___sfSWKGKUSBf0wOzUWdHwY2Kb_3dhkYdcKYGsCBvxDrhShO7jqPvo1Xwt1Gn_7Emdatei8_NjFxpZvijPT6c8JrYI9sn1pEguWX6oyJkhefE1XRJupVsoDIxws/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/AVvXsEjaw9-_Vod8Ra_gi5L___sfSWKGKUSBf0wOzUWdHwY2Kb_3dhkYdcKYGsCBvxDrhShO7jqPvo1Xwt1Gn_7Emdatei8_NjFxpZvijPT6c8JrYI9sn1pEguWX6oyJkhefE1XRJupVsoDIxws/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/AVvXsEjaw9-_Vod8Ra_gi5L___sfSWKGKUSBf0wOzUWdHwY2Kb_3dhkYdcKYGsCBvxDrhShO7jqPvo1Xwt1Gn_7Emdatei8_NjFxpZvijPT6c8JrYI9sn1pEguWX6oyJkhefE1XRJupVsoDIxws/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/AVvXsEjaw9-_Vod8Ra_gi5L___sfSWKGKUSBf0wOzUWdHwY2Kb_3dhkYdcKYGsCBvxDrhShO7jqPvo1Xwt1Gn_7Emdatei8_NjFxpZvijPT6c8JrYI9sn1pEguWX6oyJkhefE1XRJupVsoDIxws/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>
Configuración:
width: 200px Anchura del menú (aumentar o disminuir segun sidebar)
<li><a href="#1">Entrada 1</a></li>
#1 Url de la dirección que desees mostrar
Entrada 1 Título de la palabra que desees mostrar
Despues de haber insertado el código, un clic en "Guardar"
Fecha de la Publicación; 05-08-2019
Fuente; amorsevillista
Publicado por;
0 comentarios