Tudo para seu blog

Novo tradutor

2008-04-05T05:17:00.000-07:00

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

2008-03-10T11:26:00.000-07:00

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

2008-03-10T11:19:00.000-07:00

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

2008-03-10T11:16:00.000-07:00

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

2008-02-08T09:07:00.000-08:00

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:

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

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

Redimensionando imagens

2008-02-08T06:37:00.000-08:00

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

2008-02-08T06:17:00.000-08:00

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


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



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

Fazendo um menu expansivel

2008-02-07T08:20:00.000-08:00

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

3 proteções em 1 só código

2008-02-06T09:05:00.000-08:00

Com este scripts você poderá proteger sua página contra o uso do botão direito, das teclas ALT+F4 e cópia de texto

Adicione este código entre os campos <BODY> aqui </BODY>
ou coloque como elemento de pagina

<script language=JavaScript>
//script from www.argnet.tk
function blockError(){return true;}
window.onerror = blockError;
</script>
<script language=JavaScript>
function disableselect(e)
{
return false
}
function reEnable()
{
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar)
{
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

<script language=JavaScript>

</script>

Colocando uma avaliaçao dos posts

2008-02-04T06:35:00.000-08:00

Para colocar uma avaliação em todos os posts, entre no site http://spotback.com e faça o cadastro.

Depois você tambem poderá colocar um WidGet mostrando os posts mais votados.

Faça o login e depois clique em "My Widgets".

Depois procure por "Other Options" e clique em "New from widget gallery".

Procure o Modelo que você deseja e clique em cima.

Depois clique em "Get This WidGet" e copie o código de acordo com o modelo do Seu Blog:

Velho Blogger
Novo Blogger XML
Wordpress

Va no código XML do seu template, marque "Expandir modelos de widgets".

Cole o código depois da linha:

<div class="'post-header-line-1'/">

Para as estrelas ficarem embaixo do titulo.

Ou depois da linha:

<div class="'post-footer'"><br /><br />

Para ficar depois da postagem.

Mudando a posição da siderbar(barra lateral)

2008-02-04T06:33:00.000-08:00

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.

Mudando cor de fundo

2008-02-04T06:31:00.000-08:00

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.

Colocando um bloco de posts recentes

2008-01-30T07:33:00.001-08:00

É só
clicar no link a seguir
configurar o endereço do seu blog e a quantidade de posts que seram mostrados, clicar em configurar e depois em instalar.
Logar no blogger (se já não estiver logado), e aceitar o widget.
Sem códigos, sem modificações no template. É clicar e usar.

http://templatesforyou.googlepages.com/widgetinstaller.html

Colocando um bloco de posts recentes

2008-01-30T07:33:00.000-08:00

Colocando um bloco de comentario recents

2008-01-30T07:32:00.000-08:00

É só:
clicar no no link a seguir,
configurar o endereço do seu blogger,
escolher a quantidade de comentários e a quantidade de caracteres (o normal são 100 caracteres),
clicar em configurar e depois em instalar.

Logar no blogger (se já não estiver logado), e aceitar o widget.

Sem códigos, sem modificações no template. É clicar e usar.

http://templatesforyou.googlepages.com/widgetinstaller-recentcomments.html

Coloque Adsense dentro dos Post(Novo Blogger)

2008-01-30T07:29:00.000-08:00

Pessoal no Blogger é bem simples colocar um banner do adsense dentro do Post, isso aumenta seu CTR consideravelmente.
E como todos sabem quanto maior o CTR mais rendimento.

Na edição do html assinalar a opção expanded widgets. Isso faz com que apareça todo o conteudo do html.

Agora basta encontrar a tag <p><data:post.body/></p>.

Agora basta colocar o código abaixo entre as tags <p> e <data:post.body/>

<table align="'left'"><tr><td align="'left'">SEU CÓDIGO ADSENSE</td></tr></table>

Reparem que vcs podem alinhar o banner apenas alterando a propriedade align

PS.: CTR --> Taxa de cliques nos banners

Adicionando um calendario ao blogspot

2008-01-30T07:22:00.000-08:00

Adicione o seguinte código como elemento de pagina no sue blog

<br /><script language="JavaScript" type="text/javascript"><br /><br /><br /><br /></script><br /><br />

Retirando titulo do blogspot

2008-01-30T07:20:00.000-08:00

Para tirar o Título do blogger basta ir em Layout > Modelo > Editar html.

Agora encontre o seguinte código no template:

<b:widget id="'Header1'" locked="'true'" title="'TITULODOSEUBLOG(Cabeçalho)'" type="'Header'/">

Agora delete ele do template.
Teste se ocorreu tudo certo clique em salvar.

Observação: O título não saira da barra de título do navegador.

Bloqueando seleção de texto

2008-01-26T07:43:00.000-08:00

Copie o codigo abaixo e cole entre as tags <head></head>

<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>

Agora copie os codigo abaixo e coloque no final do codigo de seu template antes da tag </html>

<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>

pronto agora salve e veja se funcionou.

Descobrindo se seu site esta sendo plagiado

2008-01-25T08:27:00.000-08:00

Basta entrar no site abaixo e digitar o endereço do blog qeu você deseja saber se esta sendo copiado:

http://www.copyscape.com

e eu tenho certeza se você que já criou um tutorial ou outra coisa ,você ja foi plagiado porque o qeu tem de gente copiando por ai é foda e com estas copias do seu blog quem acaba se prejudicando é você e se blog para de aparecer nos sites de pesquisas porqeu você pode ser considerado o "plagiador"

então ta ai a dica e não deixem que ninguem copiem sua postagens

Hack de Posts Recentes para Blogger Clássico

2008-01-25T08:23:00.000-08:00

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!

Lista de Posts Relacionados no Rodapé do Post

2008-01-25T08:16:00.000-08:00

1 - Ainda na tab “Editar Html”, clique em “Expandir modelos de widgets”.

2 - Procure esta linha de código:

<p class=’post-footer-line post-footer-line-3′/>3 - Adicione este código LOGO DEPOIS dessa linha (você pode substituir “Posts Relacionados” por qualquer texto que desejar):

<b:if cond=’data:blog.url != data:blog.homepageUrl’>Posts Relacionados</b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

4 - O código deve ficar assim:

<p class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Tenha cuidado para não apagar ou sobreescrever nada, pois um simples espaço ou caracter sobrando ou faltando pode phoder completamente seu template.

5 - Salve o template. Você já pode ver sua lista de posts relacionados, ANTES dos comentários! Legal, não é?

Customizando a Quantidade de Posts Relacionados

Tanto se você está usando este método, como se decidiu usar o widget, pode determinar o número máximo de posts que aparecerão na lista. Este hack usa as Categorias (Labels, Marcadores ou Etiquetas do Blogger - é tudo a mesma coisa) para escolher os posts relacionados. Ou seja, ele vai “puxar” posts que estejam na mesma (ou mesmas) categoria.

Para modificar o número de posts que serão mostrados - o número pré-determinado são 10 posts, se achar que está bem assim, não faça mais nada - vá até a tab “Editar Html”, e clique em “Expandir modelos de widgets”. Procure este código no template:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in
-script&callback=related_results_labels&max-results=5“‘ type=’text/javascript’/>
</b:if>

Mude o número 5 para qualquer coisa que você queira. Aparentemente, esse número não indica o total de posts, mas o máximo de posts que são mostrados por cada categoria - embora eu não tenha certeza disso. Experimente mudar o número algumas vezes, até encontrar a combinação ideal para você.

E, caso você esteja se perguntando, o hack e o widget funcionam com todos os posts, inclusive os mais antigos.

Motivos Que Podem Causar Que o Hack de Posts Relacionados Não Funcione

1 - Você não usa as Categorias do Blogger.

Se seus posts não estão categorizados, a lista de posts relacionados não aparecerá - mas se você instalou o hack direitinho, provavelmente o título “Posts Relacionados” vai aparecer, sem nada embaixo. Coloque categorias nos posts, e a lista vai aparecer.

Se você tem alguns posts categorizados e outros não, a lista só aparecerá nos posts com categorias, mas o título “Posts Relacionados” vai aparecer em todos.

2 - Suas categorias contêm caracteres especiais

Alguns caracteres, como (?) e (/) podem causar problemas com este hack. Elimine-os das suas categorias, e pronto.

3 - Código adicionado de forma incorreta

O código do passo 3 deste posts deve ser adicionado após o código do passo 5 do post Widget de Posts Relacionados para Blogger - Blogspot, de forma que o código do passo 5 fique depois do código do passo 3 no HTML. Não entendeu? Simplesmente siga as instruções ao pé da letra e não modifique nada depois de instalar o hack!

Sempre tenha cuidado para não apagar ou sobreescrever nada, pois um simples espaço ou caracter sobrando ou faltando pode phoder completamente seu template.

4 - Você usa um Modelo Clássico de Template

Este hack é para o NOVO Blogger.

Exibindo os posts com link "Leia Mais"

2008-01-25T08:05:00.000-08:00

Este é um dos Hacks para Blogger - Blogspot mais pedidos de todos os tempos: Posts Resumidos na Home Page do Blog, com link de “Continue Lendo” ou “Leia Mais” no final do resumo.

Existem outros hacks que cumprem a mesma função, de diferentes formas; mas depois de vários testes, este é o melhor, na minha opinião. Ele permite que você resuma somente os posts que desejar, como você já deve ter visto por aqui.

Vamos ao Hack! Preste atenção, pois ele está dividido em 3 partes:

I - Configurando o script
II - Modificando o Template
III - Configurando o Editor do Blogger

Na Primeira Parte, você deve escolher entre duas opções: inserir o script diretamente no seu template, ou hospedar o script externamente. Siga somente as instruções para a opção que você escolheu!

A Segunda Parte e a Terceira Parte se aplicam na íntegra à todos os casos, sem importar qual opção você escolheu na Primeira parte.

I - Primeira Parte - Configurando o Script

Devido aos problemas recentes com os scripts dos hacks, vou explicar aqui duas formas de implementar o “Leia Mais”: inserindo o script diretamente no seu template, ou hospedando o script externamente.

1º Opção - Inserindo o script diretamente no seu template

1 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

2 - Procure a tag </head>.

3 - Copie TODO o código mostrado nesta página e cole-o logo ANTES da tag </head>.

4 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.

Agora, você deve passar à II - Segunda Parte - Modificando o Template

2º Opção - Hospedando o script externamente

Por favor, só escolha esta opção se você tem alguma idéia de como fazer isto. Se este método lhe parecer muito complicado, é melhor optar pela 1º opção, e pronto.

1 - Faça o download do script: clique neste link com o botão direito do mouse, e salve o arquivo LeiaMais.txt no seu computador.

2 - Mude a extensão do arquivo de txt para js, no próprio Notepad. Simplesmente abra o arquivo, selecione “Guardar como” e substitua LeiaMais.txt por LeiaMais.js

3 - Faça o upload do arquivo em sua conta. Uma opção grátis para hospedar seus arquivos é o Google Pages.

4 - Coloque a URL do seu script no seguinte código:

<script src=’Insira aqui a URL do script’ type=’text/javascript’/>

Por exemplo: se eu estivesse hospedando o script na minha conta do Google pages, a URL seria:

<script src=’http://nospheratt.googlepages.com/LeiaMais.js’ type=’text/javascript’/>

5 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

6 - Procure a tag </head>.

7 - Copie o código do script, com sua URL, e cole-o logo ANTES da tag .

8 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.

Agora, você deve passar à II - Segunda Parte - Modificando o Template

III - Terceira Parte - Configurando o Editor do Blogger

1 - Ainda na sua conta do Blogger, vá até Configurações -> Formatação.

2 - Bem em baixo, Você verá a caixa vazia do Modelo de postagem. Copie e cole as seguintes linhas dentro dessa caixa:

Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>

É melhor copiar e colar este código, para não correr o risco de inserir espaços ou caracteres que impediriam o hack de funcionar. Salve as configurações.

3 - Agora, quando você entrar em “Criar Postagem”, a caixa mostrará onde você deve digitar o resumo do post (a parte que você deseja que apareça na Home, antes do link “Leia Mais…”) e onde digitar o resto do post (a parte que aparecerá somente na página do post).

Atenção: as tags <span id="fullpost"> e </span> devem permanecer intactas para que o hack funcione! Antes de publicar seu post, certifique-se de que elas não foram alteradas.

E se eu não quiser resumir um post?

Simplesmente, quando for escrever o post, delete completamente o texto que aparece na caixa do texto da postagem. Não se preocupe; cada vez que você for criar um novo post, o texto que indica onde digitar o resumo e o resto do post reaparecerá.

Você escolhe se quer resumir o post ou não, e o link de Leia Mais só aparecerá nos posts que foram divididos com o <span id=”fullpost”>. Não é genial?

Observação: o Ramani avisa no post original do hack que se você clicar no link “Postagens Mais Antigas”, é possível que o link “Leia Mais” apareça mesmo em posts antigos que não foram divididos seguindo o hack. Ele explica que este é um problema conhecido, para o qual ele ainda não encontrou solução.

Eu acho que este é um preço pequeno a pagar, para ter seus posts resumidos/com sumário e link “Leia Mais” no Blogspot. Eu mesma não vi esse problema aqui no Blogando, pelo menos ainda. Mas a decisão é sua, é claro.

Observação 2: Se você usar este hack, lembre-se de incluir um link ao Hackosphere (o blog do autor do hack) na sua sidebar ou num post. É o mínimo que podemos fazer para agradecer, não é mesmo?

Colocando chat no blog

2008-01-25T08:03:00.000-08:00

Para colocar um Chat no blog entre no seguinte site: http://xat.com

Clique em "Make a chat Box".

Clique na imagem de fundo de sua preferência.

Em "Width" coloque a largura do chat. (Você pode ir testando os valores clicando em "Update & Getcode")

Em "Height" coloque o comprimento.

Clique em "Update & Getcode".

Copie o código e cole em "Adicionar elemento um elemento a pagina>HTML/JavaScript" no seu blog. (Posicione o elemento acima ou depois dos posts)

Você tambem pode postar o Chat e depois colocar o link do Post no Menu.

Montagem em fotos em sites

2008-01-25T07:49:00.000-08:00

(Faça montagem com foto)

Clique no link abaixo:
http://bighugelabs.com/flickr/hockney.php

1) Clique em procurar, para selecionar a foto

