Templates e Acessórios: dezembro 2007

Postagens Recentes

Grade Lista

29 de dez. de 2007

Escondendo imagens

. Elke di Barros | 02:27 Nenhum comentário:

Se quer um assim, vá até o HTML do seu blog procure pelo código:

]]></b:skin>

Cole acima dele o código abaixo

Pegar código

a.tooltip: hover span {

display: block;

position: absolute;

top: 2em;

left: 2em;

width: 140px;

border: groove #000000;

background-color: #F8F8E0;

color: #ffffff;

text-align: center;

font-family: Arial;

font-size: 15px;

padding: 5px;

}

Agora sempre que quiser fazer este efeito, cole este código abaixo e cole onde quiser. depois aumente o tamanho das letras.

<a href="COLOQUE AQUI O ENDEREÇO DO QUE QUERES LINKAR" class="tooltip">ESCREVA AQUI O QUE VOCÊ QUER QUE APAREÇA ESCRITO <span><img src="ENDEREÇO DA IMAGEM">TEXTO QUE VAI DENTRO JUNTO COM A IMAGEM</span></a>

»»Leia mais...

Menu animado

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

Quer um menu como este abaixo ?

Gostou ? Então clique em "Modelo" depois em "Elementos de página". Agora clique em "Adicionar um elemento de página" e clique em HTML/Javascript.

Cole o código aí fazendo as modificações necessárias e colando os links nos locais indicados.

Em verde é a cor da barra de cima. Mude se quiser.

Em azul é a cor de fundo da caixinha

<div style="background-"#EB8B35;width:187px;">
<center><a href="javascript:movedown()">SUBIR</a> <a href="javascript:moveup()">DESCER</a>
<a href="javascript:stopscroll()">PARAR</a> <a href="javascript:movetop()">VOLTAR</a></center>
</div>
<script language="JavaScript1.2">
var speed=2

iens6=document.alldocument.getElementById
ns4=document.layers

if (iens6)
{document.write
('<div id="container" style="background: #ffffff; position:relative;width:185px;height:150px;overflow:hidden;border:2px ridge white">')

document.write('<div id="content" style="position:absolute;width:183px;left:2px;top:0px">')
}
</script>

<center><form name="rolloverbox">

<div align="left"><p align="left"><b><input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(0)" style="text-decoration: none" onmouseout="rolloutcheck(0)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>

<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(1)" style="text-decoration: none" onmouseout="rolloutcheck(1)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>

<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(2)" style="text-decoration: none" onmouseout="rolloutcheck(2)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>
<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(3)" style="text-decoration: none" onmouseout="rolloutcheck(3)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK <br/>

<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(4)" style="text-decoration: none" onmouseout="rolloutcheck(4)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>
<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(5)" style="text-decoration: none" onmouseout="rolloutcheck(5)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>
<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(6)" style="text-decoration: none" onmouseout="rolloutcheck(6)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>

<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(7)" style="text-decoration: none" onmouseout="rolloutcheck(7)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>

<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(8)" style="text-decoration: none" onmouseout="rolloutcheck(8)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>

<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(9)" style="text-decoration: none" onmouseout="rolloutcheck(9)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>

<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(10)" style="text-decoration: none" onmouseout="rolloutcheck(10)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>

<input value="ON" name="boxes" type="checkbox"/>
<a onmouseover="rollovercheck(11)" style="text-decoration: none" onmouseout="rolloutcheck(11)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
NOME DO LINK<br/>

</a></a></a></a></a></a></a></b></p>
</div></form>
<script>
var thebox=document.rolloverbox
function rollovercheck(whichbox){
thebox.boxes[whichbox].checked=true
}

function rolloutcheck(whichbox){
thebox.boxes[whichbox].checked=false
}
</script><center>
<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}
function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>

»»Leia mais...

27 de dez. de 2007

Menu vertical costumizável

. Elke di Barros | 19:15 6 comentários:

