Tutorial: Blogger

Algumas pessoas vem me pedindo para postar algumas dicas sobre o blogger.

sem mais enrolação, vamos ao tutorial!

Título do seu Blog em Movimento {Blogger}

O1. Primeiramente, faça o login em sua conta do Blogger.

O2. Quando estiver no painel no Blogger, você verá o nome do seu blog e logo abaixo do nome dele alguns link para acessar diversas ferramentas do Blogger. Você irá clicar em "Design", veja o print:

O3. Ao clicar em "Design", você será redirecionado para a área onde você pode editar a aparência do seu blog. Mude da tela "Elementos da Página", para a tela "Editar HTML".

O4. Agora você está frente-a-frente com o HTML do seu blog :) e abaixo segue o script para você poder colocar esse efeito em seu blog, selecione-o e o copie:

var txt=" TÍTULO DO SEU BLOG ";

var espera=80;

var refresco=null;

function rotulo_title() {

document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);}

rotulo_title();

</script>

O5. Após copiar o código, vá para página do HTML do seu blog e procure pela palavra </head>. Para achá-la com mais fácilidade, é só usar o campo de pesquisa, para acessá-lo é só teclar "Ctrl+F" e fazer sua pesquisa.

O6. Quando encontrar a palavra </head>, cole o script que você copiou depois dela. Antes de testar ou de salvar, você precisa fazer uma pequena alteração no código, substuindo o texto TITULO DO SEU BLOG pelo nome {título} do seu blog. Clique em "Visualizar". Se estiver tudo certo com seu blog e o efeito estiver funcionando, feche a página de visualização e clique em "Salvar Modelo".

O7. Pronto! Para alterar a velocidade com que o texto se move, é só alterar o valor do número na linha var espera=80; Quanto menor o valor do número mais rápido, quanto maior mais lento.

Colocando Imagem no Cabeçalho {Blogger}

O1. Primeiramente, faça o login em sua conta do Blogger.

O3. Ao clicar em "Design", você será redirecionado para a área onde você pode editar a aparência do seu blog. Permaneça na tela "Elementos da Página".

O4. Você está vendo todos os elementos da sua página e a forma como eles estão organizados. O cabeçalho geralmente fica abaixo da navbar, é bem fácil encontrá-lo, nele estará escrito o nome do seu blog e ao lado do nome em parênteses estará a palavra "Cabeçalho". Quando encontrar, clique na palavra "Editar" que está no espaço dele, veja o print:

CLIQUE NA IMAGEM PARA AMPLIÁ-LA.

O5. Ao clicar em "Editar" uma pequena janela será aberta, e é através dela que você irá colocar a imagem que deseja no cabeçalho do seu blog. Veja o print abaixo:

CLIQUE NA IMAGEM PARA AMPLIÁ-LA.

O6. Com tudo já ajustado, é só clicar no botão "Salvar". Agora é só olhar o seu blog e ver está como você quer e pronto!

Colocando Cursor com Estrelas Caindo {Blogger}

O1. Primeiramente, faça o login em sua conta do Blogger.

O3. Ao clicar em "Design", você será redirecionado para a área onde você pode editar a aparência do seu blog. Mude da tela "Elementos da Página", para a tela "Editar HTML".

O4. Agora você está frente-a-frente com o HTML do seu blog :) e abaixo segue o script para você poder colocar esse efeito em seu blog, selecione-o e o copie.

// <![CDATA[

var colour="#FFFFFF";

var sparkles=50;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

O5. Após copiar o código, vá para página do HTML do seu blog e procure pela palavra </body>. Para achá-la com mais fácilidade, é só usar o campo de pesquisa, para acessá-lo é só teclar "Ctrl+F" e fazer sua pesquisa.

O6. Quando encontrar a palavra </body>, cole o script que você copiou antes dela e clique em "Visualizar". Se estiver tudo certo com seu blog e o efeito estiver funcionando, feche a página de visualização e clique em "Salvar Modelo".

O7. Pronto! Para modificar a cor das estrelinhas, você deve fazer uma pequena alteração no script, alterando o código da cor em var colour="#FFFFFF"

A cor que está no script é o branco, abaixo segue o código de algumas cores pra você utilizar no seu script:

VERMELHO: #FF0000

ROSA: #FF69B4

ROXO: #912CEE

AZUL: #0000FF

AZUL CLARO: #1E90FF