2) Em Style: Escolha uma das 2 opções: Polaroid frames ou no frames ( Polaroid frames, fica igual no desenho que aparece no exemplo)

3) Background color: Clique em uma das opções para colocar cor de fundo ( caso opte pela primeira opção, clique no quadrinho preto para escolher a cor)

4) Number of Polaroids: Nesta opção você pode escolher de 1 a 20 (são números de vezes que sua foto vai aparecer)

5) Clique nos quadradinhos das 2 últimas opções e clique em CREATE

6) Clique em SAVE

7) Vai abrir uma janelinha com 3 opções: Abrir, salvar e cancelar. Clique em salvar.

(Coloque sua foto em um ootdoor).

Clique no link abaixo:
http://bighugelabs.com/flickr/billboard.php

Clique em procurar para selecionar a foto

Você tem 3 opções para posicionar a foto, centro, direita, esquerda ( Center Top/Left Bottom/Right )

Você tem 5 opções para colocar seu ootdoor, vai clicando na flechina (Billboard style) que do seu lado direito vai aparecendo as opções.

Top of billboard text: (Aqui você coloca seu texto que vai ficar no topo do ootdoor)

Bottom of billboard text:( Aqui você pode fazer seu anúncio)

Text color (Aqui você escolhe a cor do seu texto)

