Como Añadir Etiquetas de Menu Con Efecto Mouseover

Quieres darle un toque especial a tu blog de blogger y presentar area de informacion adicional a tus lectores para que puedan dar lectura a topicos especiales de tu blog.Con este simple script puedes hacerlo y brindarle una experiencia exclusiva a los visitantes a la vez expones material de interes de tu blog a los visitantes. 

Como Añadir Etiquetas de Menu con efecto Mouseover a tu blog de Blogger

1.Entra a Intreface de blogger--> Diseño- -> Editar HTML

2.Busca donde esta  esta etiqueta </head> .

3.Ahora anada el codigo de abajo arriba de esta etiqueta</head> .

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/bloggertricksandtoolz/mouseovertabs.css" />
<script src="https://sites.google.com/site/bloggertricksandtoolz/mouseovertabs.js" type="text/javascript">

/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
* Bloggerized by - Sameera- http://www.bloggertricksandtoolz.com/
***********************************************/
</script>

4.Dale Click a Guardar Plantilla;

5.Ahora vaya a diseño-->> Añadir un  Gadget-->> Seleciona Html Java Script-->> Pega el codigo de abajo

<div id="mytabsmenu" class="tabsmenuclass">

<ul>
<li><a href="Tu Enlace 1" rel="gotsubmenu[selected]">Tu Texto 1</a></li>
<li><a href="Tu Enlace 2" rel="gotsubmenu">Tu texto  2</a></li>

<li><a href="Tu Enlace 3">Tu texto 3</a></li>
</ul>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->

<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

Nota: ReplazaTu Enlace,Tu Texto , con tu contenido.

7.Ahora guarda tu "Html Java scrpit" y Listo.

Read More