TTPDV

Saiba com se faz: ''Menu dropdown horizontal"

2011-06-20T19:11:00.001-07:00

fonte e créditos: gemablog-.

Menú horizontal desplegable

Antes de nada quiero aclarar que este menú no sustituye las categorías de Blogger, su finalidad es crear enlaces de forma dinámica a modo de desplegable.

1º- Copiamos y pegamos el siguiente código justo después de <head>

<link href='http://ar.geocities.com/blogdecesar/css.css' rel='stylesheet'/>

<script src='http://ar.geocities.com/blogdecesar/js.js' type='text/javascript'>
</script>

Los archivos son gentileza de César, podemos utilizarlos para añadir el menú y averiguar si funciona en nuestro blog pero recomiendo alojar los archivos en nuestro propio servidor para asegurar el buen funcionamiento.
Archivo CSS
Archivo js.
Archivo hack.css

2º- Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:


<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>

</ul>
</div>
</center>

La forma de modificarlo es muy sencilla:
Título o tema será el tema para la categoría de enlaces.
url: debemos pegar la url del lugar que deseamos enlazar.
En Link1, Link2, Link3, y Link4 irá el texto asignado al correspondiente enlace.

Este Menú es una gentileza de César que amablemente pone a disposición de todos.
Yo me he permitido variar un poco las explicaciones para adecuar los colores a nuestro gusto.
El primer código que añadimos a la plantilla contiene tres archivos, un archivo js. y dos CSS.
Uno de los archivos CSS es el que podemos configurar para cambiar el aspecto referente a color.

Lo hice de la siguiente forma:
1º- En el primer paso añadí justo antes de </head> el archivo js. que previamente subí a mi servidor.

2º-Después el archivo css que contiene la configuración para modificar el aspecto del menú lo abrí con el bloc de notas y copié su contenido para seguidamente pegarlo justo antes de ]]></b:skin>
El contenido es el siguiente: archivo css

Es ahí donde podéis modificar los colores del menú donde dice /*colors for menu*/

3º-Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir el mismo código que el primer paso:


<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>

</ul>
</div>
</center>

Añadimos los enlaces y listo.

Como podéis comprobar la única diferencia es que añadimos en nuestra plantilla un archivo que siendo alojado en un servidor ocuparía mucho menos espacio pero que podremos modificar cada vez que lo deseemos sin necesidad de abrir el archivo y volverlo a alojar.
Si una vez modificado no necesitamos modificarlo más también podemos subir el archivo a nuestro servidor y en el código de César que añadimos después de <head> sustituimos:url-de-archivo-css por la url de vuestro archivo css.
Ver ejemplo en el blog de César.

traduzido :

Menu dropdown horizontal

Em primeiro lugar quero esclarecer que este menu não substitui as categorias do Blogger, se destina a criar links dinamicamente-down mode.

1 - Copie e cole o seguinte código logo após <head>

href = "http://ar.geocities.com/blogdecesar/css.css 'rel='stylesheet'/> <link
<!--[ If IE]>
<link rel="stylesheet" href="http://ar.geocities.com/blogdecesar/hack.css" />
<script type="text/javascript">
window.mlrunShim = true;
</ Script>
<[Endif] ->
<script 'http://ar.geocities.com/blogdecesar/js.js "src = type='text/javascript'>
</ Script>

"Os arquivos são cortesia de César, que podemos usar para adicionar menu e descobrir se ele funciona em nosso blog, mas eu hospedar os arquivos em seu próprio servidor para garantir um funcionamento suave."

"Arquivo CSS
Js.
Hack.css Arquivo"

2 - Salve as mudanças e estamos em Template / Adicionar um elemento de página / HTML / Javascript acrescentar o seguinte:


<Div <center> plus "> blindv classe BlueWhite horizontal =" mlmenu
<ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>

</ Ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>

</ Ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>

</ Ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>

</ Ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>
</ Ul> </ li>

</ Ul>
</ Div>
</ Center>

Como modificá-lo é muito simples:
Título ou assunto é o tema para os links de categoria.
url: que colar o url do lugar que você deseja vincular.
Em Link1, Link2, Link3E Link4 será atribuído ao link de texto adequado.

Este menu é cortesia de César gentilmente disponibilizado a todos.
Eu deixei as explicações variam ligeiramente para combinar as cores ao seu gosto.
O primeiro código que adicionamos ao modelo contém três arquivos, um js. e dois CSS.
Um dos arquivos CSS é que você pode configurar para mudar o aspecto relativo à cor.

Eu fiz da seguinte forma:
1 - Na primeira etapa eu adicionei um pouco antes </ HEAD> js. anteriormente subi para o servidor.

Depois de 2 º-arquivo css que contém as configurações para mudar o visual do menu abri-lo com o bloco de notas e copie o seu conteúdo para em seguida, cole um pouco antes ]]></ B: skin>
O conteúdo é o seguinte: css

Isto é onde você pode alterar as cores do menu onde diz / * Cores para o menu * /

3 º-Salve as mudanças e estamos em Template / Adicionar um elemento de página / HTML / Javascript para adicionar o mesmo código como o primeiro passo:


<Div <center> plus "> blindv classe BlueWhite horizontal =" mlmenu
<ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>

</ Ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>

</ Ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>

</ Ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>

</ Ul>
</ Li> <li> <a href="#"> título ou assunto </ A>
<ul>
<li> <a href = "url">Link1</ A> </ li>
<li> <a href = "url">Link2</ A> </ li>
<li> <a href = "url">Link3</ A> </ li>
<li> <a href = "url">Link4</ A> </ li>
</ Ul> </ li>

</ Ul>
</ Div>
</ Center>

"Nós adicionamos links e pronto."