Add credit to image (Clique neste quadradinho para adicionar a imagem)

Clique em CREATE
Para salvar clique em save, e depois em salvar

(Coloque fotos num cubo giratório e Poste na Página de Recado
do Orkut)

Clique no link abaixo:
http://www.jellymuffin.com/generators/fancycube

Muito fácil, você tem que selecionar 6 imagens.

Clica em Browse para selecionar cada imagem, e em Upload para colocar cada foto no cubo, em baixo no segundo quadradinho vc pode selecionar a cor para dar um efeito no cubo.

Depois de pronto clique em: Copy HTML code p/copiar os códigos que estão embaixo.
Prontinho agora é só colar na página de recado.

(Coloque sua foto numa revista, ou numa noticia de jornal).

1) Clique no link abaixo.
http://www.semfrescura.net/capas.php

2) Clique na revista na revista de sua preferência (são 4 modelos 1 um de jornal)
ou no jornal.

3) Clique na seta branca que esta dentro da bolinha laranja.

4) Na página seguinte tem 2 opições para serem preenchidos ( na primeira coloque seu nome, na segunda um título para revista ou jornal.

5) Clique em procurar para selecionar sua foto

6) clique na seta branca dentro da bolinha laranja.

7) Para salvar clique com botão direito do mause, em salvar imagem como.

http://it.funonit.com/scherzi_divertenti/crea_fotomontaggi/#_

Capricho
Caras
Contigo
G Magazine
Playboy
Quem

Então clique no link abaixo:
http://www.semfrescura.net/capas.php

Vc pode colocar sua foto, em uma destas revistas, e ainda postar
na página de amigos.

(Monte slide com fotos)
http://www.slide.com/

Tem várias montagens em slide que vc pode fazer e postar na página de recados.

(Transforme suas fotos, coloque efeitos).
http://blingee.com/

1)Clique em blingees

2)Clique no blingee de sua preferência

3)Clique lá em cima em Make a Blingee now! (esta escrito em branco num retangulo verde)

4) Clique em procura para selecionar a foto

5) Clique em make a Blingee para carregar a foto

6) Clique em Your image is ready, Click Here to Continue to the Next Step (escrito em vermelho)

7) Em baixo da sua imagem tem vários botões, começando com: Most popular, Dynamic, Too cute, Summer, Ink e Estarter Kit, cada botão desses são várias animações que vc pode usar

8) Depois de deixar sua foto como vc queria, é só clicar em save

Ps. Os efeitos não vão ficar animado no orku, pq o orkut não aceita animação nas fotos, só se for postado em blog.

(Coloque sua foto numa tela).
http://www.dumpr.net/museumr.php

* Quer colocar sua foto numa tela, como se estivesse numa exposição?

É muito simples, clique no link abaixo, escolha a tela, tem 4 opções, sua foto vai aparecer onde esta o gatinho, clique na tela de sua preferencia, depois clique em procurar para escolher a foto, depois em continue. Sua foto vai estar prontinha, agora é só salvar

