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:

<script language='JavaScript'>
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.
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. 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.
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.

<script type='text/javascript'>
// <![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 imagensclique 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:

<a href="LINK DO SITE"><img src="LINK DA IMAGEM" border=0 /></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: TahomaTahoma; /* 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

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

Casinha das Gifs   1°Passo :  Vá no seu HTML marque a opção expandir ''modelos de widgets''. 
Casinha das Gifs    Passo :Aperte as teclas ctrl + f e procure por:


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

Casinha das Gifs   Passo : Apague a parte em vermelho e coloque em seu lugar:


<img src="URL DA IMAGEM"/>



Casinha das Gifs   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''
Casinha das Gifs 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'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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

→ VIDEO DE SETEMBRO

→ QUAL NOTA VOCÊ AVALIA ЄSTЄ BLOG?

→ O QUЄ VOCÊ MAIS GOSTA NA DOAÇÃO ONLY ЄXCЄPTION?

VÍDEO DO MÊS!


Obrigada pela visita! Espero que tenha gostado, e volte sempre!

Small Cute Yellow Pointer
 
Small Cute Yellow Pointer