Moldura/Background na Cbox

Hello Catwalkers, tudo bem com vocês?

Quero pedir desculpa a todos pela desatualização do blog, andei MUITO ocupada, assim como o Rafa. A escola tem nos feito basicamente de escravos, sem contar que tenho apenas 1 mês de férias e to tendo que fazer trabalhos nesse tempo que era pra ser de descanso. Bom, espero ter mais tempo para postar aqui, mais se o blog andar meio desatualizado, já sabem ;)

Bom, começando oficialmente o post. Venho trazendo para vocês, blogueiros de plantão, um post um tanto útil dependendo do ponto de vista e principalmente para quem usa a caixa de CBOX em seu blog, como a do nosso. E para quem não sabe o que é CBOX, é aquela caixinha de recados que tem aqui no blog.

Confira um exemplo na imagem abaixo do blog Tudy Teen:

Vamos começar?

Primeiramente faça uma imagem um pouco mais que o tamanho da sua cbox, enfeite-a como quiser. Depois hospede a imagem em algum site ( recomendado Image Shack ).

Vá em Layout > Clique em "Adicionar um Gadget" > HTML Javascript > Na parte de conteúdo (texto), 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 verde e azul devem ser alterados. Leia com 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 verde e azul até que a sua cbox se encaixe perfeitamente na sua imagem.

Abaixo você encontra alguns modelos já prontos (By Tudy Teen):

Se códigos não for o seu "forte" use os dois modelos a seguir. 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.

Pronto? 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>

FAÇA A SUA PRÓPRIA CBOX

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 Layout, 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>

Desculpe pelo post, ficou meio grande haha.. Mas espero que tenha ajudado! Se tiverem algum problema, comente e irei fazer o possivel para ajudar. Beijinho, até a próxima! :D