(Gerador de desenho com sua foto).
http://www.dumpr.net/sketch.php

Clique em procurar, para carregar sua foto, depois em continue.
Para salvar a sua foto, clique com botão direito do mouse, salvar imagem como.

(Coloque sua foto num telejorna!!!)
http://www.threatdowngenerator.com/

*Clique em procurar para selecionar a foto.
* Escreva sua mensagem em message.
* Clique em Go for It!
* Para postar na página de recado, clique com botão direito do mouse sobre a imagem, depois em propriedade, e copie a URL da imagem

(Coloque sua foto na capa de um Romance).
.
Que tal ver sua foto e seu nome na capa de um romance de novela?

Clique no link abaixo:
http://www.glassgiant.com/romance/

1) Clique em procurar para selecionar a foto
2) Escreva o Título do romance (Title)
3)Escreva o sub título (Tag Line)
4)Escreva o nome do autor (Author) Seu nome
5) Coloque as iniciais do seu nome (Couple's Initials)
6) Selecione um bonequinhos (posição da foto)
7) Escolha a cor da capa do seu romance.
8)Clique em Make Romance Novel
9) Para salvar é só clicar em salvar como.

OBS- Se você não gostar de alguma coisa é só ir mudando e clicando em Make Romance Novel

(Coloque a sua foto e do seu amor no Coração)
http://www.caption.it/create/locket.php

É só você procurar a foto no seu pc, escrever o texto que você quer que apareça onde está escrito assim CUSTOM TEXT e depois clicar em CAPTION IT, e pronto a sua foto e do seu amor estará dentro do coração, aí é só salvar no pc.

Para salvar é só clicar com botão direito do mouse, e salvar imagem como.

(Coloque Molduras nas suas Fotos)
http://www.frameshow.com/ecards.htm

Este link tem algumas moldura bonitas, que da para você emoldurar suas fotos.
Clique no link abaixo, qdo abrir escolha a moldura e clique nela.
Depois clique em procura, para selecionar a foto.
Depois clique em Upload Photo, para carregar a foto.
Do lado esquerdo tem 2 botões pra vc ajustar a foto.
Depois da foto emoldurada, clique com o botão direito do mause,
em salvar destino como.

(Faça um cartão com sua foto, nome e escreva uma linda mensagem).

Clique no link abaixo:
http://bighugelabs.com/flickr/deck.php

1) Clique em procurar para selecionar a foto

2) Escolha uma das opções: Center Top/Left Bottom/Right (onde vai aparecer a foto, no centro, a diretta ou a esquerda)

3) Clique numa das opções para escolher a cor do fundo do cartão. Choose a color for your card.

4) Title: Dê um título para seu cartão (Pode ser seu nome)

5) Sub-title: Dê um subtítulo para o cartão

6) Description: Escreva a mensagem.

7) Tem 7 bolinhas pretas, em cada bolinha tem várias opções de enfeite para você colocar na foto (o seu enfeite vai aparecer no cantinho superior da foto) pra você conseguir fechar cada bolinha que vc abre, é só clicar na bolinha preta que esta no final dos enfeites.

8) Clique em CREATE, depois em save, vai abrir 3 opções: Abrir, salvar e cancelar, clique em salvar.

9) Pronto seu cartão esta salvo.

(Neste site você coloca toucas, chapéus e etc...)

http://www.pikipimp.com/

Opção:
Upload ( carrege a foto)

do lado a opção" CHRISTMAS "

arraste o efeito do mouse

SAVE AND PRINT

CLOSE

salve a foto com o botão direti do mouse

2 -RECORTE A BARRA DO SITE DE CIMA OPÇÃO CROP.

Site para modificar fotos.

Aqui você pode modificar suas fotos:

- Colocar molduras
- Mudar as cores ( deixar branca e preta)
- Redimensionar (mudar de lado, de posição etc )
- Aumentar ou diminuir o tamanho de sua foto, etc.
- Dê mais vida a suas fotos!

http://www.picnik.com/app

3 - MOLDURAS SIMPLES

Este programa é muito bom

http://www.photoscape.org/ps/main/index.php

http://www.glittermaker.com/

http://www.addglitter.com/ - adiciona glitter e animações em fotos , e gráficos animados com e sem glitter

http://www.graphita.com/ (editor de fotos on-line) adiciona nuvens de pensamento e diálogo, frases, chifrinhos, corações ..etc

http://www.pazoen.com/ adiciona glitter e animações em fotos
http://www.imageloop.com/
http://letterjames.freenet.de/letterjames.html
http://www.picturetrail.com/photoFlick/samples/pflicks.shtml
http://www.dumpr.net/
http://www.glassgiant.com/
http://www.jellymuffin.com/
http://www.pageplugins.com/
http://www.pageplugins.com/
http://www.slide.com/
http://www.montafoto.com/

EX: Foto no Outdoor
Fade das Bordas
Fotomontagem
Calendário
Foto Selo
Cartão com Mensagem
Foto no Outdoor

(Gerador de estampa para foto. FUTEBOL E OUTROS).

COM SIMBOLOS DE TIME DE FUTEBOL

http://dicasetruques.110mb.com/estampar/index.php

Esse site estampa algumas imagens disponiveis lá, em qualquer imagem que você quizer ; E ainda você escolhe o lugar da imagem e o tamanho da estampa

* QUANDO FICAR PRONTA CLIQ COM O LADO DIREITO DO MOUSE P SALVAR NO SEU PC

OLHA A MINHA COMO FICOU:
http://www.hostdump.com/uploads/1fabe3d891.jpg

USO ESSE SITE PARA CRIAR MEUS CÓDIGOS

3-(EDIÇÃO PARA SEU NATAL)
- Neste site vc coloca toucas, chapéus e etc....

http://www.pikipimp.com/

OPÇÃO:
UPLOAD ( CARREQUE A FOTO )

DO LADO A OPÇÃP " CHRISTMAS "

ARRASTE O EFEITO COM O MAUSE.

SAVE AND PRINT

CLOSE

SALVA A FOTO COM O LADO DIREITO DO MOUSE.

Adionar aos favoritos

2008-01-24T07:15:00.002-08:00

