Templates e Acessórios: maio 2010

Postagens Recentes

31 de mai. de 2010

Colocando fundo e descrição nas imagens

Para colocar uma descrição e um fundo em suas imagens como o modelo, copie o código e cole no editor de imagens no modo "Editar HTML". Depois cole o endereço da imagem e escreva uma inscrição. Há outra forma AQUI mais simles.
Júlia, Rafael, Isabela, D. Celeida e Sr° Philemon
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="background: none repeat scroll 0% 0% rgb(204, 204, 204);
margin-left: auto; margin-right: auto; text-align: center;">
<tbody>
<tr>
<td style="text-align: center;">
<b><a href="#" imageanchor="1" style="margin-left: auto; margin-right: auto;">
<img src="AQUI O ENDEREÇO DA IMAGEM" />
</a></b>
</td>
</tr>
<tr><td class="tr-caption" style="color: black; text-align: center;"><b>
AQUI A DESCRIÇÃO DA IMAGEM
</b></td></tr>
</tbody>
</table>
Original AQUI

»»Leia mais...

Aumentando o tamanho dos posts nas páginas internas e ocultando a sidebar

. Elke di Barros | 11:32 7 comentários:

O mesmo blog possui as páginas internas diferentes da primeira página do blog.

»»Leia mais...

30 de mai. de 2010

Slide com setas

. Elke di Barros | 22:03 16 comentários:

Outro modelo de slide no qual o visitante poderá clicar nas setas para ver o conteúdo. Com ele vc poderá linkar suas postagens se quiser.

»»Leia mais...

29 de mai. de 2010

Chat com webcam no blog

. Elke di Barros | 00:37 Um comentário:

Há um tempo atrás eu abordei este item no blog mas acabei não fazendo a tutorial de como colocar webcam no blog para bater um papo com seus visitantes. Faço isso agora.
A primeira coisa a fazer é entrar no site TokBox e fazer seu registro.
Ao entrar vc verá uma página como esta, faça aí o seu registro.
depois vc irá para uma página como esta. Clique em "Continuar"
Pronto, agora vc estará na página com o seu perfil. Para obter o código clique em "Accont", ao abrir janela clique em "Embed"
Abrirá uma janela, clique então em permitir e depois em fechar.
Clique então no botão "Add to my site"
Ao abrir a janela, copie o código e cole no HTML/Javascript em seu blog. Pronto, agora quando seus visitantes entrarem em seu blog poderão conversar com vc.

»»Leia mais...

26 de mai. de 2010

Estrelinhas flutuantes no blog

. Elke di Barros | 01:25 3 comentários:

Para quem gosta de blog enfeitado, com vários efeitos, pode colocar essas estrelinhas no blog. Para tanto, copie o código abaixo, vá até o HTML do seu blog e cole depois de ]]></b:skin>

»»Leia mais...

24 de mai. de 2010

Visitante troca as cores de fundo do blog, outras maneiras

. Elke di Barros | 23:25 5 comentários:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Eu já havia mostrado um script para dar a seu visitante a opção de trocar as cores de fundo do blog. Eis então outros códigos com a mesma função. copie o modelo de sua preferência e cole no HTML/Javascript.