Com este tipo de menu, você poderá colocar o tipo de botão de sua preferencia, fazer efeitos diferentes, bem facinho. Você precisará de um modelo de botão, ou até dois caso queira fazer efeito em seu menu.

Vá até o HTML do seu blog e procure pelo seguinte código:

]]></b:skin>

Cole acima dele o código abaixo:

{
list-style:none;
margin:0px;
padding:0px;
}#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background: url('http://img341.imageshack.us/img341/4782/image1lu2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:hover {
color: #cccccc;
background: url('http://img205.imageshack.us/img205/4131/12uw2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:active {
color: #666666;
padding: 8px 0 0 50px;
}

*ATENÇÃO: o selecionado na cor verde representa o botão, caso não goste, troque por outro de sua escolha, não retire as aspas, ok ?
O selecionado na cor azul são as cores das letras que aparecerão no botão, caso precise, mude-os para a cor desejada

depois em "Elementos de página", clique em "Adicionar . Ao abrir a tabela clique em HTML/Javascript, e cole o código abaixo, depois acrescente os links que quiser nos locais indicados. ( em cor verde é o endereço do que vai linkar e em verde, é o que vc irá esscrever que aparecerá escrito no botão)

Para acrescentar mais links, é só ir acrescentando,

<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>

antes de

</ul>
</div>

Clique AQUI e escolha seu buttom

»»Leia mais...

Menu vertical costumizável

. Elke di Barros | 19:15 Um comentário:

<div id="menu">
<ul>
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
</ul>
</div>

Para acrescentar mais lins, é só ir acrescentando,

<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>

antes de

</ul>
</div>

Onde encontrar botões:

»»Leia mais...

Buttons

. Elke di Barros | 19:12 8 comentários:

Para salvar os buttons, clique sobre ele com o botão direito do mouse. Ao abrir a tabela clique em "Salvar imagem como...". Depois hospede-os em algum site de hospedagem.

Abaixo um site de hospedagem.

Image Shack

»»Leia mais...

24 de dez. de 2007

Feliz Natal

. Elke di Barros | 09:22 Nenhum comentário:

08 - Mary Cristo.m...

»»Leia mais...

22 de dez. de 2007

Feliz Natal

. Elke di Barros | 18:24 Nenhum comentário:

Amigos, música é o melhor presente. Selecionei esses vídeos pra vocês. Espero que gostem. Feliz Natal a todos.

»»Leia mais...

Menu horizontal com botões diferentes

. Elke di Barros | 01:09 2 comentários:

Quer um menu horizontal como este em seu blog ?

Clique então em "Modelo", depois em "Editar HTML". Procure pelo código:

]]></b:skin>

E cole acima dele o códiga abaixo.

#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
text-decoration: none;
}

Agora procure pelo código:

<div id='outer-wrapper'>

e cole abaixo dele o código abaixo fazendo as modificações necessárias

<div id='navcontainer'>
<ul id='navlist'>
<li><a class='current' href=' ENDEREÇO DE SEU BLOG AQUI /' title='Volte a página'><span><img src='http://img522.imageshack.us/img522/5295/217639187tn9.gif'/></span></a></li>
<li id='active'><a href=' LINK AQUI O QUE QUISER ' id='current'><img src='http://img205.imageshack.us/img205/8670/817342743pj2.gif'/></a></li>
<li><a href='MAILTO: ENDEREÇO DO SEU EMAIL '><img src='http://img297.imageshack.us/img297/9845/emailac3.gif'/></a></li>
<li><a href='obrigada' onclick='window.external.AddFavorite("AQUI O ENDEREÇO DE SEU BLOG/","AQUI O NOME DE SEU BLOG");'><img src='http://img205.imageshack.us/img205/1205/favoritosis8.gif'/></a></li>
</ul>
</div>

»»Leia mais...

19 de dez. de 2007

Data no blog costumizada

. Elke di Barros | 20:21 4 comentários:

Vou ensinar como se modificar o layot da data que temos no Blogger, para ficar assim como a que tenho aqui, mas é claro, no seu blog, ficará com o fundo que você escolher.