"Como você pode ver a única diferença é que nós adicionamos em nosso arquivo de modelo a ser hospedado em um servidor levaria menos espaço, mas podemos mudar sempre que quiser sem ter que abrir o arquivo e vai ficar."

"Se você não precisa mudada uma vez que podemos modificá-lo

fazer o upload do arquivo para o nosso servidor e adicionar um

código após Caesar <head>

substituto:url-css a url do seu arquivo css.

Ver blog exemplo César.

http://tudotemprazodevalidade.blogspot.com

Saiba como se faz: "Menu horizontal ...Menu em tabela "

2011-06-20T08:37:00.000-07:00

Fonte e créditos deste presente post:templateseacessorios

..."o código"

"Copie,

vá até o HTML de seu blog e cole-o antes de"

<div id='header-wrapper'> "Para que fique acima do cabeçalho " /\

\/..."Para que fique depois do cabeçalho, cole antes de"
<div id='content-wrapper'>

<table cellpadding='0' cellspacing='0' margin='3px' width='100%'><tr>
<td align='right'><table bgcolor='#464646' border='0' cellpadding='3' cellspacing='0'><tbody><tr>
<td style='vertical-align: top; width: 236px;'><b>
<a href='ENDEREÇO LINK 1' style='color: #cccccc' target='_blank'>LINK 1</a></b><br/><span style='font-weight:normal;color:#000000;'>INSCRIÇÃO LINK 1</span><br/><small><a href='LINK 1 BAIXO' style='font-weight:normal; color: #7A8571' target='_blank'>INSCRIÇÃO OCULTA LINK 1 </a></small></td>

<td style='vertical-align: top; width: 236px;'><b>
<a href='ENDEREÇO LINK 2' style='color: #cccccc' target='_blank'>LINK 2</a></b><br/><span style='font-weight:normal;color:#000000;'>INSCRIÇÃO LINK 2</span><br/><small><a href='LINK 2 BAIXO' style='font-weight:normal; color: #7A8571' target='_blank'>INSCRIÇÃO OCULTA LINK 2 </a></small></td>

<td style='vertical-align: top; width: 236px;'><b>
<a href='ENDEREÇO LINK 3' style='color: #cccccc' target='_blank'>LINK 3</a></b><br/><span style='font-weight:normal;color:#000000;'>INSCRIÇÃO LINK 3</span><br/><small><a href='LINK 3 BAIXO' style='font-weight:normal; color: #7A8571' target='_blank'>INSCRIÇÃO OCULTA LINK 3 </a></small></td>

<td style='vertical-align: top; width: 240px;'>
<div id='google_translate_element'/><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
   pageLanguage: 'pt'
  }, 'google_translate_element');
}
</script><script src='http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
</td>

<td style='vertical-align: top; width: 20px;'>
<a href='ENDEREÇO DO SEU FEED' rel='alternate' title='RSS Feed'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOysM7aJ0aPcdLBMNg4-QUjF-xJ-6aW2Kz2C2u-MnaKD3f0kkDvWhuubWyIZR5eC-ljnqLBFhZrEch2jO64i_mlztm3SecLVzxn2O8k-ba3a9bWYpp8xbUWnOnRB1Nzx2GeQ5fHTIVOkk/s1600/1258050851_rss.png' style='horizontal-align: center;'/></a>
</td>

<td style='vertical-align: top; width: 20px;'>
<a href='ENDEREÇO DO SEU AGREGADOR' rel='alternate' title='Titulo do agregador'><img alt='Titulo do agregador' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiye6ALwIF7QdfbkNe28lTRUwHc0pmBVSaoLW4W_iEkau1W-jrkMRqBg2hYS4jMSPrKbbA7RPDfNCaJWdvUjLESabYuxn_YitBmhZy0_kzpYgfMH_scF8uXJb1ASsnFq6Hjr17-wpYGKNg/s1600/1258050871_BLOGBLOGS.png' style='horizontal-align: center;'/></a>
</td>

<td style='vertical-align: top; width: 20px;'>
<a href='http://twitter.com/SEU-NICK-DO-TWITTER' rel='alternate' title='Twitter'><img alt='Siga-me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTkPKXgJfyJz54ci5Pa4NEjdUmveMuUGatWhis9qZOlE9X68xxDBvS6XjzvlNUHE3VZH9qz-sKJKYoLOCnKk_oLOpcovPM_TJcpK7-4Yy_kKKyK9bYTaqlELFKigvuerX08KDdRrPj0YQ/s1600/1258050838_twitter.png' style='horizontal-align: center;'/></a>
</td>
<td style='vertical-align: top; width: 20px;'>
<a href='mailto:SEU-EMAIL-AQUI@gmail.com' title='Email'><img alt='Escreva-me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyp2-sEMuasmR_kj0NilAcVqOHB2rcRts_56shNP4J5JV9vH8LN9R8jT49KpgcKX9d5ZHbNdXsX4uAzZ141GeCx19g5WFtn8LyVM7KnLZd5JiKpB9ZfsrpSu9gTMeaS8pJh8zltgW9Fo8/s1600/1258050871_EMAIL.png' style='horizontal-align: center;'/></a>
</td>
</tr></tbody></table></td></tr></table>

No código acima onde está em verde é a cor de fundo do menu.
Em cinza é a cor das letras do menu
Em azul é para que você troque pelos seus links, é a parte escrita.
Em vermelho é o tradutor, caso não o queira, apague todo o código.
Em rosa já representa a parte dos botões. Coloque o seu enick e o endereço conforme é pedido nos locais indicados.

juntinhos, quentinhos!!!... você gosta?

2011-06-18T23:01:00.001-07:00

inicio de inverno... 21/06... você gosta?