Fazer Menu Expansivel

Para ter um menu que se expande, copie o código abaixo, vá até o HTML do seu blog, procure pela tag <head>

Agora cole o codigo abaixo depois da tag <head>

<style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
<style type='text/css'>
#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;}
</style>

Agora clique em "Elementos de página e depois em "Adicionar novo elemento de página" ao abrir a tabela, clique em HTML/Javascript

Agora pegue o segundo código:

<a href="javascript:void(0);" onclick="expandcollapse('favoritos')"><img border="0" src="
http://img175.imageshack.us/img175/3509/1favoritosbrancobutoniud1.jpg"/></a><br/>
<ul id="favoritos" class="texthidden">
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
</ul>

Modifique onde estão escrito "favoritos" pelo nome do menu que você quiser,mas atenção tem que mudar e escrever igual nos dois lugares onde estão escrito"favoritos".

Onde esta em amarelo você pode modificar por link de outra imagem

Fazer Menu Horizontal

1ºA primeira parte do código deve ser colocada de preferência logo depois de tudo que se refere a header.Então vá até o codigo do seu template e procure pelo seguinte codigo:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}


#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:-12px 10px 10px 5px;
background: url(ENDEREÇO DA SUA IMAGEM) repeat-x;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}

2ºAgora adicione o codigo em vermelho como mostra o exemplo acima.

3ºAgora vamos ao segundo codigo,encontre o seguinte trecho no codigo do seu template:

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='TPBB (Header)' type='Header'/>
</b:section>
</div>

<!-- Não esqueça de colocar aqui os seus links!!-->

<div id='navigation'>
<ul>
<li><a href='inserir link do seu blog' title=''>Home</a></li>
<li><a href='inserir link aqui' title=''>Artigos</a></li>
<li><a href='inserir link aqui' title=''>Fotos</a></li>
<li><a href='inserir link aqui' title=''>Links</a></li>
<li><a href='inserir link aqui' title=''>Forum</a></li>
<li><a href='inserir link aqui' title=''>Outros Sites</a></li>
<li><a href='inserir link aqui' title=''>FAQ</a></li>
<li><a href='inserir link aqui' title=''>Contato</a></li>

</ul>
</div>

4ºAdicione o codigo vermelho como aparece no exemplo acima.Onde esta 'insirir link aqui' é opnde você irá colocar os links.E as partes em amarelo do codigo acima você pode mudar de nome pelo que você quer que apareça.

Bom eras isso espero ter ajudado.

Hack de Post Recente

Instalando o Hack de Posts Recentes no Blogger Clássico

1 - Entre na sua conta no Blogspot. Escolha o blog que quer editar: clique em Modelo->Editar HTML.

IMPORTANTE: sempre faça back up antes de modificar seu layout. Copie todo o código HTML num arquivo TXT, e salve uma cópia em seu HD.

2 - Procure esta tag:

<$BlogItemBody$>

3 - Adicione este código APÓS a tag <$BlogItemBody$> :

<ItemPage>
<script language=”Javascript”
src=”http://www.anniyalogam.com/scripts/relatedposts-blog.php?
url=<$BlogItemPermalinkUrl$>&blog=<$BlogURL$>”>
</script>
</ItemPage>

4 - Salve as alterações. Pronto!

Se tudo correr bem, a lista de Posts Relacionados aparecerá - somente nas páginas de postagem - logo depois do corpo do post. Caso não existam posts que preencham as condições da busca que eu expliquei acima, não aparecerá nada.

O único problema que eu vejo que pode haver com este hack é o idioma; o hack foi desenvolvido em inglês, e ignoro como o critério para “palavras triviais” se aplica em outros idiomas. Como eu disse, vocês terão que experimentar e me contar. Espero que este hack seja útil!

Instalar Templates

Para mudar o visual do novo blogger é só seguir os passos abaixo:

Primeiro vc tem que baixar um da web,em breve a comu tera um blog ai tera varios templates para vcs baixarem mas por enquanto vamos ao tutorial.

Antes de mais nada, se você tem widgets(acessorios) no seu blogger guarde os código de cada um deles, no bloco de notas mesmo, para colocar depois no novo template.

Vá na palheta "MODELO" depois na palheta "Editar HTML"

Agora temos duas formas de instalar o layout.

Primeira forma: carregar o template do HD.

Está é a opção mais segura. Vá em "browse", selecione o arquivo xml no seu pc e depois de "carregar".



Segunda forma: Copiar o Código do template diretamente.

Primeiro abra o template que está em seu pc no bloco de notas. Depois clique na opção expandir widgets.



Agora é só apagar todo código que está dentro do HTML, e colocar o novo que você abriu pelo bloco de notepad.

Mudar a Siderbar

Na Maioria dos Templates a sidebar vem do lado direito, Se você quiser muda-la de posição é simples.

Apenas mude isso:

Procure no HTML a tag "#main" (Pode haver mais de uma)

E altere

float:left;

para

float:right;

E procure pela tag "#sidebar" e altere

float:right;

para

float:left;

Ou seja a que estava float:right; (direita) no caso o menu, foi alterado para float:left; (direita) e vise versa.

Mudar a Cor de Fundo

Nem todos os templates tem a opção de Mudar a cor do fundo do menu, e do conteúdo individualmente, como por exemplo o template minima.

Então para isso procure no HTML do seu template por:

#sidebar-wrapper { - Lembrando que esse nome varia de Template pra template, mas a palavra sidebar tem em todos (Que significa no blog "MENU").

#main-wrapper { - Lembrando que esse nome varia de Template pra template, mas a palavra main tem em todos (Que significa no blog "POSTS").

Logo após essas duas tags você encontra a linha:

background:

Se não tiver é só colocar, e junto coloque a cor desejada, exemplo:

#main-wrapper {
background: black;

Não esque de colocar o ";" ponto e virgula depois da cor.

E no lugar da palavra black você pode inserir o código exadecimal da cor de sua preferência, não esquecendo do simbolo # antes.

Postar Codigo HTML

Para postar códigos html/javascript no post sem que ele seja 'interpretado' pelo navegador, ou seja, postar o código puro, basta substituir todos os símbolos < e > por &lt; e &gt;

Exemplo: Para conseguir postar o código de imagem aqui, sem que a imagem apareça, coloco:

&lt;img src="endereço da imagem"&gt;

Sem isso, apareceria a imagem (havendo um endereço real) ou absolutamente nada, já que no exemplo não existe um endereço de imagem real.

Quando publicado o post, aparecerá o código html puro, assim:

<img src="endereço da imagem>

Outra forma de postar codigo html é usar um javascript auto executavel feito por mim

basta você começar uma nova postagem ai digita todo o seu texto e coloca os codigos que você quer que apareça na postagem,não use nenhum outro codigo html(negrito,sublinhado,etc.)deixe para enfeita o seu vodigo mais tarde

depois de fizer toda a postagem copie o codigo abaixo e cole na barra de navegação(la onde fica o endereço do blogspot,onde você digita o endereço dos sites)
e aperta enter,automaticamente todos os caracteres com < e > vao ser substituidos por &lt; e &gt;

Codigo:
javascript:var txt=document.getElementsByTagName('textarea')[0];txt.value=txt.value.replace(/</gi,"&lt;");void(0);txt.value=txt.value.replace(/>/gi,"&gt;");void(0);