Este modelo
<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUdNT7cPxuL02nF12zJ4ydRZMf6fGlDvG8JJLA6g3bfxAj1jMyg-yIHb2Ox_YV2R91OVlm6ePI6wTxGZs42eGRaJLj-tJPOnQ7lCXlG2mxyOJpZCFyd-EBT8eRFv-83E-3_BXN3muNYUA4/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh17hEyNOxPIukEc4ia_gPSrEKU4ahj3XSy8zs6tTzlixe4sHuNlbRpDmuvmbFToq4wV1cnrBrgfyY-oh6-DtXL0c4EWhJiuQW8gUyaS5EqG7-GNMZsX843mE0_kbUYHx5RH1UyePozJRL5/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYLir3y7w38fSsEOf2Y54hwnggXiwTnh1gTJOMDz1fbPCpF0o0VqX1dQCJbHav-EsspznbcHd_7t1CbllHOTDovRot7n8zuqCNqTUzG5txbdGzU3jy4vME6p5sv9n0Sbzr1V_zNJa7hKa/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EJZ27GwH1MhuCCOrN1styuuN9y4NQuaUUgb1SX1fe3bOO3W2ub-lKf0jVdTlnhpoX3C9Wsh4ryOPLF6vKsuqK4LM0y5Y7Ha71nANo-MAl1TARrw6atFkvCrqJCJDDYY98FCRBr7Eqt5v/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0bstYgYsgtb33sqgLTSSrkKv5s-KapgvUmFcR1Xd4VxrAgKJHOwrU2mATxygKSoOUSWOoGerdILGV9bQHExzTDkfEXzbb6n8dTpLanUjGA6jsutnwuZ1B9JCOvKHfth0oSgqh-xWtnOD/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RNSlkuGtxezfyNGVOrwVuZitT1o3pQHHngc29jB0mNHBmqjNtPSLfAXGPVQ4altcngUsevlENiooaAqiL2x-W432n9tWDUaTGfi4iAiGkY-6Bge2uorfQyJ_31c8h5B_aX-h-ac90fEQ/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcNzIAn8S0uRUOB2ltSiNFIT9iEIkOTteuhJTwQ_gMfmtRBI34JNxEzxt3-kGDo6h9nF3BvBWQ2S5OZKMwRDBdyhyphenhyphenH1WYWTMu1KlTde1LeIZkFGfPgDwQpi9BcJSLNygy1RK7Whzn-hHPx/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJKOwUPwPzGB8woxXSuPqy1O_ez3jhUh0CgRQK7XYt2BxKKWLFbcCv2OLif0cPWFuRgua9pdSGs0qAcDzKtzs9kV6n_n9xg0x0rlwh7xzYOyXPGSYbGLFw65fQC1aCMXU7cfLZ1XlUNaPu/s200/body-blanco.png" /></a>
</center>
Este modelo
<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUdNT7cPxuL02nF12zJ4ydRZMf6fGlDvG8JJLA6g3bfxAj1jMyg-yIHb2Ox_YV2R91OVlm6ePI6wTxGZs42eGRaJLj-tJPOnQ7lCXlG2mxyOJpZCFyd-EBT8eRFv-83E-3_BXN3muNYUA4/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh17hEyNOxPIukEc4ia_gPSrEKU4ahj3XSy8zs6tTzlixe4sHuNlbRpDmuvmbFToq4wV1cnrBrgfyY-oh6-DtXL0c4EWhJiuQW8gUyaS5EqG7-GNMZsX843mE0_kbUYHx5RH1UyePozJRL5/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYLir3y7w38fSsEOf2Y54hwnggXiwTnh1gTJOMDz1fbPCpF0o0VqX1dQCJbHav-EsspznbcHd_7t1CbllHOTDovRot7n8zuqCNqTUzG5txbdGzU3jy4vME6p5sv9n0Sbzr1V_zNJa7hKa/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EJZ27GwH1MhuCCOrN1styuuN9y4NQuaUUgb1SX1fe3bOO3W2ub-lKf0jVdTlnhpoX3C9Wsh4ryOPLF6vKsuqK4LM0y5Y7Ha71nANo-MAl1TARrw6atFkvCrqJCJDDYY98FCRBr7Eqt5v/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0bstYgYsgtb33sqgLTSSrkKv5s-KapgvUmFcR1Xd4VxrAgKJHOwrU2mATxygKSoOUSWOoGerdILGV9bQHExzTDkfEXzbb6n8dTpLanUjGA6jsutnwuZ1B9JCOvKHfth0oSgqh-xWtnOD/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RNSlkuGtxezfyNGVOrwVuZitT1o3pQHHngc29jB0mNHBmqjNtPSLfAXGPVQ4altcngUsevlENiooaAqiL2x-W432n9tWDUaTGfi4iAiGkY-6Bge2uorfQyJ_31c8h5B_aX-h-ac90fEQ/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcNzIAn8S0uRUOB2ltSiNFIT9iEIkOTteuhJTwQ_gMfmtRBI34JNxEzxt3-kGDo6h9nF3BvBWQ2S5OZKMwRDBdyhyphenhyphenH1WYWTMu1KlTde1LeIZkFGfPgDwQpi9BcJSLNygy1RK7Whzn-hHPx/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJKOwUPwPzGB8woxXSuPqy1O_ez3jhUh0CgRQK7XYt2BxKKWLFbcCv2OLif0cPWFuRgua9pdSGs0qAcDzKtzs9kV6n_n9xg0x0rlwh7xzYOyXPGSYbGLFw65fQC1aCMXU7cfLZ1XlUNaPu/s200/body-blanco.png" /></a>
</center>
Troque a cor de fundo
Roxo | Amarelo | Verde | Azul | Marrom | Rosa | Preto | BrancoEste modelo
<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Roxo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';">Amarelo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';">Verde</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';">Azul</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';">Marrom</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';">Rosa</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';">Preto</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';">Branco</a>
</center>
Original: Ciudad de Blogger