VERDE: #00FF00

AMARELO: #FFD700

ALARANJADO: #FF8C00

PRETO: #000000

Colocando Link em uma Imagem {Blogger}

O1. Primeiramente, você deve hospedar a imagem que deseja utilizar. Aqui no blog tem um tutorial ensinando como hospedar imagens, clique aqui para o ler.

O2. Copie o endereço da imagem que é conhecido como link direto ou URL, e cole-o em um bloco de notas ou no Word, tanto faz.

O3. Copie o código abaixo e cole-o no local onde você deseja que a imagem apareça:

O4. Agora vamos fazer as devidas alterações no código. Onde está escrito LINK DO SITE, você apaga e coloca o link do site para onde quer que a imagem redirecione e onde está escrito LINK DA IMAGEM, você também apaga e coloca no lugar o endereço da imagem que você colocou no bloco do notas {ou no Word}.

O5. Pronto agora é só salvar! Você pode utilizar este código nas postagens ou no widget HTML/JavaScript quando quiser colocar na lateral do seu blog.

Créditos a PhotoScape Edições.

- Caixa de pesquisa

Sua caixa de pesquisa ficará como a da imagem abaixo.

1- Vá em Painel, Design, Elementos da página e adicione um gadget Html/JavaScript e cole o código a seguir sem fazer NENHUMA modificação:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

2- Vá em Painel, Design, Editar HTML, aperte CTRL+F, procure por e ]]></b:skin> cole ACIMA fazendo as alterações desejadas :

.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

- Menu Horizontal

Ele ficará assim:

1- Vá até Design, Elementos de Página, adcione um Gadget HTML/Javascript e adcione o código abaixo:

<div style="text-align: center;"><span style='-moz-border-radius: 7px; background-color:#f781f3; padding: 5px 15px 5px 15px;'><a href="LINK 1 ">categoria 1</a></span> <span style='-moz-border-radius: 7px; background-color:#58acfa; padding: 5px 15px 5px 15px;'><a href="LINK 2">categoria 2</a></span> <span style='-moz-border-radius: 7px; background-color:#81f79f; padding: 5px 15px 5px 15px;'><a href=" LINK 3 ">categoria 3</a></span> <span style='-moz-border-radius: 7px; background-color:#f78181; padding: 5px 15px 5px 15px;'><a href=" LINK 4 ">categoria 4</a></span> <span style='-moz-border-radius: 7px; background-color:#f2f5a9; padding: 5px 15px 5px 15px;'><a href="LINK 5">categoria 5</a></span><br /><br /></div>

2- Para fazer as alterações no seu código siga a explicação abaixo:

moz-border-radius: 7px – É o efeito redondo do seu menu, você pode alterar o número para diminuir ou aumentar este efeito.

5px 15px 5px 15px – É o tamanho de cada categoria do menu.

#f781f3 – Cor de cada categoria do menu.

Categoria – Altere para o nome de cada categoria de seu menu.

LINK – É o link de cada categoria do seu menu.

- Seleção de Textos

Vários blogs já possuem a seleção de texto personalizada com sua cor de preferencia, e se você ainda não tem, pode aprender neste tutorial como fazer para mudar a cor da seleção de texto do seu blog.

Ex: O daqui do Playing God

1- Vá em Design, editar HTML, pressione CTRL+F, e procure por:

]]></b:skin>

2- E cole ACIMA dela o código abaixo:

*::-moz-selection {
background:#FFFFFF; /*---COR DO FUNDO--*/
color:#000000; /*--COR DA FONTE--*/
}
*::selection {
background:#FFFFFF;/*---COR DO FUNDO--*/
color:#000000; /*--COR DA FONTE--*/
}

Obs: Você deverá alterar as cores. No código acima, você poderá alterar o código da cor da fonte e o código do fundo. Encontre aqui o código das cores para fazer a alteração.

- Postar Imagens nos Links

O tutorial em si, é isso adicionar imagem nos links

"Postagens mais recentes" "início" "Postagens mais antigas"

Mudando “Postagens recentes”:

1°: Vá no seu HTML marque a opção ''expandir modelos de widgets'' &

dê um CTRL + F e procure esse trecho : <data:newerPageTitle/>

2°: Apague ele e no lugar cole <img src="URL DA IMAGEM" />

onde está URL DA IMAGEM e coloque a URL da imagem