Botão para as pessoas adicionarem seu blog/site aos favoritos, no FireFox e Internet Explorer, o código funciona para os dois navegadores e outros não muito conhecidos.

Como botão:

<script language="JavaScript">
function addFav(){
var url = "URL DO BLOG";
var title = "TÍTULO DO BLOG ";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()" title="Adicionar aos Favoritos"><img src="http://img65.imageshack.us/img65/8273/semttulo1qk6.png" width="150" height="30"></a>

Obs:Você pode mudar o link da imagem por uma outra de seu agrado

Como link:

<script language="JavaScript">
function addFav(){
var url = "URL DO BLOG";
var title = "TÍTULO DO BLOG ";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()" title="Adicionar aos Favoritos">Adicionar aos Favoritos</a>

Bloquei a copia de imagens

2008-01-24T07:15:00.001-08:00

Claro que qualquer um pode dar um print screen e salvar uma imagem, ou usar qualquer outro recurso para isso, por que existem muitos. Mas, para travar o botão direito do mouse e impedir que se salve uma imagem da maneira mais simples é só adicionar este código ao endereço da imagem:

oncontextmenu="return false"

Ficando assim:

<img src="endereço da imagem" oncontextmenu="return false">

Desabilitando o botao direito

2008-01-24T07:12:00.000-08:00

É só colocar na sidebar na opção javascrip/html siga os passos:

Agora entre em layout -> modelo -> elementos da página -> Adicionar um elemento de página -> HTML/JavaScript e adiciona.

Codigos:

<SCRIPT language=JavaScript>



</SCRIPT>

Vários sites para upload/download de arquivos!

2008-01-24T07:09:00.000-08:00

Sites para uploads de arquivos:

www.4shared.com - requer registro grátis - 5GB max.

www.mediafire.com - 100 MB por arquivo, registro opcional, sem limite de arquivos, sem enxeção para baixar!

www.flyupload.com - 2 GB por arquivo! sem limite de arquivos

www.bigupload.com - 500 MB por arquivo

www.easy-share.com - bom mas chatinho às vezes para baixar, uma boa é que permite carregar via FTP

www.rapidshare.de - Um dos primeiros a se destacar, hoje é ruim pra quem vai baixar, que tem que esperar muito tempo entre um arquivo e outro. 100 MB por arquivo, apaga depois de 90 dias sem ninguém baixar.

www.arquivoweb.net - Site nacional, arquivos de até 100 MB. Arquivos ficam no ar por 3 meses apenas.

www.da_insane.boo.pl/d/upload - tTipos de arquivo permitidos: gif, JPG, jpg, jpeg, JPEG, png, txt, nfo, doc, rtf, htm, dmg, zip, rar, gz, exe - limite: 10 MB

www.datapickup.com- 1.5 GB max - opcionalmente envia para email - 7 dias ou 25 downloads

www.dropload.com - espaço: 100MB - limite: 7 dias

www.fileanchor.com - max 1MB por arquivo, 90 dias, banda “ilimitada”

www.filecabi.net - tipos de arquivo aceitos : .wmv .avi .mpg .mov .swf .asx .jpg .gif .png .pdf - Armazenamento “para sempre” 10 MB max - basicamente arquivos engraçados, sexy, estúpidos, perturbantes e bizarros

www.sharefiles.ru - limite 50MB - banda limitada, proteção por senha, site russo

www.swiftdesk.com - 30 MB max - requer registro grátis.

www.turboupload.com - beta - 70 MB max

www.ultrashare.net - limite 28,6 MB, sem limite de banda, arquivo removido se não baixado por 30 dias

www.updownloadserver.com - 250 MB max - download só depois que o administrador aprovar - permanece por 30 dias

www.uploadhut.com - limite 50 MB, todos tipos permitidos, roda Linux

www.uploadporn.com - limite 30MB, só aceita pornografia

www.uploadtemple.com - não aceita php e mp3 - limite por arquivo 30 MB, permanência desconhecida

www.webfile.ru - limite 20MB, banda limitada, proteção por senha, site russo

www.wtfhost.com - limite 25 MB, requer registro grátis

www.yousendit.com - limite 1GB, suporta "resume" (recontinuação de download interrompido), limite 25 downloads ou 7 dias.

www.youshareit.com - virou megaupload.com

Fazendo Gifs(Banner)No Photoshop

2008-01-24T07:03:00.000-08:00

E ae gente!
Vou mostrar pra vocês, neste Tutorial, como fazer GIFs no Photoshop.

Mas... o que é uma GIF?
Gif é uma imagem, mas animada. É como um pequeno vídeo do Windows Media Player...

Em qual programa podemos fazer GIFs?
Em muitos, mas aqui vou mostrar como afzer GIFs no Photoshop... Na verdade, é no Image Ready, que vem junto com o PS.

Bom, vamos começar...

PARTE I - baixando o Photoshop

Antes de tudo, vc tem que ter Photoshop

Vá no site

http://baixaki.ig.com.br/download/Adobe-Photoshop.htm

e baixe o demo.
Instale o PS (claro) e comece a parte II.

PARTE II - fazendo a GIF

Primeiro, decida do que é a sua GIF. Já vá tendo as idéias pra ela.
Então abra o Paint ou o Photoshop e faça a fake da primeira frame...
Mas o que é frame?
Frame é um quadrinho da GIF.
Se a GIF é, por exemplo, assim:

.
..
...

Cada linha é uma frame.

Continuando, faça as frames e salve-as em uma pasta SÓ COM AS FRAMES DA FAKE com o nome de 001, 002, 003... Sempre no formato PNG. NÃO SALVE EM GIF!!

Depois que acabar, abra o Image Ready. Ou abra o Photoshop e vá em "File/Edit in Image Ready".

Vá em "File/Import/Folder as Frame" e selecione a pasta onde estão as frames da sua GIF.

Ele vai pegar todas as frames e fazer sua GIF.

Pronto, sua GIF está feita! Aperte o botão Play (>) na Tab animation para ver como ficou. Otimo, non? "Mas espera aí Gaia, tá muito rapido!!"
Ahá! Então na mesma tab Animation, embaixo das frames, há escrito "0 sec v".

Clique nesse "v" e selecione a velocidade adequada para os quadrinhos, ou clique em "Other" para definir uma outra velocidade. Se todos forem uma mesma velocidade, aperte no 1º quadrinho, pressione ALT, clique no ultimo quadrinho e ajuste a velocidade.

PARTE III-salvando a gifs

"Agora, como salvar, Gaia?"
Vá em "File/Save as" e salve-a em .PSD
Depois vá em "File/Save Optimizided as" e salve em .GIF

Pronto, acabamos a parte basica... Mas e se você quiser fazer efeitos?
Selecione as frames que deseja fazer o efeito com CTRL e aperte neste icone:

Há três tipos de tweens (efeitos):

Position: Vamos supor que vc queira fazer um GIF de um sol indo de um lado pro outro da GIF. Use esta opção e o IR criará frames assim:*
*
*
*
etc...

Opacidade: se você quiser fazer um efeito de uma coisa sumindo e desaparecendo, esse é o seu efeito.

Effects: lol, esse eu não sei XD Depois selecione quantas frames você quer adicionar. Mais frames significa mais perfeição, mas fica mais lenta a GIF.

E aqui uma GIF minha recente, usando tudo que tenho direito:

Depois de salva a gif entre no imageshack e procure por sua gif e depois clique em "host it! "
ai vc espera upa a imagem e ai pega o codigo " Hotlink for Websites " e edita no começo do codigo o link: http://imageshack.us pelo link que vai dar o seu banner,ou seja,coloque o link de um site,comunidade,etc.

Minifoto 1.4

2008-01-24T06:55:00.000-08:00

O MiniFoto 1.4 é um programa gratuito que cria webpages de miniaturas de imagens com links que facilitam a navegação. Nenhuma modificação é feita nas imagens, e não são criadas novas imagens. Apenas as imagens são exibidas em tamanhos menores nas páginas.

Ao clicar sobre a miniatura surgirá uma janela popup com a imagem em tamanho natural. A janela se adapta automaticamente ao tamanho da imagem. E se a imagem for muito maior que a resolução 800x600, o código da página fará com que a imagem seja exibida em tamanho menor.

O visitante poderá usar as teclas "A" e "P" para ver as imagens anteriores e posteriores respectivamente. As janelas se redimensonarão automaticamente durante a navegação.

O programa oferece opções do número de colunas e linhas na página e portanto, do número de miniaturas por página.

Pode-se escolher o nome e o título da página, a cor do texto e a cor do fundo da página, a imagem e a música de fundo.

DOWNLOAD AQUI

Creator 2.0

2008-01-24T06:52:00.000-08:00

O Blog Creator 2.0 cria templates personalizados usando qualquer imagem com 800 píxeis de largura.

Cria templates para BigBlogger, Blig, Blogger Br, Blogger (blogspot), Blogse, Theblog, Uol, Viablog e Weblogger.

O programa escreverá o título do seu blog na imagem, com a fonte, cor e tamanho de fonte de sua escolha, além de criar os blocos de "Perfil" e "Posts".

E por fim criará a imagem de fundo a partir da imagem original.

DOWNLOAD AQUI

Retirando bordas das imagens

2008-01-24T06:51:00.000-08:00

Em alguns templates as imagens postadas ficam com bordas, caso queira tirar essa borda altomaticamente de todas as imagens, faça o seguinte:

Procure as seguintes linhas no HTML do seu template:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

E troque border:1px por border:0px

Assim a borda ficará com tamanho minimo.

Tenha um dominio .net .org .com .info de Graça

2008-01-24T06:50:00.000-08:00

Tutorial passo-a-passo:

http://www.ezyrewards.com/?id=210961

Abra o link acima e clique em "join now" no menu do site, irá aparecer uma página de formulário, pedindo para você preencher alguns campos, preencha-os (Obs.: Preencha tudo corretamente para o administrador não cancelar a conta!), marque o "Yes, I agree." em "Terms and Conditions" e clique em "Create Account", vá no seu email e confirme a conta e faça o login no site.Após ter efetuado o login, você será redirecionado para a página das informações da conta, rocure por "Referrals" no menu, indicando pessoas com o "Your Referral Link" você ganhará pontos para trocar pelos domínios.Agora, para ganhar os pontos sem precisar dos cadastros, procure por "offers" no menu do site, irá aparecer umas ofertas com alguns links para você clicar, basta acessar cada um dos links e finalizar o cadastro dos mesmos, com isso, o status da lateral direita do site, irá mudar de "Not confirmed" para "Pending"!Agora é só acumular pontos para pegar seus domínios!Domínios .info são 300 pontos, os outros(.com .org .net e etc) são 1000 pontos!

Obs:Eu ainda estou testando para ver se ganha mesmo mas parece que ganha sim se alguem puder se cadastra ae vlw.

Instalando novos templates ao blogger

2008-01-23T09:44:00.000-08:00

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.

Colocando Meta Tags

2008-01-23T09:40:00.000-08:00

Se você quer inserir Meta Tag no seu blog (o que facilita os sites de busca a te encontrarem), coloque no seu blog o seguinte código, logo depois de:

<title>Nome do Seu Blog</title>

Coloque este:

<meta content='COLOQUE AQUI O QUE QUER QUE APAREÇA SOB O TITULO DO SEU BLOG NOS MECANISMOS DE BUSCA' name='description'/>
<meta content='COLOQUE AQUI AS PALAVRAS CHAVES QUE DESCREVEM SEU BLOG SEPARADAS POR VIRGULAS SEM ESPAÇOS' name='keywords'/>
<meta content='index,follow' name='robots'/>

Depois de inserir o código, visualize e estando tudo ok, salve o template.

Tradutor no blog

2008-01-23T09:37:00.000-08:00

Para colocar um tradutor no seu blog, como o que eu tenho aqui, copie o código abaixo, vá em Modelo->Inserir Elemento de Página-> e escolha HTML/JavaScript e cole o código, salvando.

<center><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/></center>

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">

<input value="PT" name="wl_srclang" type="hidden"/>

<select style="font-size: 70%; width: 160px;" name="wl_trglang">

<option value="EN"/>Português - Inglês

<option value="FR"/>Português - Francês

<option value="DE"/>Português - Alemão

<option value="IT"/>Português - Italiano

<option value="PT"/>Português - Português

<option value="RU"/>Português - Russo

<option value="ES"/>Português - Espanhol

</select>

<input value="ENDEREÇO DO SEU BLOG" name="wl_url" type="hidden"/>

<input style="font-size: 70%; width: 50px;" value="Traduza" type="submit"/>

</form>

A imagem está hospedada no TinyPic, mas é sempre bom guardar uma cópia no seu computador.

Colocando a data abaixo do titulo do post

2008-01-23T09:30:00.000-08:00

Vá no html do seu template, marque Expandir Modelo de Widget e encontre este trecho (lembre de usar o Ctrl+F para localizar mais rápido):

<?xml:namespace prefix = b /><b:if cond="data:post.dateHeader">
<h2 class="date-header"><?xml:namespace prefix = data /><data:post.dateheader></data:post.dateheader></h2>
</b:if>

O que vocês terão que fazer é deslocar este trecho para outro trecho mais acima. Selecione e recorte este trecho do código e depois encontre esta outra parte:

<div class="post-header-line-1">
<div class="post-body">

e cole logo abaixo o código que você recortou antes. Deve ficar assim:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2> </b:if>
<p><data:post.body/></p>

Visualize e se tudo estiver ok, salve. Se não estiver correto, é só clicar em Limpar Edições e tentar novamente

Teste seu layout

2008-01-23T09:28:00.000-08:00

O que é Browsershots?

Browsershots tira screenshots do seu layout em diferentes navegadores. Ele é um serviço livre de código-aberto criado por Johann C. Rocholl. Quando você enviar o endereço de seu site, ele será adicionado à fila de trabalhos. Um número de computadores distribuídos irá abrir seu website em seus navegadores. Então ele irá tirar screenshots e enviá-las para o servidor central.

Prá evitar que o seu blog seja lindo no Firefox e ao mesmo tempo pareça o trabalho de um bêbado que digita com os cotovelos no IE, faça uso deste site: http://www.browsershots.org.
Nele você digita a url do seu blog e vai fazer um lanche. Uns 20 minutos depois ele mostra o screenshot da sua página em 18 navegadores (ou versões) diferentes. Ele dá um prazo (na fila de espera) de 30 minutos que pode ser extendido.

Adicionando coluna no template

2008-01-23T09:12:00.000-08:00

Eu vou ensinar aqui a adicionar uma nova coluna ao blog,vou mostrar 3 tipos de posicionamento de colunas,então vamos começar:

Vá no codigo do seu template

Sidebar - Main - Sidebar:

*Primeiro Passo (para todos os casos)

Encontrem este trecho do código do template:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
float: left;
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 */
}

#sidebar-wrapper {
width: 190px;
float: right;
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 */
}

