Web Toolbar by Wibiya

17/12/2011

Moldura/Background na Cbox


Esse tutorial foi um pedido da Lua.

Comece fazendo uma imagem um pouco maior que o seu chat. Enfeite a imagem como quiser! Hospede a sua imagem ( indico o site Image Shack).No seu blog vá em Design, Elementos da Página, Adicionar um Gadget, HTML Javascript, e na parte de "Conteúdo" coloque o código abaixo:

<div style="background:url(LINK DIRETO DA SUA IMAGEM) no-repeat;padding-right: 20px;padding-left:20px;padding-top:30px;padding-bottom:10px;">CÓDIGO DA SUA CBOX</div>

Todas as partes em preto e azul você deve alterar. Agora preste atenção:

padding-left: margem esquerda;
padding-right: margem direita;
padding-bottom:  parte de baixo.
padding-top: topo;

De acordo com as informações acima você deve alterar os números de preto e azul até que a sua cbox se encaixe perfeitamente na sua imagem.



Se você não é boa com códigos fiz esses dois modelos que vocês podem usar. Para que as imagens abaixo fiquem direitinho na sua cbox você precisa ir no site da Cbox, fazer login, clique em Look & Feel, depois em Layout Options. Deixa a parte Width and Height como na imagem abaixo.


Fez?Clique em Publish e deixe aberta a página com o código da sua cbox. Agora abra o seu bloco de notas e cole nele o código da imagem abaixo que você vai usar. Coloque o código da sua Cbox na parte pedida do código da imagem que você escolheu . Agora é só ir no seu blog em Design, Elementos da Página, Adicionar um Gadget, HTML Javascript e na parte de "Conteúdo" colar o código que você fez lá no seu Bloco de Notas.









Vá no Site da Cbox faça login, clique em Look & Feel, depois em Layout Options. Deixa a parte Width and Height como na imagem abaixo.


Ok, agora clique em Publish  e deixe aberta a página com o código da sua cbox. Agora crie a sua imagem baseada na imagem abaixo:


Hospede sua imagem aqui. Agora vá no seu blog em Design, Elementos da Página, Adicionar um Gadget, HTML Javascript, e na parte de "Conteúdo" coloque o código abaixo.

<div style="background:url(LINK DIRETO DA SUA IMAGEM) no-repeat;padding-right:95px;padding-left:10px;padding-top:62px;padding-bottom:1px;">CÓDIGO DA SUA CBOX</div>

Substitua as partes em preto e salve!
 

O post de hoje foi meio grandinho, né? Espero que consigam e se não conseguirem fiquem a vontade para perguntar suas dúvidas por comentário!

9 Comentários:

giza disse... [Responder essa Fofura]

Amei o tuto
Muito legal
:D

gpurple.blogspot.com

Angélica disse... [Responder essa Fofura]

Não sou muito fã de cbox, mas para quem gosta,o tutorial está ótimo, super bem explicadinho.

Estou seguindo e esperando por você no http://posdezesseis.blogspot.com/

Aline disse... [Responder essa Fofura]

O TD atingiu a meta de 15 seguidores e sua participação foi muito importante, muito obrigada *--*! Para comemorar, escolha o que quer de presente: tutoriais, pacotes de materiais para o seu blog ou concurso? VOTE AQUI: http://sonhosetal.blogspot.com/2011/12/meta-concluida-voce-escolhe-o-presente.html!

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Respondi com MUITO CARINHO *--*

Bibi disse... [Responder essa Fofura]

eu consegui nem acredito

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Fico muito feliz por você :)

Fernanda disse... [Responder essa Fofura]

ALELUIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA depois de 1 mês e meio eu consigui deixar o cbox em cima da minha molduraaaaaaaaaa


OBRIGADOOOOOOOOOOOOO SEU BLOG É PERFECT *-*

http://casadosbrushes.blogspot.com/

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Fico feliz por você Fernanda *-*

TamaraVick ^.^ disse... [Responder essa Fofura]

Obrigada!Consegui graças a você!!!Muito obrigada mesmo!Bjss