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