Criando seu plano de fundo

Bom Galera aqui estou eu inaugurando o blog da comunidade "Burlando o Conhecimento" com este tutorial para que vocês possam criar seus própios planos de fundo no orkut, eu Disponibilizei na Comunidade alguns Códigos que eu mesmo fiz, bom como eu avisei na comunidade, tem códigos que precisaram que o usuario tenha uma noção mínima de JAVASCRIPT, HTML e XHTML pois estas três linguagens são o corpo do código no caso dependendo do código será somente utilizado um desses três. O que faremos aqui será um script para o Greasemonkey e por isso é necessário que você tenha o Mozilla Firefox e o Greasemonkey instalados no seu computador. Sendo assim podemos definirr que agora construiremos um "miniprograma" para melhorar o visual do orkut.


Veja um exemplo de como pode ficar seu orkut:




Para podermos criar o nosso plano de fundo seguiremos 3 principais passos.

1° PASSO:
Antes de comessarmos já devemos saber qual a imagem que queremos colocar como plano de fundo, e comessamos hospedando essa imagem. É simples, para hospedarmos a imagem acesse o site: "http://www.imageshack.us/" na parte superior esquerda da página aparecerá a opção "search in my computer" que em português é simplesmente "Arquivo" clique nessa opção e procure a imagem do plano de fundo no seu computador, feito isso clique na opção "Host It", o site irá fazer o upload da imagem do seu computador para a internet. Feito isso você irá receber o endereço direto do link da sua imagem na internet como mostra a imagem:


Esse link você usará no código fonte a seguir, por isso guarde bem o link direto da sua imagem.



2° Passo:
Aprendendo a criar o código fonte Passo a Passo

Inicio

// ==UserScript==
// @name [+]BurladooConhecimento[+] >>> Digite a descrição do seu plano de fundo aqui
// @namespace http://www.orkut.com/Community.aspx?cmm=49681901 >>> Endereço da comunidade
// @description Jesus[Eros] criou uma maneira de melhorar seu orkut >>> Comentarios adicionais
// @include http://www.orkut.com/* >>> É necessário que fique do jeito que esta pois o greasemonkey atuará neste site
// @author Jesus[Eros] >>> Nome do autor
// ==/UserScript==

Principais Características

// Cor de fundo , se for colocar uma foto de fundo , deixe em branco // Ex.: fundo = '';
var fundo = '';

// ESTA PARTE É MUITO IMPORTANTE
// ONDE ESTA ESCRITO 'COLOQUE SUA IMAGEM AQUI' VOCÊ PRECISARA COLOCAR O
//LINK DIRETO DENTRO
// DAS ASPAS O LINK DIRETO DA SUA IMAGEM ONDE VOCÊ HOSPEDOU ELA
// Ex: 'http://img362.imageshack.us/img362/8315/burlandooconhecimentojg3.jpg'

var imagem = 'COLOQUE SUA IMAGEM AQUI';

// Letra , escolha a sua fonte desejada // Ex.: arial , comic sans ms , etc
var letra = 'verdana'; /* verdana, arial, courier new, etc */

// Tamanho da letra
var tamanho_letra = '12px';

// Cor da letra
var cor_letra = 'navy';

// Cor dos links
var links = 'navy';

// Cor dos links quando vc passa o mouse em cima
var link_onMouse = 'orange';

Configurando o Menu do orkut

// Letra do menu, escolha a fonte desejada
var letra_menu = 'verdana';

// Tamanho da letra // Ex.: 10px
var tamanho_menu = '11px';

// Cor das palavras do menu do orkut
// É o setor onde fica: Inicio | Perfil | Página de Recados | Amigos | Comunidades
var cor_letra_menu = 'black';

// cor do fundo do menu
var fundo_menu = 'gray';

Configurando as Cores do orkut

// Este setor vai dependendo de cada visual que cada um quer
// Pois dependendo do fundo que você for usar mudar um pouco
// Nas cores do orkut tambem pode ser interessante.
// As cores que estão prenchidas agora são as cores
// Padrão do orkut

var cor1 = 'white';
var cor2 = 'silver';
var cor3 = 'white';
var cor4 = 'silver';
var cor5 = 'white';
var cor6 = 'silver';
var cor7 = 'white';
var cor8 = 'silver';
var cor9 = 'white';

