Drop Down Menu

Drop Down Menu

Drop down menu, na sua plataforma blogger. É possível de usar este método de organização num template do blogger, ao contrário do que muitas pessoas pensam em relação a este menu.

É possível construir um menu drop down usando o Jquery, apesar de ser um ficheiro JS Java sript podemos utilizar-lo na plataforma blogger.
Se considerar muito difícil configurar um menu drop down pode descarregar um template já com essa funcionalidade e adaptar-lo da forma que deseja. 

Certamente, se já procurou por menus drop down encontrou o ficheiro java scrip Jquery. Para o utilizar é necessário estar alojado num servidor. Felizmente o google tem-lo num local acessível a todos, podendo assim utilizar em seu beneficio.

Como utilizar um menu drop down

O menu drop down serve essencialmente para melhorar a navegabilidade do seu site ou blog. Se configurar bem, qualquer leitor do seu site poderá chegar mais rapidamente à informação desejada. Pessoalmente utilizo-o com label, tag ou etiquetas como preferir para esse efeito. A navegabilidade melhora também a sua qualidade de SEO on-page, por isso vale sempre a pena perder um pouco de tempo.

Vantagens do drop down

Tal como já referi melhora a navegabilidade do seu site, levando os leitores realmente onde desejam ir. Ao fazer esta melhoria de navegabilidade melhora o seu SEO, mas mais que isso ajuda-o a optar pelas etiquetas certas e objectivas sem a necessidade de repetir-se. Use este método e melhora consideravelmente o seu site.

Como utilizar o drop down

Pode inserir a funcionalidade ao seu template ou simplesmente optar por um já com esta funcionalidade. Se deseja adaptar a um template já existente, precisa de colar alguns códigos de css no seu template.

Viaje até ao seu blog entre em design, editar html e identifique </head>

Em seguida cole o código:

<!--jquery-DD-Menu-Starts--><br /> <style type="text/css"> /* menu styles */ #jsddm { margin: 0; padding: 0} #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #324143; /*verde escuro*/ padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #24313C} #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: #A9C251; /*verde claro*/ color: #24313C} #jsddm li ul li a:hover { background: #8EA344} </style><br /> <br /> <br /> <!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script --><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><br /> <script type="text/javascript"> var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').eq(0).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><br /> <!--jquery-DD-Menu-Stops-http://bloggerstop.net-->


Deve alterar as cores hexagonais consoante o seu template.


Viaje até elementos e página e adicione uma nova aplicação com java. Adapte o código com as suas tags ou páginas de destino.

<!--BODY-CODE--><br /> <ul id="jsddm"><li><a href="#">JavaScript</a><br /> <ul><li><a href="#">1 campo</a></li> <li><a href="#">2 campo</a></li> <li><a href="#">3 campo</a></li> </ul></li> <li><a href="#">Campo A</a><br /> <ul><li><a href="#">A1</a></li> <li><a href="#">A2</a></li> <li><a href="#">A3</a></li> <li><a href="#">A4</a></li> <li><a href="#">A5</a></li> </ul></li> <li><a href="#">B1</a></li> <li><a href="#">B2</a></li> <li><a href="http://www.ganhar-dinheiro-net.com/">Ajuda</a></li> </ul>

Substitua o # pela página que deseja que seja visitada através do menu drop down.