O primeiro passo é clicar em "Configurações"

Agora clique em "Formatação e depois clique na seta ao lado do "Formato da data", para abrir a tabela, conforme mostra a imagem abaixo. Clique na opção mostrada na imagem abaixo e depois salve.

Clique em "Modelo" e depois em "Editar HTML", procure pelo código:

]]></b:skin

e ABAIXO dele, cole o código:

Clique em Salvar.

Agora clique em "Expandir Modelos de Windgets", procure pelo código:

<data:post.dateHeader/>

e substitua pelo código abaixo:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

Se você quer que a data apareça em todos os posts, coloque o código abaixo:

<b:if cond='data:post.dateHeader'> <h2 class='date-header'><div id='fecha'><script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div></h2>
<b:else/>
<h2 class='date-header'><div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script><script>remplaza_fecha(ultimaFecha);</script></div></h2>
</b:if>

Procure por:

]]></b:skin>

E cole acima todo o código abaixo, fazendo suas substituições. (Em verde cor da letra, em vermelho endereço de sua imagem, em azul, cor da borda)

#fecha {
height: 60px;
width: 60px;
background: #fff;
border: 2px solid #000;
color: #808080;
text-align: center;
padding: 0 2px 0 0;
line-height: 100%;
float: left;
}
.fecha_dia {
display: block;
font-size: 18px;
font-weight:bold;
}
.fecha_mes {
height: 16px;
display: block;
font: normal 11px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
padding-top: 3px;
}
.fecha_anio {
display: block;
font-size: 10px;
}

Créditos: Blog and Web

»»Leia mais...

Memes

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

Bom, aqui vão dois memes. O primeiro de minha amiga a Teca, do blog Devaneios e Desatinos.

É para responder sobre 5 coisinhas que acho surreal. ( só 5 amiga ? Esqueceu que moro em Brasília ? )

1- O presidente do Brasil se queixar que a CPMF ao não passar, iria afetar a saúde do país.

2-Pagar assinatura básica de telefone.

3- As estradas (?) do nosso país. ( Nem Picasso imaginaria algo assim )

4- A subserviencia do brasileiro. Sabe, paga selo pedágio para estrada que NUNCA foi consertada, paga taxa de iluminação pública além da porra do IPTU, paga kit primeiros socorros, paga CPMF por anos a fio, e ninguém, disse NINGUÉM quebra uma portinha de banco, a cara de um desses putos de terno e gravata.

5- Discurso de político dizendo que "É para o bem do povo"...

(Ok, ok, há ai um erro ortográfico acredito eu, quando dizem "povo", acho que querem dizer "polvo", entendeu ? Polvo, Lula, é tudo morador de águas marinhas, que te arremete a água, que te arremete a lama, que te lembra governo, presidente... )

Bom, como podem ver, é algo infinito, e isso que eu só toquei em governo, nem comecei a escrever sobre o comportamento humano que é surreal, né não ? Afinal, quem vota nesses filhos duma égua é o povo. Agora é povo mesmo.

Estou indicando os seguintes blogs para continuar a enumerar fatos surreais.

Lusófona, do blog Palavras Articuladas

Mimo, do blog Receitas da Tia Dete ( sei que vc já recebeu, mas não respondeu, hhuuhha, te peguei)

Vaca Moor, do blog Tem Vaca na Moita

Bella, do blog Madame Bella

Jú, do blog Mundinho Blue

O segundo meme é da Ariane, do blog Templates para o Novo Blogger

É sobre os 5 blogs que você mais gosta, sabe, desses que você está sempre lá, fazendo uma visita, lendo os posts...

Ele será indicado, e poderá levar o selo abaixo

(Isso vai dar problemas, sabe, gente ciumenta, querendo rasgar a roupa...)

Bom, como só posso indicar 5, aí vão:

1-O blog da Vaca Moor, o Tem Vaca na Moita e os blogs de todos os seus participantes, já que é um blog coletivo. ( me safei, hhuuuhahhaha)