Fim das Configurações Cores do Orkut

// Bom daqui para baixo não é necessário mudar nada, pois é esta parte que fará com que
// O seu plano de fundo seja interpretado pelo Greasemonkey.

Codigo Criado por Jesus[Eros]

var transparente = 'http://www.bluekut.xpg.com.br/transparente.gif';
skin=document.body.innerHTML;
skin=skin.replace(/(#c9d6eb)/g,cor1);
skin=skin.replace(/(#bfd0ea)/g,cor2);
skin=skin.replace(/(#e5ecf4)/g,cor3);
skin=skin.replace(/(#e4f2f9)/g,cor4);
skin=skin.replace(/(#f0e8f5)/g,cor5);
skin=skin.replace(/(#d4dded)/g,cor6);
skin=skin.replace(/(#ebffed)/g,cor7);
skin=skin.replace(/(#fcf0d8)/g,cor8);
skin=skin.replace(/(#a1bbe4)/g,cor9);
document.body.background=''+imagem+'';
skin=skin.replace(/http...images3.orkut.com.img.tr1.gif/gi,transparente);
skin=skin.replace(/http...images3.orkut.com.img.tr2.gif/gi,transparente);
skin=skin.replace(/http...images3.orkut.com.img.tr3.gif/gi,transparente);
skin=skin.replace(/http...images3.orkut.com.img.tr4.gif/gi,transparente);
skin=skin.replace(/http...images3.orkut.com.img.tr8.gif/gi,transparente);
skin=skin.replace(/http...images3.orkut.com.img.tg4.gif/gi,transparente);
document.body.innerHTML=skin+
'';

Fim

OBS: o parte do código que fará com que seja interpretado pelo Greasemonkey não está completo é necessário que você faça o Download do arquivo no formato (.txt) com o código completo, e somente será necessário mudar a configuração que você quer colocar e o seu plano de fundo. Mais se achou complicado todo o processo ensinado aqui encima não se preocupe no Documento que você fará o Download o código já está pronto, tudo o que você precisa fazer é colar o link direto da sua imagem dentro das aspas onde esta escrito 'COLOQUE SUA IMAGEM AQUI' e depois salve com a extensão: "nomedoarquivo.user.js" é obrigatorio que tenha o nome do arquivo e a extensão ".user.js" senão o código não funcionará. Feito isso vamos para o terceiro passo.

Download


3° Passo:
Bom já esta quase pronto o nosso plano de fundo o único que falta agora é hospedar ele num servidor de sites afinal não é um código de fonte qualquer. Existe um número imenso de host de sites pois muitos deles são pagos e são escializados para trabalhar com hospedagem FTP e XFTP para porte de grandes sites, que não seria o nosso caso. Bom eu hospedei os meus planos de fundo no Geocities que é um serviço do yahoo e é gratuito, mais se você não tem costume em hospedar no geocities será um problema iniciar por lá. Hospedaremos então no serviço de hospedagem da google que também é gratuito. Acesse o site "http://pages.google.com/" não será necessesário cadastrar se você já possui uma conta google como por exemplo Gmail, você pode estar usando seu própio e-mail do gmail para acessar ao serviço de hospedamento do google. Aceite os termos de uso e tudo mais até você chegar na seguinte imagem:

Após isso clique na opção "Arquivo" (Upload) e procure o código fonte que você salvou com a extensão ".user.js" e o site fará automáticamente o upload do arquivo. Depois disso aparecerá nome do seu arquivo na tela(como mostra a imagem acima). Bom se o nome do seu arquivo apareceu como mostra a imagem acima isso significa que você obteve sucesso na criação do seu plano de fundo.
Se você clicar encima do nome do seu plano de fundo aparecerá a seguinte imagem:

Clique na opção instalar e pronto seu plano de fundo já está instalado no seu orkut. Você pode compartilhar seu plano de fundo com os seus amigos tambem, para fazer isso será necesserário que você envie o link para eles. Para isso clique com o botão do lado direito do mouse encima do nome do seu arquivo e clique em "copiar link" e pronto agora é somente enviar o link para seus amigos para que eles possam ter o mesmo plano de fundo que o seu.

Bom é isso galera espero que tenham gostado e entendido o tutorial, mais se surgiu algum dúvida estarei disponível para esclarecer.