#newsidebar-wrapper {
width: 190px;
float: left;
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 */
}

Outer-wrapper mostra a medida total que terá seu template, a largura dele. A largura das colunas nunca pode exceder a largura da Outer-wrapper, ou uma coluna 'descerá' para dar espaço à outra. A primeira coisa a fazer é alterar o valor em width que está em Outer-wrapper. No Mínima, a largura é só de 660px. Se você deseja tres colunas no seu template (sidebar-main-sidebar), coloque pelo menos 800px de largura. Agora copie todo o trecho que se refere à newsidebar e cole abaixo do sidebar, como mostrado acima, em vermelho. Note que destaquei onde está float: left; Para que uma coluna fique à direita e outra à esquerda da coluna do post (sidebar-main-sidebar), sidebar-wrapper e newsidebar-wrapper precisam estar em lados opostos.

Muito bem. Agora determine as medidas que terão as colunas. Não se esqueça que o valor total não poderá ultrapassar o valor da Outer-Wrapper, incluindo aí bordas e espaçamento entre as colunas.

*Segundo Passo (para todos os casos)

Agora desça a página até encontrar este trecho do html (obs: desmarque onde está Expandir Modelo de Widget, para facilitar)

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
/<b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
< /div>

Acrescente a parte em vermelho, que se refere a coluna criada, antes de main-wrapper. Por que antes? Por que está determinado que esta coluna ficará à esquerda da coluna do post (foi determinado lá em cima, em float: left ok?), ou seja : newsidebar-main-sidebar.

