16/07/2013

Tutorial.

Oi ^_^
Dessa venho não apenas com um, mas sim três tutoriais, todos são bem simples, e os créditos de códigos são do blog Dany's Place , são três menus bem simples de se utilizar e muito lindos, o tuto de hoje é : Menus por HTML/JavaScript, confiram.
Como o próprio nome já diz, os menus são colocados através de Gadgets HTML/JavaScript, não sendo necessário mexer em códigos de HTML, o que torna a fácil utilização dos menus.
São três menus e para usar qual quer um deles, você cola o código do menu escolhido em um Gadget HTML/JavaScript e faz as alterações destacadas em vermelho.
Menu Boll:
Crédito de Preview:Dany's Place

Cole o código em um HTML/JavaScript:


<div class="menuboll">
<center>
<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a>
<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a><br>
<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a>
<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a><br>
<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a>
<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a>
</center>
</div>
<style>
.menuboll a{
width:80px; /* LARGURA MENU */
font-family: arial; /* FONT */
font-size: 15px; /* TAMANHO DE LETRA */
border-left:15px solid #FF82AB; /* COR DA BORDA ESQUERDA*/
border-right:15px solid #FF82AB; /* COR DA BORDA DIREITA */
background:#FFB6C1; /* COR DO FUNDO */
margin:3px;
color:#B03060; /* COLOR DA LETRA */
border-radius:10px 10px 10px 10px; /* EFEITO AREDONDADO */
text-align:center;
display:inline-block;padding:3px;
text-shadow: none;
}
/* HOVER {CURSOR} */
.menuboll a:hover{
color:#FFE4E1; /* COR DA LETRA */
border-left:15px solid #DB7093; /* COR DA BORDA ESQUERDA */
border-right:15px solid #DB7093;/* COR DA BORDA DIREITA */
text-decoration:none;
text-shadow: none;
}
</style>

Faça as mudanças destacadas em vermelho, em seguida salve.
-----------♥---------------♥--------------♥----------

Menu Folha:

Crédito de Preview:Dany's Place
Cole o código em um HTML/JavaScript:

