Título do seu Blog em Movimento {Blogger}
Hoje eu vou ensinar vocês a colocarem um script bem legal que deixa o título do blog em movimento na aba e na barra superior do navegador, eu já usei esse efeito aqui no blog há algum tempo, mas depois retirei. Como muita gente vem me perguntando como colocar, preparei um tutorial, espero que gostem!
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:
<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.
Créditos a PhotoScape Edições.
Colocando Imagem no Cabeçalho {Blogger}
Hoje vou ensinar a vocês como colocar uma imagem no cabeçalho do seu blog. Pra quem ainda não sabe, cabeçalho é aquele espaço superior onde fica o título do blog. É bem fácil, espero que todos consigam...
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!
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:
CLIQUE NA IMAGEM PARA AMPLIÁ-LA.
CLIQUE NA IMAGEM PARA AMPLIÁ-LA.
Créditos a PhotoScape Edições.
Colocando Cursor com Estrelas Caindo {Blogger}
Eu já perdi a conta de quantas pessoas me pediram pra ensinar a colocar em seus blogs essas estrelinhas que saem do mouse... Finalmente eu vou ensinar a vocês e espero que todos consigam fazer, vamos mecher bastante com HTML e isso pode complicar muita gente, então prestem bastante atenção e qualquer dúvida é só dizer. Ao tutorial:
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:
<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 Imagem no Perfil {Orkut}
Hoje eu vou ensinar a vocês como colocar imagem no perfil do Orkut. É bem simples principalmente pra quem já está acostumado com o Orkut, mas é sempre bom tirar todas as dúvidas ;)
Vamos ao tutorial:O1. Primeiramente faça o login na sua conta do orkut, utizando o navegador Internet Explorer, é importante que você use esse navegador para não ocorrer nenhum problema, depois que você fizer todas as modificações no seu perfil, você volta para o navegador que costuma usar normalmente, Opera, Mozilla Firefox e etc. Para adicionar a imagem, também é necessário utilizar o Novo Orkut. Se você utiliza a versão antiga é só clicar no botão "teste o novo orkut!" e seguir o tutorial, depois você pode voltar para a versão antiga, é só clicar em "versão antiga".
O2. Agora clique em "perfil" e em seguida em "editar > editar texto".
O3. Vá em "Inserir imagens" e você terá acesso a uma janela onde você pode fazer o upload da sua imagem, ou seja carregar uma imagem que está em seu computador. Para adicionar uma imagem clique em "Procurar...", selecione uma imagem do seu computador e clique em "Abrir". Agora para enviar a imagem, clique em "Fazer upload" e aguarde. O carregamento vai demorar conforme o tamanho da sua imagem, por isso não recomendo que envie imagem com o comprimento maior que 400 pixeis. Se a imagem que você deseja enviar for muito grande, vá no PhotoScape e edite o tamanho dela, é só ir em "Redimensionar > Reduza o mais longo comprimento : 400 px".
CLIQUE NA IMAGEM PARA AMPLIÁ-LA.
CLIQUE NA IMAGEM PARA AMPLIÁ-LA.
CLIQUE NA IMAGEM PARA AMPLIÁ-LA.
Créditos a PhotoScape Edições.
Colocando Link em uma Imagem {Blogger}
Depois de muito pedidos e muitas perguntas, finalmente resolvi criar uma categoria com dicas para o Orkut e para o Blogger {Blogspot}. Eu vou passar pra vocês algumas dicas básicas e espero que gostem :D
Hoje, eu vou ensinar como colocar link em uma imagem no Blogger. Ou seja, como fazer para que quando alguém clique sobre uma certa imagem que está em seu blog, essa pessoa seja redirecionada para uma página da web. Por exemplo, eu criei utilizando o PhotoScape, um pequeno banner e eu quero que quando as pessoas cliquem sobre ele, elas sejam redirecionadas para o site www.pensador.info, vejam como ficou:
Hoje, eu vou ensinar como colocar link em uma imagem no Blogger. Ou seja, como fazer para que quando alguém clique sobre uma certa imagem que está em seu blog, essa pessoa seja redirecionada para uma página da web. Por exemplo, eu criei utilizando o PhotoScape, um pequeno banner e eu quero que quando as pessoas cliquem sobre ele, elas sejam redirecionadas para o site www.pensador.info, vejam como ficou:
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:
<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.
Nenhum comentário:
Postar um comentário