»»Leia mais...

Cor de fundo para sidebar com a mesma extensão dos posts

. Elke di Barros | 17:13 4 comentários:

Para colocar uma cor de fundo na área da sidebar e que essa tenha a mesma extensão do corpo da área de postagem, proceda da seguinte forma.

»»Leia mais...

19 de mai. de 2010

Modificando a caixa de postagens com o mesmo marcador

. Elke di Barros | 17:20 Um comentário:

Personalize a área que mostra as postagens com o mesmo marcador.
Va até o HTML de seu blog, clique em "Expandir modelos de widget" e procure pelo seguinte trecho:
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
Troque-o por este trecho abaixo:
<div class='status-msg-wrap'>
Artigos do marcador: "<data:blog.pageName/>"</div>
Agora procure pelo código ]]></b:skin> e antes dele cole o próximo código.
.status-msg-wrap{background: #ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip97ULQYbk7gwXr53hA7llMzceBDst6SgjTo7tnuO0kTI58vo3sbbZgzLVr6oxhr6tTFb9vgsTwlgXUVGfkMwLddo7PaeKn97MQdDjsnOtNRlM-QbECRT6Ww3j6uLp8qLH6FFjc1gPha4b/s1600/2.png") no-repeat right;
padding:18px 0 8px 3px; border: 1px solid #000;}
Código em azul representa a cor de fundo, código em rosa, endereço da imagem.
Visto em: El Balcon de Jaime

»»Leia mais...

Eu mereço um netbook porque...

. Elke di Barros | 13:39 3 comentários:

Eu mereço um netbook porque com este aparelho eu entro no HITT do momento.
Pois é pessoal, o site de indexação diHitt está oferecendo um netbook para quem escrever a frase mais criativa. O término da promoção será dia 11 de junho de 2010.Veja AQUI as regras.

»»Leia mais...

Menu com efeito bubble

. Elke di Barros | 11:41 Um comentário:

Há tempos tinha visto esse menu mas com uma porção de códigos para hospedar, mas J.Mugir trouxe de Gerarde Fernandez resolveu o problema.

»»Leia mais...

Menu nav, com efeito hover

. Elke di Barros | 11:01 4 comentários:

Do blog Vagabundia peguei este menu e repasso para quem tiver interesse...
REVISADO EM DEZEMBRO DE 2010
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Copie o código abaixo e no HTML de seu blog, antes de
]]></b:skin>
cole o código abaixo:
.navi1 {
display: block;
height: 64px;
margin:0 auto;
position: relative;
width: 525px;
.navi1 ul {
float: none;
list-style-image: none;
list-style-type: none;
margin: 3px 0;
.navi1 ul li {
height: 64px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-Xt3oUwmOD5PiTPkXVhG-RKDWwyLTOi5ZXKhT7Zdod7dkICNJFND_5ljxCkNZN_eR7DS6eBS4_zIr3GDoiSFw-XGYGjwpe8M6pHPcId67RiHVQblaU8QdaTo4ZX85xx52EViOs4afi0/s0/tab-1.png);
background-repeat: no-repeat;
float: left;
margin: 0px;
padding-top: 5px;
position: absolute;
.navi1 ul li a {
display: block;
height: 100%;
width: 100%;
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }
Agora este próximo código cole em um widget, especificamente no HTML/Javascript
<div class='navi1'>
<ul>
    <li class='sm1'><a href='ENDEREÇO HOME'/></li>
    <li class='sm2'><a href='ENDEREÇO ABOUT'/></li>
    <li class='sm3'><a href='ENDEEÇO BLOG'/></li>
    <li class='sm4'><a href='ENDEREÇO WORKS'/></li>
    <li class='sm5'><a href='ENDEREÇO CONTACT'/></li>
</ul>
</div>

»»Leia mais...