<style>
a.mnfolha {background:#FFB5C5;padding: 6px;display: inline-block;font: 8pt arial;width: 75px;text-align:center;margin-bottom:10px;color:#8B636C;border: 2px dashed #CD919E;opacity:.8;-webkit-transition: 0.5s;-webkit-border-radius: 15px;-moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;}a.mnfolha:hover {color:#8B475D;background:url(http://i111.photobucket.com/albums/n159/docedani/acesstemp/backcg_/backbolinha5-2.jpg);}</style><center><a class="mnfolha" href="LINK">NOME DO LINK</a><a class="mnfolha" href="LINK">NOME DO LINK</a>
<a class="mnfolha" href="
<a class="mnfolha" href="<a class="mnfolha" href="LINK">NOME DO LINK</a>
<a class="mnfolha" href="
<a class="mnfolha" href="<a class="mnfolha" href="LINK">NOME DO LINK</a>
<a class="mnfolha" href="
<a class="mnfolha" href="<a class="mnfolha" href="LINK">NOME DO LINK</a>
</center>
</center></center>

Faça as mudanças destacadas em vermelho, em seguida salve.

-----------♥---------------♥--------------♥----------

Menu giratório no topo do blog:


Crédito de imagem: Dany's Place

<style type="text/css">
#scrollToTop:link,#scrollToTop:visited { color: transparent; background-color: transparent; display: none; position: fixed; top: 15px; right: 15px;}
.icon {display : block; font-size: 8pt; font-family: Calibri; line-height: 15px; border-bottom : 1px solid #f4f4f3; text-indent : 5px; vertical-align : middle; background:
url('http://4.bp.blogspot.com/-rws3a70R4A8/UZfr40BpNvI/AAAAAAAAKfY/O9Qt_1n2CVQ/s320/icon1.gif') no-repeat left; padding-left :5px;
padding-bottom : 2px;}
.icon:hover {display : block; font-size: 8pt; font-family: Calibri; line-height: 15px; border-bottom : 1px dashed #E0DCD6; text-indent : 5px; vertical-align : middle; background : url('http://4.bp.blogspot.com/-G874FRJby38/UZfr406k3UI/AAAAAAAAKfQ/JH9dQzvuZ6I/s320/icon2.gif') no-repeat left; padding-left : 10px; padding-bottom : 2px;}
#spinningbox{
-webkit-border-radius: 30px;
-moz-border-radius: 20px;
border-radius: 20px;
moz-box-shadow: 0 0 1px #E799A3;
-webkit-box-shadow: 0 0 8px #C48793;
position:fixed !important;
left:200px;
top: -15px;
padding-bottom:14px;
padding-top:21px;
text-align:left;
height:7px;
width:79px;
overflow:hidden;
border:1px double #D8BFD8 ;
-webkit-transition: opacity 0.6s linear;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
background: #fff;
z-index:999;
color:#7f5a58;
background : url('http://i111.photobucket.com/albums/n159/docedani/back9.png');
}
#spinningbox:hover{
left:200px;
top:10px;
border:2px dashed #D8BFD8 ;
padding:5px;
height:170px;
width:125px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p {
margin:0px; margin-top:0px;
}
a.dp{
color: #8B8682;
background:#FFF;
text-decoration: none;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
font-size:12px;
}
a.dp:hover{
text-decoration: none;
font-style: none;
font-size:12px;
color: #DB7093;
background:#FFFfcc;
}
</style>

<div id="spinningbox">
<center>
<span font="font" style="color: black; font-family:Lucida Sans; font-size: 16;"><span style="background-color: #EED5D2;"> Menu
</span>
</span>
<img src="http://4.bp.blogspot.com/-DFVqsLDQWM8/UZft-uR8sCI/AAAAAAAAKfw/GJinqipiTPo/s320/icon3.gif">
<p><p><b>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
</center>
</b>
</div>

Faça as mudanças destacadas em vermelho, em seguida salve.

-----------♥---------------♥--------------♥----------

Créditos totais de códigos ao blog:
Dany's Place

Abraços♥



18 comentários:

  1. Vou usar o Primeiro para o próximo layout do meu blog. =D

    ResponderExcluir
    Respostas
    1. O menu boll é bem cute né?
      Obrigada por comentar.
      Abraços♥

      Excluir
  2. babi tem novidades no meu blog veja:http://mattelbarbiefashionistas.blogspot.com.br/:D

    ResponderExcluir
    Respostas
    1. Já dei uma olhada, adorei sua nova
      aquisição.
      Abraços♥

      Excluir
    2. Por nada Biel =^.^=
      Abraços♥

      Excluir
  3. Gostei do menu boll :D

    Seguindo, segue de volta?
    www.cupcaketaste.com

    ResponderExcluir
    Respostas
    1. Fico contente por ter gostado.
      Abraços♥


      P.S:Você não está seguindo flor >.<

      Excluir
  4. Parabéns pelo blog e deixamos o nosso blog a disposição para uma visitinha, passa lá.
    www.unhasebocas.blogspot.com.br
    www.facebook.com/pages/Unhasbocas

    ResponderExcluir
    Respostas
    1. Obrigada por sua visita e por seu
      comentário, visitarei seu blog em
      breve.
      Abraços♥

      Excluir
  5. Tem como colocar esse menu um pouco acima do cabeçalho ???

    ResponderExcluir
    Respostas
    1. Usando o código de por Gadgets
      no banner acho que dá,mas eu nunca
      testei >.<
      Abraços♥

      Excluir
  6. Favoritando a página! Vou usar no meu próximo layout

    ResponderExcluir
    Respostas
    1. São fofos né? -risos.
      Obrigada por comentar.
      Abraços♥

      Excluir

Hei, people <3 Que tal deixar sua opinião, sugestão ou critica (construtiva, por favor) em nossos comentários para que assim possamos melhorar ainda mais! Lembrando, é claro, que nossos comentários são moderados, isto é, precisa de minha aprovação para que apareça. Por tanto, seja educado e se expresse de forma a não ofender a autora do blog ou a terceiros, caso contrario seu comentário não será postado, okay? Até aceito o "seguindo, segue de volta?" desde que eu goste de seu blog, seguirei sem problemas. Sem mais delongas, fique a vontade e volte sempre.
Abraços da autora;
Babi Sah ♥