Home
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Ya vimos un gran repertorio de menúes para Blogger, ahora vamos a ver uno horizontal Es un simple código CSS que vamos a insertar en un solo widget,
lo que hará nuestro menú desplegable para blogger es mostrar texto e imágenes con relación a nuestras mejores categorías de temas que queramos mostrar en nuestro menú.
.
La verdad es que es muy sencillo de hacer, no requiere nada raro y lo vamos a agregar en un gadget html directamente.
Para implementarlo 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
Despues de haber insertado el código, un clic en "Guardar"
Ya vimos un gran repertorio de menúes para Blogger, ahora vamos a ver uno horizontal Es un simple código CSS que vamos a insertar en un solo widget,
lo que hará nuestro menú desplegable para blogger es mostrar texto e imágenes con relación a nuestras mejores categorías de temas que queramos mostrar en nuestro menú.
.
La verdad es que es muy sencillo de hacer, no requiere nada raro y lo vamos a agregar en un gadget html directamente.
Para implementarlo 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
<style>
div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraOdP-dmjBGOonjA3l62yhisiSSy2p-HXxFy7uX2g9zKP2Yjp5Pgadm5v4DQcm1jc-Eoxyb9_YhBPy0zsTyr-afN-9ATAK1d3lkkQOXnCdJw14E3_VfUY0YQNKL1Z0XhwqWxF-1wHEiQ/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ICkUPjMDVnX5b20HaqF17sJBIyh35Kg6DOCfyY68Ufe0AidtaTRUH-Q8wN6T4ro7s9o23wfg0aMrmhrFgwiUxc6uCf7U9LuwEltTELAKBon5CHpHyKbD2lPo5raj2IYSgKkKLD7YsWQ/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; }
div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }
</style>
<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='#'>Menu 1</a>
<a href='#'>Menu 2</a>
<a href='#'>Menu 3</a>
<a href='#'>Menu 4</a>
<a href='#'>Menu 5</a>
<a class="end"> </a>
div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraOdP-dmjBGOonjA3l62yhisiSSy2p-HXxFy7uX2g9zKP2Yjp5Pgadm5v4DQcm1jc-Eoxyb9_YhBPy0zsTyr-afN-9ATAK1d3lkkQOXnCdJw14E3_VfUY0YQNKL1Z0XhwqWxF-1wHEiQ/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ICkUPjMDVnX5b20HaqF17sJBIyh35Kg6DOCfyY68Ufe0AidtaTRUH-Q8wN6T4ro7s9o23wfg0aMrmhrFgwiUxc6uCf7U9LuwEltTELAKBon5CHpHyKbD2lPo5raj2IYSgKkKLD7YsWQ/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; }
div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }
</style>
<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='#'>Menu 1</a>
<a href='#'>Menu 2</a>
<a href='#'>Menu 3</a>
<a href='#'>Menu 4</a>
<a href='#'>Menu 5</a>
<a class="end"> </a>
Despues de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 18-08-2019
Fuente; bloguero-tutorial
Publicado por;
0 comentarios