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.

<div style="background:url(http://img707.imageshack.us/img707/5056/kissesh.png) no-repeat;padding-right:95px;padding-left:10px;padding-top:62px;padding-bottom:1px;">CÓDIGO DA SUA CBOX</div>

<div style="background:url(http://img836.imageshack.us/img836/4614/chatcandy.png) no-repeat;padding-right:95px;padding-left:10px;padding-top:62px;padding-bottom:1px;">CÓDIGO DA SUA CBOX</div>

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!