21/10/2015

Menu deslizante com Caixa jQuery e Css3


TEMA: Menus
ARTIGO: Revisado
VERSÃO:   WEBACAPPELLA  4


Fala turma do bem,, que calor que está aqui . Nem imaginem..

Hoje então vou disponibilizar um Menu bem bacana, espero que gostem.

Este menu fica bem  legal se você centralizar verticalmente na primeira página, e dá um efeito bacana se o fundo do site for um slideshow.

Vamos lá.


Você necessitará editar alguns arquivos. Para isso sugiro o Notepad++, baixe-o gratuitamente clicando aqui.

Clique aqui e baixe os arquivos necessários.

Descompacte a o arquivo baixado em um local no seu equipamento.



CONFIGURANDO O MENU

Copie o código abaixo e cole em um documento em branco no notepad++

Passo 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://www.webacappellashow.com.br/templates/tatuador/css/style.css" type="text/css" media="screen"/>

</head>

<body>
<div class="content">

<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Sobre</span>
<span class="sdt_descr">Nossa história</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/2.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Catálogo</span>
<span class="sdt_descr">Tatuagens | Body Piercing</span>
</span>
</a>
<div class="sdt_box">
<a href="URL.html">Tatuagens Masculinas</a>
<a href="URL.html">Tatuagens Femininas</a>
<a href="URL.html">Body Piercing</a>
</div>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/3.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portifólio</span>
<span class="sdt_descr">Instagram</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/4.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Estúdio</span>
<span class="sdt_descr">Nosso local</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/5.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Artigos</span>
<span class="sdt_descr">Dicas | Curiosidades | Notícias</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/6.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Contato</span>
<span class="sdt_descr">Fale conosco</span>
</span>
</a>
<div class="sdt_box">
<a href="URL.html">Contato</a>
<a href="URL.html">Fanpage</a>
<a href="URL.html">Instagram</a>
</div>
</li>
</ul>
</div>


<!-- The JavaScript -->
<script type="text/javascript" src="http://www.webacappellashow.com.br/templates/tatuador/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.webacappellashow.com.br/templates/tatuador/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
</body>

</html>


Passo 2


Substitua os trechos em vermelho pela url do seu domínio.

Exemplo:

Supomos que seu domíno  seja  www.meudominio.com.br

Então no trecho que esteja assim:

<link rel="stylesheet" href="http://www.webacappellashow.com.br/templates/tatuador/css/style.css"

vai ficar assim:

<link rel="stylesheet" href="http://www.meudominio.com.br/css/style.css"


Passo 3

Substitua os trechos em azul pelos seus títulos


Passo 4

Substitua as imagens na pasta upload/arquivos pelas suas imagens.

Sendo que a imagem 1.jpg é para a primeira opção, a 2 para segunda e assim por diante.

Passo 5

Substitua os trechos em verde pela url referente a cada opção


Passo 6

Agora copie todo o código já alterado no Notepad++ E N o Webacappella, na página que vai inserir o menu (pode ser numa matriz) , utilize da opção INSERIR>>CÓDIGO ,

Cole o código já alterado

Posicione a área do código onde vai querer o menu.


PERSONALIZANDO O MENU

Irei passar as personalizações básicas, nada impede que você altere algo a mais se tiver experiência

Edite o arquivo style.css com o notepad++  que se localiza dentro da pasta CSS

Alterar a cor do título principal:
Linha 72: altere o valor da cor

Alterar a cor do subtítulo
Linha 78  : altere o valor da cor

Alterar a cor das sub-opções em estado normal
Linha 100: altere o valor da cor

Alterar a cor das sub-opções quando o mouse passa por cima
Linha 106: Altere o valor da cor


Salve o arquivo


HOSPEDANDO OS ARQUIVOS

Finalizando copie as pastas a seguir para o diretorio public_html de sua hospedagem


  • CSS
  • IMAGES
  • JS
  • UPLOAD


Agora só publicar o site e prontinho. Espero que gostem!!





10/10/2015

Google penaliza sites responsivos





POSTAGEM REVISADA E ATUALIZADA EM : 30/07/2016

Fala galera do bem. Abraço a todos.


O título deste artigo deve ter despertado algo não é mesmo? É que da maneira que colocamos uma frase muitas vezes o sentido muda completamente.

Eu digo sempre que muitas vezes as ordens dos fatores alteram sim o resultado (rs) . Vou dar um exemplo pra vocês:

Frase 1

- Joãozinho é muito competente, porém ele chega sempre atrasado.


Frase 2

- Joãozinho chega sempre atrasado, mas ele é muito competente.


Na primeira eu atrapalho a situação do Joãozinho enquanto na segunda eu o elevo.. Mas na verdade as duas frases falam a mesma coisa.

heheh.. Mas vamos para o nosso artigo, foi mais pra descontrair um pouquinho..


Quando digo que o Google penaliza os sites responsivos não quero dizer todos. Só quero frisar que o fato do site ser responsivo não significa que não será penalizado pelo Google.

Estou frisando isso pois falam-se muito pela internet que um site responsivo já é um site pronto para dispositivos móveis. Mas não é bem assim.


Estou postando alguns e revisando outros para voltar ao ar de  uma série de artigos com o tema "Mobile ou Responsivo", para ver todos os artigos clique aqui.


O que estou tentando mostrar é que o site criado pelo WebAcappella Responsive, deve-se também de se tomar cuidado nas exigências do Google. Pois provavelmente o site vai abrir no celular com sua responsabilidade, porém pode sim, ser penalizado pelo Google.


Vou mostrar aqui, até mesmo sem minha vontade uma situação em que um sites responsivo não passou no teste do Google.

Digo sem minha vontade, pois muitos vão achar que estou "queimando" a imagem desse sites (até adorei o site). Nnão é minha intenção. Apenas para mostrar que é verídico quando digo que por um site ser responsivo não significa que não será penalizado pelo Google.




O site www.benestare.com, é um site responsivo. observe as imagens: 

*E no meu ponto de vista é um site perfeito.

Print navegador maximizado:




Print navegador em largura mínima





Print feito pelo teste do Google

https://www.google.com/webmasters/tools/mobile-friendly/?hl=pt-BR&url=http%3A%2F%2Fwww.benestare.com%2F





Poderia mostrar vários outros na mesma situação. Mas não acho legal fazer isso. Só mesmo postei um para que vocês vejam e se atentam que: Mesmo o site sendo responsivo deve-se seguir as exigências do Google para não ser penalizado.

Para o tal eu sugiro sempre utilizar das Ferramentas do Google para adequar seu site Mobile ou responsivo. O próprio Google oferece várias soluções para o ajuste.

O que é bom sempre ter em mente é que a intenção do Google é entregar a melhor experiência para seu usuário. E o fato de ser responsivo não significa que ele será aprovado pelo Google para o rankeamento.


Para finalizar, comento também, que não pense que só porque o site passou pelo teste do Google que não precisa se preocupar com mais nada. Durante esta série de artigos vão ser mostrado muitos detalhes. Bom seria se desse para falar de tudo em uma só postagem.

Abraços a todos e ótimo final de semana




Related Posts Plugin for WordPress, Blogger...