ANTES DE LER ISSO,SIGA OS MANDAMENTOS DO SITE E DEPOIS POSTAREMOS MAIS!!!

Novo codigo para tradutor apenas copie o codigo abaixo e coloque como elemento de pagina no seu blog , so não se esquece de adicionar ao codigo o link de seu blog:

Veja como ira ficar no seu blog:

Este código serve para colocar frases ou imagens aleatórias no site ou blog. Ele faz aparecer somente uma das frases por vez. Você só precisa copiar o código e colocar as frases que desejar onde está escrito frase um, frase dois.... e assim por diante. Para mudar a quantidade de frases aleatórias você deve repetir quantas vezes forem necessárias esse trecho do código:

if (numero == 5){
frase = "Frase Seis"
}

Mas não esqueça de continuar a seqüência da numeração, portanto cuidado para não repetir os números senão o script não funcionará corretamente. Outra coisa que precisa ser alterada é o numero 6 nesta linha numero_de_imagens = 6, isto significa que temos 6 opções portanto se adicionar ou remover opções altere esse numero também.
Este código funciona também para imagens aleatórias para fazer isso basta colocar no lugar das frases o código das imagens, e funcionará normalmente, aparecendo uma imagem diferente cada vez que o blog for visitado.

O código para fazer esse menu é dividido em duas partes:
O estilo CSS do botão que deve ser colocado junto com o restante do CSS do seu site:


.botao a, .botao a:visited{
width: 220px;
color: #000000;
text-decoration: none;
padding-top: 3px;
display: block;
padding-bottom: 3px;margin-bottom: 1px;
background-image: url(Imagem do botão);
font-family: "Comic Sans MS";
font-size: 10pt;
text-align: left;
text-indent: 6px;
}
.botao a:hover{
color: #0000FF;
background-color: #FFFFCC;
background-image: url(Imagem do botão quando o mouse estiver sobre ele);
}


E a outra parte que deve ser colocada onde o menu irá aparecer, no caso do Blogspot isso é na pagina layout, adicionar elemento, html/javascript.

Na parte do CSS a linha background-image: url(Imagem do botão); e background-image: url(Imagem do botão quando o mouse estiver sobre ele), você deve hospedar a imagem em algum site e colocar a url aqui. Se preferir pode usar uma cor de fundo trocando essas linhas por background-color: #CCCCCC; escolhendo a cor que desejar, caso use uma cor de fundo em vez de uma imagem sugiro que coloque bordas(adicione essa linha jundo com a outra border: 1px solid #333333;) está também pode ser de qualquer cor. Lembre-se de colocar a cor de fundo e borda nas duas partes do CSS. Sobre o tamanho pode ser alterado como você quiser: width: 240px é a largura do menu e width: 220px é do botão, quando fizer alterações faça nas duas larguras.

Para colocar uma barra de rolagem nas postagens vá até a pagina editar html procure por:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

e coloque essa linha:
height: 400px;

O numero 400 é o espaço na vertical que suas postagens ocuparão, esse também será o tamanho da barra de rolagem (altura).

Depois na ultima linha tire a palavra "hidden" e coloque auto.

Isso vai fazer aparecer a barra de rolagem nas postagens, depois você ajusta o numero 400 do tamanho que desejar.

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 < e >

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

<img src="endereço da imagem">

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:

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: