Leilão no El Micox por banner - tentativa

Olá Sr. Senhor, que tal um banner com link do seu site alí em cima?

O Sr. Micox não ganha um mísero centavo para ficar postando tutoriais e códigos bala aqui e tava afim de explicar financeiramente para a patroa "por que motivos ele fica na frente do computador fazendo códigos pros outros em vez de ir assistir o BBB".

O Sr. Senhor não irá se arrepender. O(s) blog(s) do Micox tem uma seleta casta de leitores e assinantes desenvolvedores web que levarão seus rendimentos às alturas!

A idéia surgiu após eu ver este post aqui do treta e raciocinar que o google adsense não é generoso com este pobre blog, então preciso procurar outros caminhos pra continuar postando e ter pelo menos um pequeno retorno financeiro por fazer códigos di grátis na madrugada. hehahe

Aconselho meus brodis blogueiros de desenvolvimento web a tentarem a mesma fonte de recursos. Google adsense só dá certo com blogs do povão.

Como não sei o valor de um banner 468x60 com link aí no topo vou fazer um leilão. Não é possível que um blog com tamanha qualidade e quantidade de acessos tenha o valor pelo menos de um mísero iphone, portanto vou fixar o lance mínimo em 500 reais para ter seu banner aí por 1 mês (claro que é brincadeira). Na real, o lance mínimo é 50 reais por mês.

Acretido que pra muitos blogs/sites/serviços o El Micox talvez seja interessante. Um pagerank bãozim, links importantes de sites importantes, visitantes da área de tecnologia, etc.

Dê seu lance por um banner no El Micox. Mesmo que seja pouco, não deve ser menos que o que ganho do Google Adsense aqui no El Micox hehaeh. Ajuda o macaco aeee. Se você está por aqui é porque provavelmente ele já deve ter te ajudado.

Abaixo, algumas estatísticas (o banner será colocado nos 3 elmicox):

elmicox.blogspot.com
Frequencia de postagem - Semanal
Postagens: 125
Assinantes do feed: 0 (todos 460 são redirecionados ao www.elmicox.com)
Pagerank 5 (Calculado por marketingdebusca.com.br)
Technorati authority: 26 (quanto maior melhor)
Links apontando (de acordo com o Google Webmasters tools): 6936
Links apontando (de acordo com o link:elmicox.blogspot.com desatualizado): 150
Links apontando (de acordo com o technorati): 231 blog reactions
Visitas dos assinantes ao site (últ. 30 dias): 0 (redirecionados ao elmicox.com)
Total de visitas (by google analytics - ult. 30 dias): 5.963
Exibições de página (ult. 30 dias): 8.004
Tempo médio no site: 01m 26s
Cidades que mais visitam (ult. 30 dias) : SP (1020); RJ (518); BH (311); curitiba (248); continua...

www.elmicox.com
Frequencia de postagem - Semanal
Postagens: 67
Assinantes do feed: 460
Pagerank 4
Technorati authority: 10
Links apontando (Google Webmasters tools): 538
Links apontando (link:elmicox.blogspot.com desatualizado): 28
Links apontando (technorati): 15 blog reactions
Visitas dos assinantes ao site (últ. 30 dias): 82 clicks
Total de visitas (by google analytics): Não monitoro
Exibições de página (ult. 30 dias): Não monitoro
Tempo médio no site: Não monitoro
Cidades que mais visitam (ult. 30 dias) : não monitoro

elmicoxcodes.blogspot.com (ingles)
Frequencia de postagem - Mensal Fraca.
Postagens: 13
Assinantes do feed: 23
Pagerank 4
Technorati authority: 4
Links apontando (Google Webmasters tools): 1173
Links apontando (link:elmicox.blogspot.com desatualizado): 31
Links apontando (technorati): 54 blog reactions
Visitas dos assinantes ao site (últ. 30 dias): 12 clicks
Total de visitas (by google analytics - ult. 30 dias): 3.151
Exibições de página (ult. 30 dias): 3.919
Tempo médio no site: 01m 09s
Países que mais visitam (ult. 30 dias) : USA (817); India (358); Reino Unido (173); Alemanha (142); continua...

As estatísticas não estão maquiadas. Vejam que coloquei até indicadores não muito bons.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Desafio Webly de Layouts - valendo pendrive, revista webdesign, camisetas, mousepads

Pois é pois é pois é.

O desafio da vez no Webly é o:

"tchanaaam!!!" - Desafio WeblY de layouts! Como será o layout do Portal Webly em 2050?

Como o Webly é o mais superfodástico portal e fórum de tutoriais web, conseguimos vários patricínios e grana para poder oferecer VÁRIOS prêmios aos participantes deste desafio:

Pendrive da Emporio Logo, CDs da revista Webdesign, adesivos webly, camisetas webly e mousepad webly.

[jabá inside jabá on] Se quiser patrocinar o Webly também ou ver as vantagens em ser parceiro, entra em contato com um dos admins [/jabá inside jabá off]

É difícil você ver estes desafios de fórum darem prêmios. E ainda mais tantos prêmios.

Passa lá. Quem sabe, além de se divertir e mostrar sua técnica, você ainda ganha um dos prêmios. A parada já está valendo!

Chama seus cumpadi aí também.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Ultimate Micox Menu drop-down CSS - até 4 níveis

HOoooaa. E ae malucada.

Há um tempo eu venho brigando em busca do código de menu css drop-down perfeito.
Eu queria um menu dropdown css pra copiar e colar, simples, rápido, sem precisar de configurações.
Apenas copiar/colar no meu CSS, definir cor e largura dos itens, usar a classe no html e pronto. E tudo funcionando nos navegadores mais usados (FF, IE6/7, OP).