Main - Sidebar - Sidebar:

Agora vamos deixar a coluna do post à esquerda e as sidebars à direita, uma do lado da outra.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
border: 1px solid $bordercolor;
float: left;
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 */
}

#sidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: right;
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 */
}

#newsidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: left;
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 */
}

Aqui basta determinar em Float a mesma posição para as sidebars, como está em vermelho e depois seguir o segundo passo ensinado acima.

Main - Sidebar sobre Sidebar

Determine que as duas sidebars fiquem do mesmo lado (right ou left, em oposição a coluna do post, claro), apenas altere o valor de Outer-Wrapper para que caiba apenas a coluna do post e uma coluna lateral, o que obrigará a segunda coluna a descer.
Por exemplo: Determine o valor em width de Outer-Wrapper para 800px, para Main-wrapper 550px e para a Sidebar (para as duas, Sidebar e Newsidebar) 220px. A falta de espaço obrigará uma das colunas a descerem. Mas não se esqueça de detrminar que as duas colunas fiquem juntas à direita ou esquerda, ou uma delas descerá sob a coluna do post ok?

Colocando margem nos widgets do blogger

2008-01-23T09:11:00.000-08:00

Para que as widgets (Elementos de Página) que você insere no seu blog não fiquem coladas às bordas, procure este trecho do código (baseado no Mínima, em outros templates existem pequenas variações):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:10px;
padding:0px;
}

Basta mudar o valor da margin que lá está para esta que coloquei, 10px. Se você preferir maior ou menor distância da borda, altere este valor.

Alterando tamanho da coluna do titulo do blog

2008-01-23T09:09:00.000-08:00

Vá no codigo do seu template e procure por:

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

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

Modifique o valor de width para um que corresponda à medida do template.

Adicione um Caixa de Texto ao blog

2008-01-23T08:57:00.001-08:00

Com esta caixinha de texto é possível também publicar códigos ou mesmo dar um destaque em um post.

<textarea style="COLOR: rgb(0,0,0); BACKGROUND-COLOR: #ffffff" rows="5" cols="40">ESCREVA AQUI O SEU TEXTO</textarea>