que você quer que apareça no lugar ''postagens recentes''.

Mudando ''Início''

1°: Procure por: <data:homeMsg/>

2°: Apague e no lugar cole <img src="URL DA IMAGEM" /> e

onde está URL DA IMAGEM e coloque a URL da imagem

que você quer que apareça no lugar

de " início ".

Mudando ''Postagens Antigas''

1°: Procure por: <data:olderPageTitle/>

2°: Apague e no lugar coloque <img src="URL DA IMAGEM" />

onde está URL DA IMAGEM e coloque a URL da imagem

que você quer que apareça no lugar "Postagens antigas"

- Mude "postar um comentário" para imagem

1°Passo : Vá no seu HTML - marque a opção expandir ''modelos de widgets''.

2° Passo :Aperte as teclas ctrl + f e procure por:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

3°Passo : Apague a parte em vermelho e coloque em seu lugar:

<img src="URL DA IMAGEM"/>

4° Passo : Mude o trecho URL DA IMAGEM pela url da imagem

que você escolher!

Aqui estão algumas que eu mesma fiz,

mas é claro que vocês mesmas podem criar as suas!

''Para pegar a URL de uma imagem é só clicar com o botão direito do mouse sobre ela e selecionar a opção COPIAR URL DA IMAGEM''

5° Passo: Antes de Salvar clique em visualizar, para ver se tá tudo certo!

- Transparência nas imagens

Transparente-Opaco :

1° - Vá em "Editar HTML" , não precisa clicar em "Expandir modelos de widgets", e procure por:

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

2°- E SUBSTITUA tudo por:

.post img {
filter: alpha(opacity:0.5); 
KHTMLOpacity: 0.5; 
MozOpacity: 0.5; 
-khtml-opacity:.50; 
-ms-filter:"alpha(opacity=50)"; 
-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50;
}
.post img:hover {
filter: alpha(opacity:1); 
KHTMLOpacity: 1; 
MozOpacity: 1; 
-khtml-opacity:.1; 
-ms-filter:"alpha(opacity=100)"; 
-moz-opacity:1; 
filter:alpha(opacity=100); 
opacity:1;
}

Opaco - Transparente :

* SUBSTITUA por:


.post img {
filter: alpha(opacity:1); 
KHTMLOpacity: 1; 
MozOpacity: 1; 
-khtml-opacity:.1; 
-ms-filter:"alpha(opacity=100)"; 
-moz-opacity:1; 
filter:alpha(opacity=100); 
opacity:1;
}
.post img:hover {
filter: alpha(opacity:0.5); 
KHTMLOpacity: 0.5; 
MozOpacity: 0.5; 
-khtml-opacity:.50; 
-ms-filter:"alpha(opacity=50)"; 
-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50;
}

- Aplicando transparência apenas em determinadas imagens:

Para aplicar este efeito, utilize este código:

<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50"

 style="opacity: 0.5;"

src="ENDEREÇO-DA-IMAGEM" /></a>

- Trocar títulos da sidebar do Blogger por imagens

Vamos presumir aqui que você já sabe como criar widgets e que já os tenha em seu blog, podem ser mesmo os elementos de página como "Seguidores", "Perfil", "Marcadores", etc.

Para começar, no Blogger, vá em Editar HTML e selecione “Expandir modelos de widgets”:

Agora localize o seguinte:

]]></b:skin>

Então cole o próximo código acima/antes do anterior:

.widget .title img{
display: block;
text-align: center;
}

Aperte Ctrl+F e procure o título do widget que você deseja modificar o título. Encontrado o Widget, ele terá uma estrutura parecida com essa:

<b:widget id='Text2' locked='false' title='Titulo Vagabundo' type='Text'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
[…]

Agora o mais importante: Apague isto:

<data:title/>

Substituindo por:

<img src="http://A_URL_DE_SUA_IMAGEM"/>

Lembrando-se evidentemente de substituir o escrito em AZUL pela url de sua imagem. Agora é só salvar e ver o resultado. Se querem um exemplo de como fica vejam abaixo a imagem que usamos aqui como título para nosso widget de posts relacionados. Seu widget agora tem uma imagem como título!!

Observações importantes:

1 - Para fazer o mesmo com os outros widgets é só ir editando um por um.
2 - Cada widget tem um título então usaremos imagens diferentes para cada um pois elas irão conter o título escrito nelas préviamente