Novo tradutor

8 comentários

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:

<div align="center"><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=en&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/2903/3dflagsusa0001000dacb1.gif"/></a><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=es&wl_url=http://grand-theft-auto-san-andreas-brasil.blogspot.com/"><img border="0" src="http://img502.imageshack.us/img502/29/3dflagsesp0001000dacc7.gif"/></a><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=ja&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/3096/3dflagsjpn0001000dasx3.gif"/></a><br/><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=fr&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/5033/3dflagsfra0001000dakb7.gif"/></a><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=it&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/2261/3dflagsita0001000daqg1.gif"/></a><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=de&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/4136/3dflagsdeu0001000dawl2.gif"/></a><br/><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=sv&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/4752/3dflagsswe0001000dawn7.gif"/></a><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=nl&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/5214/3dflagsnld0001000danx1.gif"/></a><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=el&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/2797/3dflagsgrc0001000daut3.gif"/></a><br/><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=ar&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/8199/3dflagssau0001000dant7.gif"/></a><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=ru&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/1546/3dflagsrus0001000dary0.gif"/></a><a target="_blank" href="http://www.worldlingo.com/S1790.5/translation?wl_srclang=PT&wl_trglang=zh_cn&wl_url=LINK DO BLOG AQUI"><img border="0" src="http://img502.imageshack.us/img502/4259/3dflagschn0001000dajn7.gif"/></a></div>

Veja como ira ficar no seu blog:




Colocando imagens ou frase aletóriamente

7 comentários

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.

<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 6
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
frase = "Frase Um"
}
if (numero == 1){
frase = "Frase Dois"
}
if (numero == 2){
frase = "Frase Três"
}
if (numero == 3){
frase = "Frase Quatro"
}
if (numero == 4){
frase = "Frase Cinco"
}
if (numero == 5){
frase = "Frase Seis"
}
document.write(frase)
</script>

Fazendo um menu com barra de rolagem

2 comentários

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.

<div style="width: 240px;height: 295px; overflow: auto;border: 1px
solid #999999">
<div class="botao">
<a href=”Endereço do Site” target="_blank">Nome
do Site</a>
</div></div>

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.

Colocando barra de rolagem nas postagens

1 comentários

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.

Postar códigos html/java no post

7 comentários

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:

Redimensionando imagens

0 comentários

Para redimensionar imagens hospedadas no blogger
basta quando você for fazer upload escolher o tamanho e em que posição ela irá ficar

Mas se você quer redimencionar um imagem de outro servidor ai você vai ter que adicionar ao codigo da imagem o seguinte codigo:

width="150"

Exemplo:

<img src="http://img529.imageshack.us/img529/3250/bloggerlogo1wf7.png" border="0" width="150"/></a>

Acima eu ja adicionei o width="150",você pode mudar a numeração de width pelo tamanho que você quiser.

Fazendo um menu horizontal

4 comentários

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.