Exemplo:

Adicione uma Ferramenta de Busca

2008-01-23T08:56:00.000-08:00

De maneira rápida e rasteira. Este pequeno código permite a você adicionar uma busca interna no conteúdo do seu blog hospedado no Blogger.

Tudo que você precisa fazer é ir na tela de edição de layout do Blogger, clicar em “Elementos da Página” .E escolher a opçao "Adicionar um elemento de página"e depois vai em "HTML/JavaScript "

Depois, basta adicionar o código abaixo no campo de edição da janela que irá abrir e pronto!

<form action="/search" style="display: inline"
id="searchthis" name="searchthis" method="get">
<input id="search-box" name="q" />
<input id="search-btn" value="Buscar" type="submit" />
</form>

Colocando cor ou imagem nos titulos da sidebar

2008-01-23T08:53:00.000-08:00

Para colocar cor ou mesmo uma imagem nos títulos da sidebar,procure este trecho do código do seu template (lembrando sempre que todos os tutoriais são feitos baseados nos códigos do Mínima, do Blogger - sendo assim, é normal que existam diferenças entre o que apresento aqui e seu próprio template)

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

acrescente abaixo:

.sidebar h2{
color: $sidebartextcolor;
line-height: 1.5em;
background: #000000;
margin: 0px;
padding: 8px 0 0 0;
text-align: center;
}

Se no seu template já existir este trecho do seu código, é só colocar background: (valor da cor); e ter certeza de que margin:0px;. Padding afasta o título do topo da coluna - você pode alterar este valor ao seu gosto. Para que o texto não fique colado na lateral esquerda (já que margin = 0) coloque texto alinhado no centro.

Se você deseja inserir uma imagem, por exemplo, é só colocar:

*se a imagem tem o mesmo tamanho e altura especificada para o titulo:
background: url(endereço da imagem);

*ou, se a imagem for menor e você deseja que ela se repita:
background: url(endereço da imagem) repeat-x;

Retirando a numeração ao lado dos marcadores

2008-01-23T08:43:00.000-08:00

Vá no HTML do seu blog, clique em Expandir Modelo de Widgets e procure por:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/>< /a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Apague o que está em negrito, visualize e se estiver ok (ou seja, se tiver sumido a numeração), salve. OBS: aqui no exemplo, a widget Marcadores está seguida de <div id='sidebar-wrapper'>, mas não significa que esteja assim no seu código. Também não significa que o título da sua widget seja Marcadores: faça a busca pelo título que escolheu.

Adicionar marcadores de postagem

2008-01-23T08:42:00.000-08:00

Os marcadores servem para separar seus posts em categorias ou assuntos, facilitando a visualização dos mesmos. Para adicionar marcadores, vá em Modelos, Adicionar Marcadores. Quando terminar de escrever um post, no retângulo onde se lê "Marcadores para esta postagem", você dará um nome para a categoria em que o post se encaixa. Após a primeira vez que você insere um marcador, a opção fica memorizada. Depois, em Modelo, arraste o retângulo que corresponde a Marcadores para a posição que desejar, no template.
Um exemplo de como ficam os marcadores na lateral do template:
música(2)
poesia(4)
humor(2)
Onde os números em parênteses se referem a quantidade de posts sobre o tema.

Adicionar titulo no blog

2008-01-23T08:41:00.000-08:00

Para adiconar o titulo ao blog, vá em Modelo, Adicionar Cabeçalho e coloque o título e a descrição do seu blog. Salve e arraste o retângulo Cabeçalho até o topo da página. Fazendo isso, você verá um retângulo maior, pontilhado. Solte o titulo alí e salve.

Alterando largura das colunas

2008-01-23T08:38:00.000-08:00

Procure no seu código HTML as seguintes tags:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}

#main-wrapper {
background-color: #F3F3EB;
border-top: 3px solid $bordercolor;
border-left: 3px solid $bordercolor;
border-bottom: 3px solid #43433B;
border-right:3px solid #43433B;
margin-left: 5px;
width: 550px;
float: left;
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 */
}

#sidebar-wrapper {
background-color: #F3F3EB;
border-top: 3px solid $bordercolor;
border-left: 3px solid $bordercolor;
border-bottom: 3px solid #43433B;
border-right:3px solid #43433B;
margin-right: 0px;
width: 250px;
float: right;
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 */
}

Tudo o que está contido em #main-wrapper se refer a coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.

Tudo o que está contido em #sidebar-wrapper se refere a coluna lateral do template (no caso de um template com uma coluna em cada lateral, aparecerá duas vezes). Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template! Obedeça as dimensões que estão contidas na tag acima, em #outer-wrapper , sem ultrapassá-la!

Alterando aparencia das colunas

2008-01-23T08:34:00.000-08:00

Para fazer alterações de bordas e planos de fundo nas colunas do template, procure no codigo do template:

#main-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;
margin-left: 0px;
width: 400px;
float: left;

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 */
}

#sidebar-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;
margin-right: 0px;
width: 165px;
float: right;
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 */
}

Onde #main-wrapper é a coluna de postagem e #sidebar-wrapper a do perfil.
Se você deseja colocar uma cor como plano de fundo da coluna use background-color: e o código da cor. Se deseja uma imagem, coloque background: url(endereço da imagem) repeat;

Em border você estabelecerá, como vimos em Header, a largura, cor e textura da borda. Aqui valem os mesmos procedimentos. Se você deseja colocar borda somente no topo e em uma das laterais, por exemplo, é só colocar:
border-top: 1px solid #00000; (largura em pixels e cor, somente como exemplos)
border-left: 1px solid #000000;

Assim a coluna terá borda somente no topo e do lado esquerdo. Se deseja borda em toda volta da coluna é só colocar:
border: 1px solid #000000; (sem precisar estabelecer onde a borda deve aparecer.)

Width estabelece a largura da coluna.

Removendo a Barra de Navegaçao do blogger

2008-01-23T08:31:00.000-08:00

Basta adicionar o seguinte código antes de fechar a tag HEAD do template:

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

Criando banner no Photoshop

2008-01-10T11:31:00.000-08:00

Aqui vai uma video aula de como fazer um banner no photoshop,encontre este video no blog:http://dicasblogger.blogspot.com