22 de out. de 2012

Menu suspenso de opções


Uma leitora me pediu para ensinar o Tutorial do menu que usei no post de capas para Facebook lá no meu outro blog. Esse tutorial é de um Menu de opções, aqueles bem usados em elites de afiliados.
Eu já vi bastante gente usando e ensinando, mesmo assim vou dar os créditos ao blog Pink Berry, pois foi onde vi pela primeira vez. Vamos ao tutorial:
Veja o preview aqui.

Modo 1:

Esse é o modo que a Sunny ensinou, mas o modo que usei é diferente (como sempre!) e serve também para usar nos posts.
Adicione em um Gadget de HTML/JavaScript o seguinte código:

<script language="JavaScript" type="text/javascript">
function openDir( form ) {
var newIndex = form.fieldname.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a location!" );
} else {
cururl = form.fieldname.options[ newIndex ].value;
window.location.assign( cururl );
}
}
</script>
<form name="form" id="form">
<select style="width: 100%; text-align: center;
color: #000000; /* cor do texto */
font-size: 11px; /* tamanho do texto */
border: 2px solid #fa567d; /* Bordas do Veja mais */
background: #ffdde7" /* cor de fundo do Veja Mais */ name="fieldname" onchange="openDir( this.form )">
<option />Escreva aqui a mensagem (por exemplo: Clique e Veja os Afiliados!)<option style="background:#COR1" value="URL1" />Nome do Blog 1<option style="background:#COR2" value="URL2" />Nome do Blog 2<option style="background:#COR1" value="URL3" />Nome do Blog 3</select>
</form>

Modo 2:

Atenção: Esse é outro modo de usar, NÃO precisa usar dos dois jeitos.

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

</head>

2-Acima disso, cole:


<script language="JavaScript" type="text/javascript">
function openDir( form ) {
var newIndex = form.fieldname.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a location!" );
} else {
cururl = form.fieldname.options[ newIndex ].value;
window.location.assign( cururl );
}
}
</script>
3- Vá onde quer colocar o menu (no post ou em um Gadget) e cole o seguinte:

<form name="form" id="form">
<select style="width: 100%; text-align: center;
color: #000000; /* cor do texto */
font-size: 11px; /* tamanho do texto */
border: 2px solid #fa567d; /* Bordas do Veja mais */
background: #ffdde7" /* cor de fundo do Veja Mais */ name="fieldname" onchange="openDir( this.form )">
<option />Escreva aqui a mensagem (por exemplo: Clique e Veja os Afiliados!)
<option style="background:#COR1" value="URL1" />Nome do Blog 1<option style="background:#COR2" value="URL2" />Nome do Blog 2<option style="background:#COR1" value="URL3" />Nome do Blog 3</select>
</form>
Sempre que quiser usar o menu cole o código do passo 3.



Para acrescentar mais abas, coleantes de </select> o seguinte código (vale para os dois modos):

<option style="background:#COR" value="URL" />Nome do Blog 
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

6 comentários:

  1. oi Mariana o chá com anjos ganhou uma tang do teens--crazy(.blogspot.com)

    ResponderExcluir
  2. Vamos fazer afiliação meu blog e um blog de tutorial podemos?

    http://revistamf1.blogspot.com.br/

    se quizer deixa um comentário no meu blog!!!

    ResponderExcluir
  3. AAh, eu vou usar no meu próximo lay *------*

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!