Postagens Recentes

29 de fev de 2008

Menu com descrição em caixa

Nenhum comentário:

Atenção, este scroller não aparecerá ( essa barra aqui em cima com as setas)


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.


Para ter um menu como este é simples. Clique em Layout, depois em "Editar HTML". Procure pelo código :

]]></b:skin>


E cole acima dele o código abaixo.





Passe o mouse













* ATENÇÃO, onde está na cor vermelha é para que se quiser você modifique aí as cores do seu menu.




.ul {
list-style-type: none;
margin:0;
padding:0;
position: absolute;
top: 2em;
left: 3em;
width: 100%;
}
li {
float: left;
}
.menu a {
width: 100px;
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff;
text-decoration: none;
color: #000;
background: #CCCCCC;
}
.menu a:hover {
color: #411;
background: #808080;
border: 1px solid gray;
border-bottom: 0px;
color: #fff;
}
.menu a span {
display: none;
}
.menu a:hover span {
display: block;
position: absolute;
margin-left: 20px;
top: 30px;
left: 0;
width: 600px;
text-align: left;
border: 1px solid BLACK;
background: #cccccc;
color: #000;
}



Agora vá até elementos de página, clique em "ADICIONAR ELEMENTO DE PÀGINA" e clique, depois clique em "HTML/Javascript" e cole o segundo código fazendo as modificações necessárias. Salve e arraste o módulo para onde quiser que fique o menu.




<ul class="menu">
<li><a href="">LINK 1<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 1</span></a></li>
<li><a href="">LINK 2<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 2</span></a></li>
<li><a href="">LINK 3<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 3</span></a></li>
<li><a href="">LINK 4<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 4</span></a></li>
<li><a href="">LINK 5<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 5</span></a></li>
<li><a href="">LINK 6<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 6</span></a></li>
</ul>

26 de fev de 2008

Template Pinup Laranja

Nenhum comentário:


Desculpe, template retirado pois ficou obsoleto.

18 de fev de 2008

Mudando o modelo do Blogger

12 comentários:
Para quem tem o modelo antigo do Blogger e quer mudar para o mais novo que tem vários recursos é bem fácil. Só não garanto que você não perderá o conteúdo das colunas.

A primeira coisa a fazer é salvar o código de seu atual template no bloco de notas em seu computador. Agora salve também o conteudo das colunas, pois esse é praticamente impossível não serem perdidos.

Depois encontre um modelo para o novo Blogger que seja do seu agrado. Aqui tenho mais de 300 templates além de um template totalmente costumizável, que você poderá colocar as cores e a imagem de seu agrado. Além do mais, há outros blogs com templates bem bonitos, procure na barra horizontal em meu blog, onde está escrito Amigos/Parceiros.

Depois faça como as fotos abaixo.


Clique nas imagens para amplia-las.



Free Image Hosting at www.ImageShack.us



Free Image Hosting at www.ImageShack.us




Aqui são os modelos padrão do Blogger, escolha qualquer um, depois mude por outro do seu agrado.


Free Image Hosting at www.ImageShack.us



Free Image Hosting at www.ImageShack.us


Free Image Hosting at www.ImageShack.us




Para aprender a instalar templates clique AQUI

Mudanças

Nenhum comentário:

Pois é, resolvi mudar tudo. Acho que assim ficou mais leve e mais fácil de achar as dicar e os templates. Achei essa maneira de menu muito legal e aprendi no blog da Áurea. Estou um tanto sumida e quase não entro aqui nem mesmo para responder aos comentários. Peço desculpas mas sou viciada em BBB e faço análise do jogo em um outro blog, o Tem Vaca na Moita além de assistir pelo GMC e comentar no De Cara pra Lua. Então, daqui mais um pouco eu voltarei com mais templates. Farei vários, inclusive já li as sugestões dos leitores e gostei bastante. Beijos pessoas lindas. Obrigada por tudo.








15 de fev de 2008

Menu gradiente

Nenhum comentário:
Só funciona no Internet Explorer



Copie o código e cole em "Elementos de página", no HTML/Javascript. Coloque os links e salve.