Ontem eu postei a peça que faltava (ativar hover no IE6 via css).
Veja o exemplo online (e o código fonte) do Ultimate Micox Menu Drop Down CSS até 4 níveis.

Bem, vamos aos códigos:
Primeiro é só fazer seu velho menu usando UL e LI.

<ul>
 <li>class='menu-hv'</li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3...</a>
  <ul style='background-color: red; '>
   <li>31</li>
   <li><a href='#'>32</a></li>
   <li>33</li>
  </ul>
 </li>
 <li><a href='#'>4...</a>
  <ul>
   <li>41</li>
   <li><a href='#'>42</a></li>
   <li><a href='#'>43...</a>
    <ul  style='background-color: blue'>
     <li>431</li>
     <li><a href='#'>432...</a>
      <ul  style='background-color: gray'>
       <li>4321</li>
       <li><a href='#'>4322</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li>44</li>
  </ul>
 </li>
</ul>

Depois você coloca a classe menu-hv no UL (ou no div pai de UL) para ativar o menu horizontal com submenus verticais. Para o menu vertical vertical (em pé) a classe é menu-vv.

<ul class='menu-hv'>

Por último é só colocar o código do Ultimate Micox Menu drop-down CSS (UMMDDCSS huahe) no seu arquivo CSS ou em um arquivo CSS separado. O local onde você pode alterar a cor, largura, etc dos itens do menu está indicado no código. Não mexa no resto pra não correr o risco de estragar.

/*
  Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
  by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/    
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
 .menu-hv * ,    .menu-vv * { margin: 0; padding: 0 ; list-style: none}
 .menu-hv li ,   .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
 .menu-hv a ,    .menu-vv a { display: block; zoom: 1; line-height: 1.2em }
 .menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden  }
 .menu-hv li:hover ul,  .menu-vv li:hover ul,
 .menu-hv li.hover ul,  .menu-vv li.hover ul { visibility: visible }
 .menu-hv li:hover ul ul,  .menu-vv li:hover ul ul,
 .menu-hv li.hover ul ul,  .menu-vv li.hover ul ul { visibility: hidden }
 .menu-hv li li:hover ul,  .menu-vv li li:hover ul,
 .menu-hv li li.hover ul,  .menu-vv li li.hover ul { visibility: visible }
 .menu-hv li li:hover ul ul,  .menu-vv li li:hover ul ul,
 .menu-hv li li.hover ul ul,  .menu-vv li li.hover ul ul { visibility: hidden }
 .menu-hv li li li:hover ul,  .menu-vv li li li:hover ul,
 .menu-hv li li li.hover ul,  .menu-vv li li li.hover ul { visibility: visible }
 /* características horizontal-vertical */
 .menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
 .menu-hv li { float: left; }  
 .menu-hv li ul li { float: none; }
 .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
 /* características vertical-vertical */
 .menu-vv { float: left; } 
 .menu-vv li ul { left: 100%; top: 0; }
 /* ****************************************
   ALTERE ABAIXO. defina a largura, cor, formatações, etc, dos itens do seu menu abaixo
   ou apague as linhas se for definir em outro lugar
 */
 .menu-hv li { width: 100px; background-color: yellow }
 .menu-vv li { width: 100px; background-color: yellow }
 .menu-hv li a:hover { background-color: cyan }
 .menu-vv li a:hover { background-color: cyan }

 
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6
   http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html 
   Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression */
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

Pronto! Agora ficou fácil fazer um menu drop down CSS. É só copiar e colar isso aí no código. Não precisa pegar javascript externo, não precisa quebrar cabeça com floats ou displays. É só colocar isto no seu documento e fazer seu menu ul-li.

Os espertos devem ter percebido que dá pra aumentar a quantidade de níveis facilmente adicionando novos níveis onde começa os visibility: hidden né? heheh

Bom, é isso aí. Dúvidas, é só postar lá no fórum. Até a próxima diversão.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Ativando .hover e .first-child no IE 6 - um novo método

Tamo de volta malucada

Todos aqui devem saber que as pseudo-classes do CSS 2 :hover e :first-child não funcionam direito no IE6 né? A hover só funciona em links.

Porém vossas senhorias já devem conhecer inúmeras ténicas secretas ninja para simular as pseudo classe hover e first-child no IE 6 né? Técnicas com javascript simples, técnicas com libs javascript, arquivo htc, etc

Abaixo eu mostro uma nova técnica que o mico inventou enquanto estava desenvolvendo sua Micox-mini-css-lib (em breve em um blog perto de você).

A vantagem da minha criança é que ela pode ser colocada direto no seu CSS, em qualquer lugar dele (de preferencia no começo). Ela é baseada em javascript dentro do CSS.

Para ativar, você deve usar as classes .hover em conjunto com a :hover OU .first-child em conjunto com a :first-child nos elementos onde deseja o efeito. Tipo assim:

li:first-child , li.first-child { color: red }

Abaixo, o código que faz a mágica e deve ser colocado no começo FINAL do seu css. Quem não entender me pergunta nos comments.

Micox Pseudo-class-css2 to IE (MXPC)

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 
   Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression
*/
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

/* example */
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { background-color: blue }

"Viiixxxxxx maria, onde eu coloco isso mico?" - Não tema o código Sr.! Apenas coloque ele no começo FINAL do seu CSS. Veja esta página de exemplo e zóie o código fonte dela.

O bom é que esta idéia do expression pode ser usada para outras gambiarras também. Em breve eu devo voltar com mais.

Em breve tô de volta. Té mais.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.