2-O blog da Ariane, o Templates para o Novo Blogger

3-O blog da Áurea, o Templates para você

4-O blog da Claudya, o Memories

5-O blog da Mamanunes, o Templates Mamanunes

»»Leia mais...

16 de dez. de 2007

Meus trabalhos

. Elke di Barros | 00:21 Nenhum comentário:

Ana, aqui está uma pequena amostra dos meus trabalhos.

»»Leia mais...

13 de dez. de 2007

Template Livro Mágico

. Elke di Barros | 11:27 Nenhum comentário:

Visualizar

Download

Pegue o código AQUI

»»Leia mais...

Menu horizontal com mini gifs

. Elke di Barros | 02:42 Nenhum comentário:

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 este código, vá até o HTML do seu Blogger, procure pelo seguinte código:

]]></b:skin>
e cole acima dele o código abaixo.

(código em verde representa as cores das letras, mude-as se quiser.

ul#navlist { font-family: sans-serif; }
ul#navlist a
{
font-weight: bold;
text-decoration: none;
}
ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul#navlist li { float: left; }
ul#navlist li a
{
color: #000000;
padding: 3px;
border: 1px #ffffff outset;
}
ul#navlist li a:hover
{
color: #ffffff;
}
ul#navlist li a:active
{
color: #cccccc;
border: 1px #cccccc inset;
}
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }

Agora clique em "Elemento de página", clique em "Adicionar um elemento de página" Ao abrir a tabela, clique em HTML/Javascript, cole ai este segundo código, faça as suas modificações e salve. Depois arraste o módulo para cima, de modo que ele fique acima da imagem de seu blog.

<div id="navcontainer">
<ul id="navlist">
<li><img src="http://img146.imageshack.us/img146/9690/logo86ky7.gif%22/%3E%3Ca href="ENDEREÇO DE SEU BLOG/" class="current" title="Volte a página"><span>Home</span></a></li>
<li><img src="http://img45.imageshack.us/img45/9231/iconeorkutza4.gif%22/%3E%3Ca id="subcurrent" href="ENDEREÇO DO SEU ORKUT">Orkut</a></li>
<li><img src="http://img45.imageshack.us/img45/3300/emaildz9.gif%22/%3E%3Ca href="mailto:ENDEREÇO DE SEU EMAIL AQUI" title="Email"><span>Email</span></a></li>
<li> <img src="http://img525.imageshack.us/img525/6636/icon4lf5.gif%22/> <a href="" title="AQUI O QUE QUISER "><span>Leia-me</span></a></li>
<li><img src="http://img526.imageshack.us/img526/3914/listsiconns2.gif%22/>
<a href="AQUI O QUE QUISER/" title="ETC"><span>ETC</span></a></li>
<li><img src="http://img207.imageshack.us/img207/204/iconerssrd9.png%22/%3E%3Ca href="AQUI O ENDEREÇO DO SEU FEED" title="Assine este Feed"><span>Feed</span></a></li>
<li><img src="http://img213.imageshack.us/img213/192/blog00360vy7.gif%22/%3E%3Ca href="ENDEREÇO DO SEU GUESTBOOK" title="Mensagens"><span>Guestbook</span></a></li>
<li><img src="http://img526.imageshack.us/img526/8061/commentswd1.png%22/%3E%3Ca href="AQUI O ENDEREÇO DO SEU CHAT/">Chat</a></li>
<li><img src="http://img205.imageshack.us/img205/8688/strelaqm6.gif%22/> <a href="" onclick="window.external.AddFavorite('http://templateseacessorios.blogspot.com/',' NOME DO SEU BLOG AQUI ');">Favoritos</a></li>
<li><img src="http://img528.imageshack.us/img528/718/blog00350yq8.gif%22/%3E%3Ca href="ENDEREÇO DE SEU BLOG AQUI" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage
(' ENDEREÇO DE SEU BLOG AQUI /');">Página Inicial</a></li>
</ul>
</div>

»»Leia mais...