<style type="text/css">
.Menutje{width:340; height:22; background-color:#FFD6CF; filter:blendTrans(duration=0.6); color:#000000; text-align:LEFT; font:14px Tahoma; }
</style>
<script type="text/javascript">
//verander hieronder de kleuren
var OverKleur = "#F98957"; // Dit is de kleur waar het menu naar moet vervagen
var Kleur = "#F49A7E"; // Dit is de normale kleur van de cel na de mouse-over
function Vervaag(){ if(!document.all) return;
var obj = event.srcElement;
while(obj.tagName!="TD") obj=obj.parentElement;
obj.filters[0].Apply();
obj.style.backgroundColor = OverKleur;
obj.filters[0].Play(); }
function VaagUit(){
if(!document.all) return;
var obj = event.srcElement;
while(obj.tagName!="TD") obj=obj.parentElement;if (event.fromElement.contains(event.toElement)obj.contains(event.toElement)) return
obj.filters[0].Apply();
obj.style.backgroundColor = Kleur;
obj.filters[0].Play(); }
</script>
<div align="center">
<center>
<table width="120" height="140">
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center">
<a target="_blank" href="ENDEREÇO DO LINK 1">Link 1</a></p>
</td></tr>
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center"><a href="ENDEREÇO DO LINK 2" target="_blank">Link 2</a></p>
</td></tr>
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center"><a href="ENDEREÇO DO LINK 3" target="_blank">Link 3</a></p>
</td></tr>
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center"><a href="ENDEREÇO DO LINK 4" target="_blank">Link 4</a></p>
</td></tr>
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center"><a href="ENDEREÇO DO LINK 5" target="_blank">Link 5</a></p>
</td></tr>
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center"><a href="ENDEREÇO DO LINK 6" target="_blank">Link 6</a></p>
</td></tr>
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center"><a href="ENDEREÇO DO LINK 7" target="_blank">Link 7</a></p>
</td></tr>
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center"><a href="ENDEREÇO DO LINK 8" target="_blank">Link 8</a></p>
</td></tr>
<tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
<p align="center"><a href="ENDEREÇO DO LINK 9" target="_blank">Link 9</a></p>
</td></tr>
</table>
</center>
</div>

5 de fev de 2008

Menu com caixinha seletora

Um comentário:


Copie o código, vá até Elementos de página" e cole no HTML/Javascript. Coloque os endereços dos links e salve.



<Center><form name="rolloverbox">
<div align="left"><p align="center"><b><input type="checkbox" name="boxes" value="ON">
</font>
<a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(1)" onMouseout="rolloutcheck(0)" target="_blank" style="text-decoration: none">
<font color="#CAB456">Link 1</a><br>
<input type="checkbox" name="boxes" value="ON">
<a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(2)" onMouseout="rolloutcheck(1)" target="_blank" style="text-decoration: none">
Link 2</a><br>
<input type="checkbox" name="boxes" value="ON">
<a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(3)" onMouseout="rolloutcheck(2)" target="_blank" style="text-decoration: none">
Link 3</a><br>
<input type="checkbox" name="boxes" value="ON">
<a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(4)" onMouseout="rolloutcheck(3)" target="_blank" style="text-decoration: none">
Link 4</a><br>
<input type="checkbox" name="boxes" value="ON">
<a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(5)" onMouseout="rolloutcheck(4)" target="_blank" style="text-decoration: none">
Link 5</a><br>
<input type="checkbox" name="boxes" value="ON">
<a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(6)" onMouseout="rolloutcheck(5)" target="_blank" style="text-decoration: none">
Link 6</a></b><p><p></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>



Mini scripts

Nenhum comentário:
Janela Popup
Passe o mouse



    <a onmouseover="alert('AQUI SUA MENSAGEM')" href>Passe o mouse</a>





    Script que é só passar o mouse
    Tem Vaca na Moita







    <A onmouseover="parent.location='ENDEREÇO DO LINK'" href="ENDEREÇO DO SEU BLOG">NOME DO LINK</A>




    Topo da página
    topo







    <a href="ENDEREÇO DO SEU BLOG">topo</a>




    Texto riscado
    Seu texto riscado







    <a href="<font face="Verdana" size="2"><strike>ESCREVA AQUI</strike></font>">topo</a>





    Efeitos em link : passe o mouse em cima para ver os efeitos


    Efeito flores








    <style type="text/css">a:hover{background: url(' http://img128.imageshack.us/img128/1027/flores1pr1.gif'); }</style>





    Mensagem que modifica ao clicar








    <a href="AQUI O ENDEREÇO DO LINK">
    <font color="#000000" onmouseover="this.innerHTML = 'AQUI A IMAGEM QUE APARECERÁ EMBAIXO DO LINK';
    this.style.color = '#cc0000';" onmouseout="this.innerHTML = 'AQUI O NOME DO LINK ';
    this.style.color = '#000000';">CLIQUE</font></a>







    Efeito fogo








    <style type="text/css">a:hover{background: url(' http://img352.imageshack.us/img352/6361/elkedibarrosuj8.gif'); }</style>





    Link que aumenta as letras



    <style type="text/css"><!--a:link, a:visited, a:active {text-decoration: none;}
    a:hover {text-decoration: underline; color:#000000; font-size:150%; }-->
    </style>







    Botão para fechar a janela

    fechar



    <a href="javascript:window.close();">fechar</a>
    <input type=button value="fechar a janela" onClick="javascript:window.close();">

    2 de fev de 2008

    Carnaval 2008

    Nenhum comentário:







    Tenham todos um excelente carnaval !


    Powered by eSnips.com


    Menu com efeito

    2 comentários:
    Para ter um menu como este, copie o código e cole no HTML/Javascript no seu blog. Querendo modificar as cores é só mudar os números que estão na cor verde.






    <style>
    .menulines{
    border:2.5px solid #7ECECD;
    }
    .menulines a{
    text-decoration:none;
    color:black;
    }
    </style>
    <script language="JavaScript1.2">
    function over_effect(e,state){
    if (document.all)
    source4=event.srcElement
    else if (document.getElementById)
    source4=e.target
    if (source4.className=="menulines")
    source4.style.borderStyle=state
    else{
    while(source4.tagName!="TABLE"){
    source4=document.getElementById? source4.parentNode : source4.parentElement
    if (source4.className=="menulines")
    source4.style.borderStyle=state
    }
    }
    }
    </script>
    <table onmouseout="over_effect(event,'solid')" cellspacing="0" border="0" cellpadding="0" onmouseover="over_effect(event,'outset')" style="background-">B0E0DF" width="150" onmousedown="over_effect(event,'inset')" onmouseup="over_effect(event,'outset')">
    <tr><td width="100%" bgcolor="#DFF3F3"><font face="Arial" size="2"><b>menu</b></font></td></tr>
    <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 1</a></font></td></tr>
    <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 2</a></font></td></tr>
    <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 3</a></font></td></tr>
    <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 4</a></font></td></tr>
    </table>

    Menu Aleatório

    Nenhum comentário:
    Para ter um menu como esse, copie o código e cole no HTML/Javascript em seu blog.







    <script>
    <!--
    var count=0
    function dothis(){
    setTimeout("document.wheel.wheel2.selectedIndex =1000",100)
    setTimeout("document.wheel.wheel2.selectedIndex =count",200)
    setTimeout("document.wheel.wheel2.selectedIndex =1000",300)
    setTimeout("document.wheel.wheel2.selectedIndex =count",400)
    setTimeout("document.wheel.wheel2.selectedIndex =1000",500)
    setTimeout("document.wheel.wheel2.selectedIndex =count",600)
    setTimeout("window.location=document.wheel.wheel2.options[document.wheel.wheel2.selectedIndex].value",800)
    }
    function animate(){
    var countfinal=Math.round(Math.random()*(document.wheel.wheel2.length-1))
    document.wheel.wheel2.selectedIndex =count
    if (count==countfinal){
    dothis()
    return
    }
    if (count<document.wheel.wheel2.length)
    count++
    else
    count=0
    setTimeout("animate()",50)
    }
    //-->
    </script>
    <form name="wheel" method="POST">
    <div align="center"><center><p><select name="wheel2" size="6">
    <option value="ENDEREÇO DO LINK 1"/>Link 1
    <option value="ENDEREÇO DO LINK 2"/>Link 2
    <option value="ENDEREÇO DO LINK 3"/>Link3
    <option value="ENDEREÇO DO LINK 4"/>Link 3
    <option value="ENDEREÇO DO LINK 5"/>Link 4
    <option value="ENDEREÇO DO LINK 6"/>Link 5
    </select></p>
    </center></div><div align="center"><center><p><input value="Clique"
    name="B1" onclick="animate()" type="button"/></p>
    </center></div>
    </form>

    Menu embutido colorido

    Um comentário:
    Para ter estes menus em seu blog, copie o código e cole no HTML/Javascript em seu blog. Coloque o endereço dos links e salve.








    <style>

    select.Menu{
    font-family: Verdana,sans serif;
    font-size: 8pt;
    font-style: normal;
    }
    option.menu1{
    color:#FFFFFF;
    background-color:#FFC0FF;
    }
    option.menu2{
    color:#CC0000;
    background-color:#FF80FF;
    }
    option.menu3{
    color:#123456;
    background-color:#FF40FF;
    }
    }
    option.menu4{
    color:#123456;
    background-color:#CE8AEE;
    }
    }
    option.menu5{
    color:#123456;
    background-color:#E1AAF8;
    }
    }
    option.menu6{
    color:#123456;
    background-color:#C19BF9;
    }
    </style>
    <form>
    <select onchange="if(options[selectedIndex].value) parent.frames.location.href= (options[selectedIndex].value)" class="Menu" name="URL" size="1">
    <option/>escolha
    <option/>
    <option class="menu1" value="AQUI O ENDEREÇO DO SEU LINK 1"/>item 1
    <option class="menu2" value="AQUI O ENDEREÇO DO SEU LINK 2"/>item 2
    <option class="menu3" value="AQUI O ENDEREÇO DO SEU LINK 3"/>item 3
    <option class="menu4" value="AQUI O ENDEREÇO DO SEU LINK 4"/>item 4
    <option class="menu5" value="AQUI O ENDEREÇO DO SEU LINK 5"/>item 5
    <option class="menu6" value="AQUI O ENDEREÇO DO SEU LINK 6"/>item 6
    </select>
    </form>












    Para os menus coloridos:
    Para trocar as cores é só modificar os números que estão em verde.



    <select onchange="if(options[selectedIndex].value) parent.frames.location.href= (options[selectedIndex].value)" style="background: #B3D87F; color: rgb(0, 0, 0); font-family: Arial; font-size: 10pt;" class="links" name="URL" size="1">
    <option selected="selected"/>--primeiro--
    <option value="ENDEREÇO DO SEU LINK/>Link 1
    <option value="ENDEREÇO DO SEU LINK/>Link 2
    <option value="ENDEREÇO DO SEU LINK/>Link 3
    <option value="ENDEREÇO DO SEU LINK/>Link 4
    <option value="ENDEREÇO DO SEU LINK/>Link 5
    </select>

    <select onchange="if(options[selectedIndex].value) parent.frames.location.href= (options[selectedIndex].value)" style="background: #D3E9DD; color: rgb(0, 0 , 0); font-family: Arial; font-size: 8pt;" class="links" name="URL" size="1">
    <option selected="selected"/>--segundo--
    <option value="ENDEREÇO DO SEU LINK/>Link 1
    <option value="ENDEREÇO DO SEU LINK/>Link 2
    <option value="ENDEREÇO DO SEU LINK/>Link 3
    <option value="ENDEREÇO DO SEU LINK/>Link 4
    <option value="ENDEREÇO DO SEU LINK/>Link 5
    </select>
    <select onchange="if(options[selectedIndex].value) parent.frames.location.href= (options[selectedIndex].value)" style="background: #ADC6E5; color: rgb(0, 0, 0); font-family: Arial; font-size: 8pt;" class="links" name="URL" size="1">
    <option selected="selected"/>--terceiro--
    <option value="ENDEREÇO DO SEU LINK/>Link 1
    <option value="ENDEREÇO DO SEU LINK/>Link 2
    <option value="ENDEREÇO DO SEU LINK/>Link 3
    <option value="ENDEREÇO DO SEU LINK/>Link 4
    <option value="ENDEREÇO DO SEU LINK/>Link 5
    </select>

    1 de fev de 2008

    Media player sem imagem

    Nenhum comentário:
    Copie o código e cole no HTML/Javascript em seu blog. Coloque o endereço da rádio no local indicado e salve. Endereço de rádios AQUI.




    <object id="MPlay1" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=" type="application/x-oleobject" height="24" standby="Loading Microsoft® Windows® Media Player components..." width="162" align="textTop" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
    <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/windows/mediaplayer/download/default.asp" filename="ENDEREÇO DA RÁDIO AQUI" autostart="1" showstatusbar="0" showdisplay="0" autosize="0" showcontrols="True" autorewind="1" statusbar="false" animationatstart="false" showaudiocontrols="TRUE" showpositioncontrols="False" width="162" height="24" align="texttop"></embed>
    </object>

    Copyright © Templates e Acessórios |
    Design by Elke di Barros | Tecnologia do Blogger
      Twitter Facebook Google + YouTube