Colocando Menu Expansivel no blog
Autor: KIRA | Publicado: 2011-05-23T12:14:00-07:00

Nesse tutorial a pedidos,de como criar um menu expansivel no blog que seria uma imagem que tu clica e aparece todas as categorias de seu blog.fazendo isso com menu.Vamos lá.OBS:SITES/BLOG QUE UTILIZAM JS DE PARCERIA O CODIGO DO MENU NÃO VAI FUNCIONARPrimeiro vocês iram ir no editar html e procurar por &lt;/head&gt; e irá colar o codigo seguinte acima de &lt;/head&gt;&lt;style type='text/css'&gt;.texthidden {display:inline}.shown {display:block}&lt;/style&gt;&lt;script type='text/javascript'&gt;document.write('&lt;style&gt;.texthidden {display:none} &lt;/style&gt;');&lt;/script&gt;&lt;script type='text/Javascript'&gt;function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}&lt;/script&gt;&lt;br /&gt; &lt;style type='text/css'&gt; #dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff; width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;} #dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase; font-weight:bold;background:#F06214 url() repeat-x bottom left; padding:0 0 0 20px;} #dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;} #dolphinnav ul li{display:block;float:left;margin:0 1px;} #dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none; padding:0 0 0 20px;height:33px;} #dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;} #dolphinnav ul li a:hover{color:#000000; background:transparent url() repeat-x bottom left;} #dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;} #dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6; background:#ffffff url() no-repeat top left;line-height:275%;} #dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto; background:#805E5E url() no-repeat top right;height:33px;} &lt;/style&gt;Depois é so adicionar um novo gadget e colocar o seguinte codigo:&lt;center&gt;&lt;a href="javascript:void(0);" onclick="expandcollapse('favoritos2')"&gt;&lt;img border="0" src="http://downstotal.webs.com/categorias.png" /&gt;&lt;/a&gt;&lt;/center&gt;&lt;br /&gt; &lt;ul id="favoritos2" class="texthidden"&gt;&lt;li&gt;&lt;br /&gt; &lt;a dir="ltr" href="LINK DA SUA POSTAGEM AQUI"&gt;NOME DA CATEGORIA&lt;/a&gt;&lt;br /&gt; &lt;/li&gt;  &lt;li&gt;&lt;br /&gt; &lt;a dir="ltr" href="LINK DA SUA POSTAGEM AQUI"&gt;NOME DA CATEGORIA&lt;/a&gt;&lt;br /&gt; &lt;/li&gt; &lt;li&gt;&lt;br /&gt; &lt;a dir="ltr" href="LINK DA SUA POSTAGEM AQUI"&gt;NOME DA CATEGORIA&lt;/a&gt;&lt;br /&gt; &lt;/li&gt;  &lt;li&gt;&lt;br /&gt; &lt;a dir="ltr" href="LINK DA SUA POSTAGEM AQUI"&gt;NOME DA CATEGORIA&lt;/a&gt;&lt;br /&gt; &lt;/li&gt;  &lt;li&gt;&lt;br /&gt; &lt;a dir="ltr" href="LINK DA SUA POSTAGEM AQUI"&gt;NOME DA CATEGORIA&lt;/a&gt;&lt;br /&gt; &lt;/li&gt;  &lt;/ul&gt;Para trocar a imagem que vem em padrão é so procurar por http://downstotal.webs.com/categorias.png Onde estiver escrito link da sua postagem aqui você irá colocar o link da categoria e depois colocar o nome a onde está pedindo Nome da categoria,depois so salvar.Vale lembrar se você for usar outros tipos de categoria como por exemplo deixar um para filme e outro para jogos e quer colocar imagens diferente deve mudar o codigo do começo onde há favoritos2 você deve colocar outro numero consecutivo no caso ficaria favoritos3Resultado final: