Como editar um tema simples

Vou dar agora umas dicas básicas para pessoas quem não sabe criar códigos do zero, isso é meio complicado, não é mesmo? Mas existe uma coisa incrível que se chama Google, e muitos perfil que você vê no Chatango são feitos a partir de códigos do Tumblr, mas agora vou mostrar apenas o básico de como usar códigos do orkut, se você aprender o básico vai poder editar os de Tumblr também. Vamos entender os códigos básicos para criar um perfil simples no Chatango, não considero isso um tutorial e sim apenas uma dica. Antes de mais nada entre no seu editor html, se você não conhece um use um desses. [ jsbin ] [ Editor ] Pegue esse código ai embaixo e cole no editor. A parte em vermelho tu coloca o fundo. Eu sugiro que seja um fundo que repete, por que se não vai ficar os quadros. Exemplo de fundos. 

[ Link ] [Link ] [ Link ] [ Link ] [ Link ] [ Link ] [ Link ] [ Link ] 

Se tu prefere o fundo todo de uma cor apenas, é só por uma imagem preta ou da cor que desejar. O bom do fundo branco é que você pode usar imagens com fundos brancos, e se tu usar um bg como vou usar só fica bom se por uma render. Não pegue o link da imagem direto do Google, por que isso? por que o Google é muito grande e vários sites ficam offline ai então a imagem que você usou simplesmente fica offline também. Então minha dica é que você use um site para upar as imagens. Exemplo de sites para upar imagens.
[ Imgur ]  [ Tinypic ] [ Imgbox ]

<div id="layer1" style="position:absolute; top:0px; left:0px; width:1400; height:1000; background: url(URL DO FUNDO); background-color:#FF69B4; background-repeat: repeat;">


Vamos lá, em
Width:1400 = Largura.
Height:1000 = Altura
Background-color:#FF69B4 = Cor.

Em width eu deixei assim, width:1349 acho que 1400 ficou grande de mais,
Não sei se é por causa do navegador, por que antigamente eu eu usava 1400 e ficava bom.

Em Height:1000 deixei como está.
Background-color:#FF69B4  Eu deixei #ffffff que é o branco,

Se tu não conhece os códigos das cores aqui tem umas tabela
Algumas cores são chatinhas para mudar.
[ Flextool ] [ Erikasarti ] [ Site112 ] [ Shdo ]

Colocou a imagem lá? Agora vamos para segunda parte.

Agora vamos pegar uma render para por lá. Renders e Pngs 
[ Google ] [ www ] [ www ] [ www ] [ www ] 

Entenda esse código.

<div style="position:fixed; left:  70px; top: 60px; position: fixed; text-align: left;" > 
<img src="URL DA IMAGEM" class="opacidade" width="600px">

Você pode editar as partes em vermelho.
left:70px É o lado que tu quer que a imagem fique.
top:60px; É a altura 
width="600px É o tamanho, largura etc, não coloque muito grande, se a imagem for pequena, vai ficar embaçado e com qualidade ruim.

No meu eu deixei assim.

left:0px É o lado que tu quer que a imagem fique.
top:0px; É a altura 
width="700px 

Pegue esse código e coloque a baixo do  primeiro código.




Agora vamos pegar esse código é ele que deixa tudo certo no lugar, é o mesmo usado para por a imagem render no lugar.

<div style="position:fixed; left:  780px; top: 60px; position: fixed; text-align: left;" >



Coloque o código lá sempre em ordem um abaixo do outro. Você se lembra do orkut? Se você não entende nada de códigos isso vai ser bem útil, tem muitos abouts hmtl no Google que foram feitos para Orkut, vamos usar um. Aqui tem exemplos Abouts html.

 [ Google ] [ Doacaolollota ]

  Após baixar o código, coloque o código no editor embaixo dos outros. Você sabe como trocar as imagens, certo? Se não sabe, copie as imagens que vem nos códigos dos Abouts html. Da um Ctrl f e cole o link lá e da um enter, então vai aparecer o link da imagem, tu apenas troca pelo link da sua imagem, e pronto. Ai você usa sua criatividade para editar os códigos isso foi apenas uma dica, não vou entrar em detalhe por que não é um tutorial, e além disso demoraria muito tirar print de cada passo a passo, mas qualquer dúvida deixe um comentário, pergunte o que quiser.
Agora vamos acrescentar apenas mais umas coisinhas, vamos por uma música. O código a baixo, coloque no inicio do seu perfil. Bem no comecinho.

<embed type='application/x-shockwave-flash' src='http://i354.photobucket.com/albums/r410/debochebr/uploads/player.swf' style='' allowscriptaccess='always' allowfullscreen='true' height='1' width='1' quality='high' flashvars='autostart=true&repeat=always&file=URL DE UM VÍDEO DO YOUTUBE=75'></embed>




Se você quiser pode também adicionar uma caixinha de dialogo.

<script language=javascript>document.title=("Nick")</script> <script language=JavaScript> var message = "Not Baka"; function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; } if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } } document.onmousedown = rtclickcheck; </SCRIPT>   

Em Nick, Tu coloca seu nick. Em Not Baka, Tu coloca a mensagem que quer que apareça quando as pessoas tentar copiar suas imagens. O código você pode por embaixo da música.


Se quiser botar um cursor [ Cursors ]
Isso foi apenas um básico para você entender os códigos, depois de ter feito tudo isso ficou desse jeito. [ Tema simples pronto ]  Esse também foi feito com os mesmo códigos [ www ] O código está ai  pra quem quiser, É isso. Bye.
◇
Subscrever: Mensagens (Atom)