tag:blogger.com,1999:blog-67809040185788423512024-02-21T01:55:38.813-03:00WebAcappella ShowSua Biblioteca WebAcappella on LineUnknownnoreply@blogger.comBlogger102125tag:blogger.com,1999:blog-6780904018578842351.post-21133812971599257942021-07-05T17:57:00.004-03:002021-07-05T17:57:51.358-03:00Cookie Yes - Consentimento para cookie no site Webacappella<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0RRpnXbrxe_DkrNTxLaL6KV-NpJEP84s1cj_EMko-thqKLbBxtjjb8ljQzTho1OZuKsxkxwGv0-A46-kw78miK4yC1wgzpBuh1aNdR_7SABV3kuuXedfhNKG3LQNIy8AgSSGXt4krPM/s1200/cookie+yes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0RRpnXbrxe_DkrNTxLaL6KV-NpJEP84s1cj_EMko-thqKLbBxtjjb8ljQzTho1OZuKsxkxwGv0-A46-kw78miK4yC1wgzpBuh1aNdR_7SABV3kuuXedfhNKG3LQNIy8AgSSGXt4krPM/w640-h334/cookie+yes.jpg" width="640" /></a></div><br /><p></p><p><br /></p><p style="text-align: justify;"><span style="font-family: helvetica;"><span style="background-color: white; color: #202122;">A </span><b style="background-color: white; color: #202122;">Lei Geral de Proteção de Dados Pessoais (LGPD ou LGPDP)</b><span style="background-color: white; color: #202122;">, </span><a class="external text" href="https://lgpd-brasil.info/" rel="nofollow" style="background: url("/w/skins/Vector/resources/common/images/external-link-ltr-icon.svg?48e54") right center no-repeat rgb(255, 255, 255); color: #3366bb; padding-right: 13px; text-decoration-line: none;">Lei nº 13.709/2018</a> é <span style="background-color: white; color: #202122;"> legislação brasileira que regula as atividades de tratamento de dados pessoais e que também altera os artigos 7º e 16 do </span><a href="https://pt.wikipedia.org/wiki/Marco_Civil_da_Internet" style="background: none rgb(255, 255, 255); color: #0645ad; text-decoration-line: none;" title="Marco Civil da Internet">Marco Civil da Internet</a><span style="background-color: white; color: #202122;">.</span></span></p><p style="text-align: justify;"><span style="background-color: white; color: #202122;"><span style="font-family: helvetica;">Então influi tudo referente a proteção de dados, e não simplesmente colocar um aviso em seu site. É importante lembrar que quem trabalha na área de desenvolvimento de sites, é como qualquer um, deve ter sua política interna em tratar os dados de seus clientes e também não pense, que é só fazer o site entregar com um aviso de cookies e se der algum problema do site não está devidamente seguindo as normas, este está livre de qualquer responsabilidade com a desculpa que o dono do site é o responsável sobre todo o conteúdo. Pois a forma que o site trata a coleta de dados é de responsabilidade do desenvolvedor. Ele é caracterizado pela Lei no papel de operador. </span></span></p><p style="text-align: justify;"><span style="background-color: white; color: #202122;"><span style="font-family: helvetica;">Ou seja, se você trabalha com criação / desenvolvimento de sites (até mesmo se fornece serviços de hospedagem) deve-se preocupar sim o quão mais profundo sobre a LGPD.</span></span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Eu até agora fiz vários cursos gratuitos, e no meu ponto de vista; estes passam informações globais, mas não aprofundada sobre o assunto. Então aconselho também que todos fiquem por dentro da Lei na íntegra. Aconselho também, como farei em breve, cursos mais completos e também uma pesquisa árdua considerando palestras de profissionais da área.</span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Mais pra frente vou tentar postar no blog algum estudo mais profundo sobre a LGPD, mas confesso que ainda não me sinto 100% preparado para isso. O que eu posso dizer que no site tudo quanto é cookie em que se possa chegar a uma pessoa tanto com informações de dados direta e sensível deve ser declarado. </span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Alguns exemplos: Qualquer integração com rede social (seja ele pixel ou mesmo plugin de página, até mesmo apresentação de vídeos do Youtube ), formulário de contato, plugins de chat de atendimento; etc.</span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Bom, mas como dito, ainda vou preparar um post mais aprofundado neste assunto. Enquanto isso estarei mostrando várias formas de se implementar o controle de cookies em seu site de forma gratuita mostrando várias plataformas que encontrei pela Internet. </span></p><p></p><div style="text-align: justify;"><span style="font-family: helvetica;">Estarei mostrando várias, pois a maioria em versão gratuita tem suas limitações, seja na configuração de layout, seja na quantidade de visitas o site recebe , seja na quantidade de páginas que o site tem.</span></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div style="text-align: justify;"><span style="font-family: helvetica;">Dessa forma, deve-se estudar cada um e ver se adequa ao projeto. Até mesmo pela questão do layout do aviso de consentimento combinar com o layout do website.</span></div><p></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><b>Hoje então vamos começar falando sobre a <a href="https://www.cookieyes.com/" target="_blank">CookieYes</a></b></span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Eu gostei na Cookie Yes foi no estilo de cores, da forma da mensagem de consentimento e suas opções.</span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Abaixo um print da tabela de preços da CookieYes na data de hoje. Lembrando que antes de se cadastrar é sempre aconselhável ler Os Termos e condições quanto a Política de privacidade. Uma vez que pode ser alterado a qualquer momento.</span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJp2fNL3FRMHzE3lhrebEJqXxoyTAPIHEJD5g9e-L5gatl50fZzwOLyl2mgDGPDLY2EmXg1jKk_rsP991oiLXEudaD0_PuNSa0ZBzBQQ2eBN-avthChppYQNdgR7oY5pyE8Ob4VJrTt8/s948/cookiesyes+plugin+consentimento+cookie.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="796" data-original-width="948" height="538" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJp2fNL3FRMHzE3lhrebEJqXxoyTAPIHEJD5g9e-L5gatl50fZzwOLyl2mgDGPDLY2EmXg1jKk_rsP991oiLXEudaD0_PuNSa0ZBzBQQ2eBN-avthChppYQNdgR7oY5pyE8Ob4VJrTt8/w640-h538/cookiesyes+plugin+consentimento+cookie.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><p style="text-align: justify;"><span style="font-family: helvetica;">Após de cadastrar em uma conta gratuita, na primeira tela é disponibilizado a escolha do modelo do banner de consentimento. </span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKQBPS2cC5Fc95fgizHzqsWT0KW7o1ZQRBCr1T3qiTtv9jqZO_XwoqKwbV33glleiYJWKZ7OodDtxVVV1IfeLvcFd9S_WpWcizoG6fFkeUkqYJHd5Z6r-bOjDPTAFJ9Ycwv87yQhLzC4/s1339/cookie+yes+%252C+modelo+de+consentimento.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="482" data-original-width="1339" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKQBPS2cC5Fc95fgizHzqsWT0KW7o1ZQRBCr1T3qiTtv9jqZO_XwoqKwbV33glleiYJWKZ7OodDtxVVV1IfeLvcFd9S_WpWcizoG6fFkeUkqYJHd5Z6r-bOjDPTAFJ9Ycwv87yQhLzC4/w640-h230/cookie+yes+%252C+modelo+de+consentimento.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><p style="text-align: justify;"><span style="font-family: helvetica;">Clicando em Customizar surge várias opções tais idioma, textos configuráveis, cores e até mesmo a opção de configurar o CSS. Porém, não se preocupe de configurar nada agora, deixe para o final (pois em teste, tudo que salvei antes de implementar o código no site, não ficou salvo). </span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1k81EApXiSab15e6ivRHnictnskFBj0rZL_TXpeVSFEiiZTpoLLjTtu2Jv5ntD5BsUbXOr0mQ2C_L10Nc-BXqSnxJVUZmt2KQ5LaTK_HUz0SheI-OcpVyfrZkkQRLNK03N8QdJZzeQkI/s1462/configurar+consentimento+de+cookies.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="734" data-original-width="1462" height="323" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1k81EApXiSab15e6ivRHnictnskFBj0rZL_TXpeVSFEiiZTpoLLjTtu2Jv5ntD5BsUbXOr0mQ2C_L10Nc-BXqSnxJVUZmt2KQ5LaTK_HUz0SheI-OcpVyfrZkkQRLNK03N8QdJZzeQkI/w640-h323/configurar+consentimento+de+cookies.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><p style="text-align: justify;"><span style="font-family: helvetica;">Uma dica importante é você criar sua página de Política e informar na customização. </span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIHBSLvh12S08EuzlP9Iw7rF_e4WAZ0wykwVFjsYgkO0VoQPYfF2cHR1Ie6X1hgS5vnxRZIegHRq6XMe2chX6yqKswRkZ6IkUsWe7p9-8WiZiAhilx0r5060bT9d7wL-UUOfVZ0H8OtE/s1431/configurar+url+politica+de+cookies.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="704" data-original-width="1431" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIHBSLvh12S08EuzlP9Iw7rF_e4WAZ0wykwVFjsYgkO0VoQPYfF2cHR1Ie6X1hgS5vnxRZIegHRq6XMe2chX6yqKswRkZ6IkUsWe7p9-8WiZiAhilx0r5060bT9d7wL-UUOfVZ0H8OtE/w640-h314/configurar+url+politica+de+cookies.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><p style="text-align: justify;"><span style="font-family: helvetica;">Já na próxima etapa é fornecido um código para ser inserido no seu website. Este deve ser colocado no na primeira linha do head do site Web Acappella</span></p><p></p><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7RcrCza6BC21ioNeXCAO_1Tf5hWfkPZzME3_nrgHrR3ii2oMRbCVSho3qSK9egw_8V-XW4MlNlFz5Ce4KSQGh9wFxfDhjzWg0Lc2F108AbWBpLfUu5SFMgpR24w5zVg-4BQOYFi53wwE/s1025/cookieyes+no+warc.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="443" data-original-width="1025" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7RcrCza6BC21ioNeXCAO_1Tf5hWfkPZzME3_nrgHrR3ii2oMRbCVSho3qSK9egw_8V-XW4MlNlFz5Ce4KSQGh9wFxfDhjzWg0Lc2F108AbWBpLfUu5SFMgpR24w5zVg-4BQOYFi53wwE/w640-h276/cookieyes+no+warc.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><p></p><p style="text-align: justify;"><span style="font-family: helvetica;">Após adicionar o código publique o site já com o código para continuar nas configurações do Cooke Yes.</span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Após clique em Verificar para a detecção que o banner está ativo.</span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIHDM51bHig4QsbA1fw86ag3I0zPfBhkNViQslqKpnxWrzn_O4TxUCpfnJhcstc9v3oaT0d741cmdQI82AYNCLm4sSf3lIy1ncysR5NviY7wxcQ3TnsPKcoxQC9qAr7mo_VwoI8hX_H8/s1099/consentimento+ativado.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="512" data-original-width="1099" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIHDM51bHig4QsbA1fw86ag3I0zPfBhkNViQslqKpnxWrzn_O4TxUCpfnJhcstc9v3oaT0d741cmdQI82AYNCLm4sSf3lIy1ncysR5NviY7wxcQ3TnsPKcoxQC9qAr7mo_VwoI8hX_H8/w640-h298/consentimento+ativado.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><p style="text-align: justify;"><span style="font-family: helvetica;">Com esse código adicionado além de aparecer o banner de consentimento, o próprio CookieYes escanei os cookies usados no seu site cada qual em sua categoria. E você tem todo o controle sobre editar, excluir ou alterar e até mesmo incluir novos cookies pelo painel da plataforma. </span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Portanto, observei que no site, nada das configurações que eu havia feito estavam salvas. Optei em iara para o Dashboard configurar tudo novamente. Lá após configurar tudo novamente passou a funcionar minhas configurações no site. </span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="font-family: helvetica;">Um detalhe importante, é que mesmo selecionando nas configurações o idioma Português Brasileiro, os textos explicativos de cada cookies continuaram em inglês. </span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5KqNck-OWTu3qr0mqTj9ljZArI9JsgEfhvx63vp-x3QX3Pdiha0jBFT-4IX12A482xc7fTQFpq4nCeOysRuwDFy9EwESpJVyeZxzWImWwtTqhfo6FMkfSMZOvTa7BUfgyE-8iUlLRVY/s881/texto+ingles.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="369" data-original-width="881" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5KqNck-OWTu3qr0mqTj9ljZArI9JsgEfhvx63vp-x3QX3Pdiha0jBFT-4IX12A482xc7fTQFpq4nCeOysRuwDFy9EwESpJVyeZxzWImWwtTqhfo6FMkfSMZOvTa7BUfgyE-8iUlLRVY/w640-h268/texto+ingles.jpg" width="640" /></span></a></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;">Então é necessário ir alterando o texto para português editando cada um via Dashboard.</span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HuY2egF6b_jyIuOqbM_b-B2F2iRwr4SNWSaez6nJQgq-U08-GaU6CDM8IGx01qNin6_q8FhfkKJpnREw4ekvwdhGakPune1t1VEhzZJCNhpEcEmWvN6Uo7r_vGJ0icHbOPvSKVu7_GI/s1386/editando+cookies.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="685" data-original-width="1386" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HuY2egF6b_jyIuOqbM_b-B2F2iRwr4SNWSaez6nJQgq-U08-GaU6CDM8IGx01qNin6_q8FhfkKJpnREw4ekvwdhGakPune1t1VEhzZJCNhpEcEmWvN6Uo7r_vGJ0icHbOPvSKVu7_GI/w640-h316/editando+cookies.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><div style="text-align: justify;"><span style="font-family: helvetica;">E visualizando pelas ferramentas de desenvolvedor do Google antes de qualquer aceitação, somente os cookies do Cookieyes (considerado como necessários) foram carregados.</span></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div></div><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgU8vgV9s-ouvBWX76EAW3p4uLROjYNV_l8QJ8S0__IPhvPkRjOn2oc-RdESjUf5UVidFjWsWJSvJQmebnJk4h0gUBABddIt4vQcP9TVdPE2Z7d62FBP8tspfUfOQY9YETpzY4FkocX4/s1092/ferramenta+desenvolvedor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="568" data-original-width="1092" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgU8vgV9s-ouvBWX76EAW3p4uLROjYNV_l8QJ8S0__IPhvPkRjOn2oc-RdESjUf5UVidFjWsWJSvJQmebnJk4h0gUBABddIt4vQcP9TVdPE2Z7d62FBP8tspfUfOQY9YETpzY4FkocX4/w640-h332/ferramenta+desenvolvedor.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;">O painel da CookieYes também oferece que você crie sua Política de cookies e Política de Privacidade disponibilizando o código HTML para ser adicionado ao website em suas respectivas páginas. Na página de Política de Cookies (pelo código HTML) o visitante do site dispões de opção onde poderá mudar seu consentimento a qualquer momento.</span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhINDIh-88_RMh5ryCo0zAxlx-I6bDBMTEqdW3yTKkXynFoEjrqbfnRHP676YT1qSmcj59WMKmYBJqFEVimO2xZB4jdMGxopWc5vFTfk-TWUsEFYliwXV6tMShYrAI96kYi2LqYYbEjF0A/s598/politicas.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="598" data-original-width="200" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhINDIh-88_RMh5ryCo0zAxlx-I6bDBMTEqdW3yTKkXynFoEjrqbfnRHP676YT1qSmcj59WMKmYBJqFEVimO2xZB4jdMGxopWc5vFTfk-TWUsEFYliwXV6tMShYrAI96kYi2LqYYbEjF0A/s320/politicas.jpg" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;">Outra coisa bem interessante é que no painel você tem o registro de logs com opção de exportar para CSV.</span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnKCYhE-kYtyfFnsrVgXg2sqng7fVOEoRztzkP_fePRZEhkLSLKX8X74DpPMtLqFhfM3McNR19FiLyC4l8xnGPAALWkMU4jhpUG4Q1c-mpwvoaLCGJVGZ7RNoM2IW1ygaMSDQad0XpNl8/s1469/log.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: helvetica;"><img border="0" data-original-height="569" data-original-width="1469" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnKCYhE-kYtyfFnsrVgXg2sqng7fVOEoRztzkP_fePRZEhkLSLKX8X74DpPMtLqFhfM3McNR19FiLyC4l8xnGPAALWkMU4jhpUG4Q1c-mpwvoaLCGJVGZ7RNoM2IW1ygaMSDQad0XpNl8/w640-h248/log.jpg" width="640" /></span></a></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><div style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></div><p style="text-align: justify;"><span style="font-family: helvetica;">Gostei muito do CookiYes, pois mesmo no plano gratuito consegui configurar as cores do banner de consentimento. O que em muitos outros com opção gratuita não é possível.</span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="font-family: helvetica;"> </span></p><p style="text-align: justify;"><span style="font-family: helvetica;"><br /></span></p><p style="text-align: justify;"><span style="background-color: white; color: #202122; font-family: sans-serif; font-size: 14px;"><br /></span></p>Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-22574704308636041512020-05-31T11:00:00.001-03:002020-05-31T11:04:09.999-03:00Inclusão de campos CPF e CNPJ no cadastro do cliente na loja Prestashop 1.6<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<img height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s640/PRESTASHOP+1.6.png" style="background: transparent; border: none; padding: 0px;" width="640" /></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
<div style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; font-family: "Open Sans"; font-size: 15px; margin-bottom: 20px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
O Prestashop é um dos sistema de E-Commerce de ponta para se ter uma loja virtual, mas nada é perfeito. Um dos ítens que o Prestashop pecou (pelo menos até a versão 1.6) foi a existência no cadastro do cliente do campo CPF e ou CNPJ. Uma vez que são informações necessárias para se emitir uma nota fiscal.<br />
<br />
Para solucionar esta questão vamos utilizar um módulo fornecido pela NeoGest disponível gratuitamente no site da empresa (informação até a data corrente).<br />
<br />
<a href="https://www.neogest.com.br/gratuito/modulo-fkcustomers-para-prestashop.html" target="_blank">Clique aqui </a> para acessar a página do módulo na Web.<br />
<br />
Após adquirir o módulo da NeoGest você receberá um link no e-mail informado para baixar o módulo.<br />
<br />
Baixe um módulo em um local no seu equipamento e vamos os passos para instalação.<br />
<br />
No painel administrativo da sua loja vá para <b>Módulos e Serviços</b> e <b>Módulos e Serviços </b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs42wT5NWgsWXccpiG38KCQoy7eb6mffmcl4GkA3ip9ELLD4jPkhbewvYOS133aLZNIP3VDeuY15y2DGui66ACA2uZOSj_rG7Y_QCvQ6CG8m6hMUMQyo9JeRM7BOXxK4jfqArJ7m6hwQw/s1600/incluindo-cpf-no-cadastro-cliente-prestashop-1.6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="186" data-original-width="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs42wT5NWgsWXccpiG38KCQoy7eb6mffmcl4GkA3ip9ELLD4jPkhbewvYOS133aLZNIP3VDeuY15y2DGui66ACA2uZOSj_rG7Y_QCvQ6CG8m6hMUMQyo9JeRM7BOXxK4jfqArJ7m6hwQw/s1600/incluindo-cpf-no-cadastro-cliente-prestashop-1.6.jpg" /></a></div>
<b><br /></b>
Na tela que carregará , no canto superior direito clique em <b>Adicionar novo módulo</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKWfIeYUjfzQRMU_2LzFDGprvZ7S9JENN9OQX-iz6v3_Et4yeJPbrllwkkKdkPTyHo4061_ggAxOzPZkEBxol5xtsmux1SqEdbNtx7TPDlVN1O7JtnKEyr3g97lLemhOm-5mKuKG0VcA/s1600/moduo+cpf+cnpj+prestashop+1.6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="91" data-original-width="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKWfIeYUjfzQRMU_2LzFDGprvZ7S9JENN9OQX-iz6v3_Et4yeJPbrllwkkKdkPTyHo4061_ggAxOzPZkEBxol5xtsmux1SqEdbNtx7TPDlVN1O7JtnKEyr3g97lLemhOm-5mKuKG0VcA/s1600/moduo+cpf+cnpj+prestashop+1.6.jpg" /></a></div>
Selecione o módulo onde baixou no seu equipamento clicando em <b>Escolha um arquivo</b> (vide imagem abaixo) e clique em <b>Enviar este módulo</b>.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjejwTaSXIa-N4jGd4DQYn6bsK1T0LaYR8pUOPldWnstmY64Mc53kgFcnnljoS2N75W0Zz6LKDH8WrNPI3jQCBlh2QAbEEvke3YXwXlolGlcA2sg-chAU4Sgv3aTDaKsQJXw8BkE5fGYFE/s1600/modulo+para+adicionar+cpf+e+cnpj+no+prestaashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="230" data-original-width="774" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjejwTaSXIa-N4jGd4DQYn6bsK1T0LaYR8pUOPldWnstmY64Mc53kgFcnnljoS2N75W0Zz6LKDH8WrNPI3jQCBlh2QAbEEvke3YXwXlolGlcA2sg-chAU4Sgv3aTDaKsQJXw8BkE5fGYFE/s640/modulo+para+adicionar+cpf+e+cnpj+no+prestaashop.jpg" width="640" /></a></div>
<br />
Aguarde a resposta que o módulo foi adicionado.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEMvZHzIxHnp_NeXNi0cHED-ucR-JCDLW-GzHt9ob0IoxOO9DbDod6U-ugnDPqoDMXt9T8z2KeZFsF-G670zLGduzNlS6xNSBoDVEYeol9-82O1dOaYv2VmRPLlykAZg0B0peOAMC8oEI/s1600/baixado+com+sucesso.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="163" data-original-width="1042" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEMvZHzIxHnp_NeXNi0cHED-ucR-JCDLW-GzHt9ob0IoxOO9DbDod6U-ugnDPqoDMXt9T8z2KeZFsF-G670zLGduzNlS6xNSBoDVEYeol9-82O1dOaYv2VmRPLlykAZg0B0peOAMC8oEI/s640/baixado+com+sucesso.jpg" width="640" /></a></div>
<br />
<br />
Caso sua loja utilize recebimento por cheque ou Depósito bancário, deve configurar primeiro o módulo Cheque e Transferência bancária antes de configurar este módulo<br />
<br />
<br />
Caso não prosseguimos com nossa explicação.<br />
<br />
Então na mesma página a qual teve o Aviso de instalação com sucesso na área onde se mostra o módulo clique em Instalar<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_u-Ic6YYZlTDtBXkGi1eFx-vH1tB2oKEqQdhcSxIhOZTtvyuFtdT-4KhPCnJDQ9VZq4YwbQRhwsIKCPsPGwxMCk0_1etJkJJyb0VZaeO-vV55TtiB_vum4LF7LRpThIZLN6rjGTH_8s/s1600/instalar+m%25C3%25B3dulo+cnpj+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="187" data-original-width="1027" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_u-Ic6YYZlTDtBXkGi1eFx-vH1tB2oKEqQdhcSxIhOZTtvyuFtdT-4KhPCnJDQ9VZq4YwbQRhwsIKCPsPGwxMCk0_1etJkJJyb0VZaeO-vV55TtiB_vum4LF7LRpThIZLN6rjGTH_8s/s640/instalar+m%25C3%25B3dulo+cnpj+prestashop.jpg" width="640" /></a></div>
<br />
<br />
Clique em prosseguir com a instalação<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYT5gTYj8zTMo_TRt4sgtMCYai_S24AU100GSa80xogL7jwWYEzcYi_HC-cyNQyrTcyv1vjLHzHXmIBh9ErggD2GjkkN4gc95BLUhO-nPdu4jaH7anRr4GjIFb9x8SlsA6b_aBxTEzgbY/s1600/prossiga.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="426" data-original-width="887" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYT5gTYj8zTMo_TRt4sgtMCYai_S24AU100GSa80xogL7jwWYEzcYi_HC-cyNQyrTcyv1vjLHzHXmIBh9ErggD2GjkkN4gc95BLUhO-nPdu4jaH7anRr4GjIFb9x8SlsA6b_aBxTEzgbY/s640/prossiga.jpg" width="640" /></a></div>
<br />
Após instalar configure os campos conforme sua necessidade e clique em SALVAR no fim da tela de configuração.<br />
<br />
Prontinho. Campos inclusos e agora o lojista tem a informação necessária para emissão de Nota Fiscal.</div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-51534430684336119922019-08-25T10:45:00.001-03:002019-08-25T10:45:12.928-03:00Google Analystics no Prestashop<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<img height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s640/PRESTASHOP+1.6.png" style="background: transparent; border: none; padding: 0px;" width="640" /></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "Trebuchet MS", sans-serif;"><br /></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
<div style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; font-family: "Open Sans"; font-size: 15px; margin-bottom: 20px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
O serviço do Google Analytics é gratuito no qual é possível gerar estatísticas de visitação de um site cadastrado. Ele foi criado como um auxilio aos webmasters para otimizar seus sites para campanhas de marketing. O Analytics é capaz de identificar, além da tradicional taxa de exibição e hit de uma página, a localização geográfica do visitante, como chegou no site (links de outros sites, buscador, propaganda ou diretamente pelo endereço), sistema operacional, navegador usado, resolução de tela, uso de plug-ins (como Java e Flash). Ele faz isso em períodos diários, semanais, mensais e anuais. Logo, o Google Analytics é uma ferramenta de monitoramento de tráfego mas também um poderoso auxílio para tomada de decisões em negócios relacionados à Internet.</div>
<div style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; font-family: "Open Sans"; font-size: 15px; margin-bottom: 20px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Logo, fazer uso do Google Analytics para analisar as visitas à sua loja e com isso planejar ações de marketing, descontos e promoções, pode ser uma ótima ideia. Para isto, siga os seguintes passos:</div>
<ul style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; font-family: "Open Sans"; font-size: 15px; list-style: none outside none; margin: 0px 0px 1.5em 30px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; box-sizing: border-box; list-style-type: disc; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Acesse sua conta no Google Analytics. Se você não tiver conta, use a sua conta no Google para acessar e ativar o serviço.</li>
<li style="background: transparent; border: 0px; box-sizing: border-box; list-style-type: disc; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Feito todo o processo, você terá um número de identificação de acompanhamento (o ID de acompanhamento), e você irá gerar, na aba <b style="background: transparent; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Código de acompanhamento</b>, um código iniciado em <b style="background: transparent; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">UA</b> para ser inserido no Prestashop.</li>
</ul>
<div style="text-align: justify;">
<span style="font-family: Open Sans;"><span style="font-size: 15px;">Vamos então inserir o código do Google Analytics em nossa loja Prestashop; verão como é muito simples:</span></span></div>
<div style="text-align: justify;">
<span style="font-family: Open Sans;"><span style="font-size: 15px;"><br /></span></span></div>
<div style="text-align: justify;">
<ul>
<li><span style="font-family: "Open Sans"; font-size: 15px;">Sugiro baixar o módulo Google Analystics v2.334 neste link: <a href="https://addons.prestashop.com/pt/analises-estatisticas/4168-ganalytics.html">https://addons.prestashop.com/pt/analises-estatisticas/4168-ganalytics.html</a></span></li>
<li><span style="font-family: "Open Sans"; font-size: 15px;">Acesse o painel administrativo da sua loja Prestashop</span></li>
<li><span style="font-family: Open Sans;"><span style="font-size: 15px;">No menu selecione as opçõs <b>MÓDULOS</b> >> <b>MÓDULOS E SERVIÇOS</b></span></span></li>
</ul>
</div>
<div style="text-align: justify;">
<span style="font-family: Open Sans;"><span style="font-size: 15px;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzVzzjC_DbjDAd-R_qP_qb2I3c0bPrSZ-x2NmLpLGvpRze-bnDCWsIcJqcocr_VZDIS9bjoNVBpO5X78TC5f-bAUKkAdIs25JEv5s4Rd9FlRaifw5GBVeelMgOauSr6FpugJmUeBXwQY/s1600/google-analystcs-no-prestashop-menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Google Analystcs no Prestashop" border="0" data-original-height="118" data-original-width="410" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzVzzjC_DbjDAd-R_qP_qb2I3c0bPrSZ-x2NmLpLGvpRze-bnDCWsIcJqcocr_VZDIS9bjoNVBpO5X78TC5f-bAUKkAdIs25JEv5s4Rd9FlRaifw5GBVeelMgOauSr6FpugJmUeBXwQY/s640/google-analystcs-no-prestashop-menu.jpg" title="Google Analystcs no Prestashop" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: justify;">
<ul>
<li><span style="font-family: "Open Sans"; font-size: 15px;">Na mesma tela , na barra de busca digite </span><span style="font-family: Open Sans;"><span style="font-size: 15px;"><b>google analytics </b>e na lista clique em Instalar conforme imagem abaixo</span></span></li>
</ul>
<div>
<span style="font-family: Open Sans;"><span style="font-size: 15px;"><b><br /></b></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUKQ54Ia3wODhME5jxeRhOnR1GSinzbdRwfER40_wxLyjXINTFNXEh0MdCbF8O89R5KKbj4Ucq1K386UCYcPNG_XK21JaYtXsmAvyVzPu6IHorn3P_pEUXjbyY96aOElDNuzPVREOwFk/s1600/Google-analystcs-api-prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="296" data-original-width="944" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUKQ54Ia3wODhME5jxeRhOnR1GSinzbdRwfER40_wxLyjXINTFNXEh0MdCbF8O89R5KKbj4Ucq1K386UCYcPNG_XK21JaYtXsmAvyVzPu6IHorn3P_pEUXjbyY96aOElDNuzPVREOwFk/s640/Google-analystcs-api-prestashop.jpg" width="640" /></a></div>
<div>
<span style="font-family: Open Sans;"><span style="font-size: 15px;"><b><br /></b></span></span></div>
</div>
<div style="text-align: justify;">
<ul>
<li><span style="font-family: Open Sans;"><span style="font-size: 15px;">Prossiga clicando em <b>Prosseguir com a instalação</b></span></span></li>
</ul>
<div>
<span style="font-family: Open Sans;"><span style="font-size: 15px;"><b><br /></b></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggm4dIlhxFAf3Ebl0mfMsX8Apm4OMr-Dq8XF-4mBl43MPEl08ntMuu_KKsLDioKqpkgc4zWwFbPXgOOwZyvg92SHs6yE3XqyQ_tn1BI83bDbI8Y-Nu8qniWl7AoO6J73VcjUwRPZGMy3U/s1600/prosseguir.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="432" data-original-width="894" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggm4dIlhxFAf3Ebl0mfMsX8Apm4OMr-Dq8XF-4mBl43MPEl08ntMuu_KKsLDioKqpkgc4zWwFbPXgOOwZyvg92SHs6yE3XqyQ_tn1BI83bDbI8Y-Nu8qniWl7AoO6J73VcjUwRPZGMy3U/s640/prosseguir.jpg" width="640" /></a></div>
<div>
<br /></div>
<ul>
<li><span style="font-family: Open Sans;"><span style="font-size: 15px;">Clique agora em Configurar para<b> Configurar </b></span></span></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GhyAG7maVqwnhS1-SpVBpkCEj8EcYVYtrgeCxECCHNtk7WMOc6P3qWT0j4axYZg5fGM4GrFyFH2hXHFJY6I0Rmrni-9U8Tv6qqUwHAUSfWfQUnW8AlRDv7pONH5zXiRnVj3JEmNZlWE/s1600/configurar+google+analystcs+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="939" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GhyAG7maVqwnhS1-SpVBpkCEj8EcYVYtrgeCxECCHNtk7WMOc6P3qWT0j4axYZg5fGM4GrFyFH2hXHFJY6I0Rmrni-9U8Tv6qqUwHAUSfWfQUnW8AlRDv7pONH5zXiRnVj3JEmNZlWE/s640/configurar+google+analystcs+prestashop.jpg" width="640" /></a></div>
<br />
<br />
<ul>
<li><span style="font-family: Open Sans;"><span style="font-size: 15px;">Informe seus dados e clique em Salvar</span></span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZA-C9GyEPteu_Q-VFcaW1idBJee6tExe2sQZ8Oi4d4ZV1O2AOEyzGvmIijl04kf4blxyOwgN2NpkiBXtrUOHeoH4V_gl5UQyPryfg87BrF-xLzmb07DxSRSYPmIudlfxn5CPTbLkJ6_E/s1600/id.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="271" data-original-width="962" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZA-C9GyEPteu_Q-VFcaW1idBJee6tExe2sQZ8Oi4d4ZV1O2AOEyzGvmIijl04kf4blxyOwgN2NpkiBXtrUOHeoH4V_gl5UQyPryfg87BrF-xLzmb07DxSRSYPmIudlfxn5CPTbLkJ6_E/s640/id.jpg" width="640" /></a></div>
<div>
<span style="font-family: Open Sans;"><span style="font-size: 15px;"><br /></span></span></div>
<div>
<span style="font-family: Open Sans;"><span style="font-size: 15px;"><br /></span></span></div>
<div>
<ul>
<li><span style="font-family: Open Sans;"><span style="font-size: 15px;">Se tudo ocorreu bem será mostrado a mensagem de sucesso.</span></span></li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_K46m8-zALaTTmLZpnoMHwS22HJgKvagWhi6L71LfhEDCz_6xSihjSKRY5HHRg36LAZC_6C0BWHpfHJRobx6mTXE4kDqEY3PglhunsQd-nAMt8-0fkCKGNxhgQiekLh8QzZpthgRygrY/s1600/sucesso.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="149" data-original-width="964" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_K46m8-zALaTTmLZpnoMHwS22HJgKvagWhi6L71LfhEDCz_6xSihjSKRY5HHRg36LAZC_6C0BWHpfHJRobx6mTXE4kDqEY3PglhunsQd-nAMt8-0fkCKGNxhgQiekLh8QzZpthgRygrY/s640/sucesso.jpg" width="640" /></a></div>
<div>
<span style="font-family: Open Sans;"><span style="font-size: 15px;"><br /></span></span></div>
<div>
<br /></div>
<div>
<span style="font-family: "Open Sans"; font-size: 15px;">Prontinho. Se lhe foi útil, deixe um comentário e compartilhe para ajudar o blog continuar no ar.</span></div>
</div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-33803990525242019322019-06-13T12:18:00.001-03:002019-06-13T12:18:46.873-03:00Definindo a ordem em que os produtos são mostrados na loja<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<img height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s640/PRESTASHOP+1.6.png" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; padding: 0px;" width="640" /></div>
<div style="text-align: justify;">
<span style="font-family: "Trebuchet MS", sans-serif;"><br /></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
Se você que mudar a ordem em que os produtos são mostrados na sua loja Prestashop antes é importante saber.<span style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"></span><br />
<br />
Na página principal em RECÉM CHEGADOS, é mostrado automaticamente a ordem dos últimos cadastrados na loja. Sendo a ordem é os últimos primeiro.<br />
<br />
Em POPULAR é mostrado na ordem sendo os primeiros os mais populares. Ou seja, mais visitados.<br />
<br />
Mas é possível você mudar a ordem que é mostrado quando o visitante clicar na categoria do produto.<br />
<br />
Para alterar essa configuração logue no painel administrativo da sua loja.<br />
<br />
Vá para as opções PREFERÊNCIAS > PRODUTOS<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBsozM74oLinQL_tsbWvPwVvcPS4fPvRAw0PpMfYwDWdMgQ80MJgOvxOKHqyZbueO4QErBs-SMBok1YhkbAQyjmAVqNzrZTRziYK6yVimZOUWlV22gSjY1tbb-qLrgwdz6LwB_UL7X5c/s1600/ordem+dos+produtos+na+loja+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="253" data-original-width="407" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBsozM74oLinQL_tsbWvPwVvcPS4fPvRAw0PpMfYwDWdMgQ80MJgOvxOKHqyZbueO4QErBs-SMBok1YhkbAQyjmAVqNzrZTRziYK6yVimZOUWlV22gSjY1tbb-qLrgwdz6LwB_UL7X5c/s320/ordem+dos+produtos+na+loja+prestashop.jpg" width="320" /></a></div>
<br />
<br />
Na tela que se abrir role a página até a área PAGINAÇÃO. Seleciona a ordem desejada conforme mostra na imagem abaixo e depois cliquem em salvar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi67BF_6SVEObNSE9ZAQqWFpXV88agfKtIbHL-9JxGeF-LJSwWyXjFGuo2cOlm-rdM2UkWYBS26D38VBZ_3teR9FEk1gZ3f-qtyRjwTQWZsKbKNW1nZHyrgzlfcEq5N9DgRX6L_c-bkfCs/s1600/ORDEM+de+produtos+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="320" data-original-width="1022" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi67BF_6SVEObNSE9ZAQqWFpXV88agfKtIbHL-9JxGeF-LJSwWyXjFGuo2cOlm-rdM2UkWYBS26D38VBZ_3teR9FEk1gZ3f-qtyRjwTQWZsKbKNW1nZHyrgzlfcEq5N9DgRX6L_c-bkfCs/s640/ORDEM+de+produtos+prestashop.jpg" width="640" /></a></div>
<br />
<br />
Prontinho.</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-71977735383891396652019-05-28T16:52:00.002-03:002019-05-28T16:52:24.899-03:00Colocando a loja Prestashop como catálogo<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="text-align: justify;">
<img height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s640/PRESTASHOP+1.6.png" style="background: rgb(255, 255, 255); border: none; font-family: Arial, Helvetica, sans-serif; padding: 0px;" width="640" /></div>
<span style="background-color: white;"><div style="text-align: justify;">
<span style="font-family: "Trebuchet MS", sans-serif;"><br /></span></div>
</span><div style="text-align: justify;">
<br /></div>
<br />
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;">Ter uma loja virtual exige também que seja preparada toda uma logística de seu funcionamento. Tais como, processo de embalagem, de postagem nos correios, de estoque e etc.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;">Porém durante este processo, não queremos perder a divulgação de nossos produtos. Então enquanto estamos preparando essa lojística e até mesmo completando o cadastros dos produtos no que se trata de informações de largura e peso para remessa.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;">Para isso temos a opção de ativar a loja como catálogo.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;">Veja como é simples:</span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;">Após logar no painel vá para PREFERÊNCIA > PRODUTOS</span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRw4EzDI5Swr05__gnNNfM7rU3LsQ0zNcfVCRppO137xsqAXBifnuuNrH9w3Ys3mEJJvbWJJQSwVgKMVy64-Y8mzti2LDnblVavCZFzCeFNeMERF5Bb5azP4-eZjKcCLKiW9cTsdD4Ae4/s1600/usar+prestashop+como+cat%25C3%25A1logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="410" data-original-width="404" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRw4EzDI5Swr05__gnNNfM7rU3LsQ0zNcfVCRppO137xsqAXBifnuuNrH9w3Ys3mEJJvbWJJQSwVgKMVy64-Y8mzti2LDnblVavCZFzCeFNeMERF5Bb5azP4-eZjKcCLKiW9cTsdD4Ae4/s320/usar+prestashop+como+cat%25C3%25A1logo.jpg" width="315" /></a></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;">Na tela que vai se abrir. Logo de início na área Produtos você ativa o Modo Catálogo</span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;">Salve e prontinho. </span></span></div>
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 12px;"><br /></span></span>
<div style="background: 0px 0px rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #666666; font-family: Raleway, Helvetica, Arial, Lucida, sans-serif; font-size: 16px; outline: 0px; padding: 0px 0px 1em; text-size-adjust: 100%; vertical-align: baseline;">
<br /></div>
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 12px;"><br /></span></span>
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 12px;"><br /></span></span></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-3767521301622979992019-05-15T00:48:00.001-03:002019-05-15T00:48:27.008-03:00Alterando a cor da barra de telefone tema padrão Prestashop<div dir="ltr" style="text-align: left;" trbidi="on">
<img height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s640/PRESTASHOP+1.6.png" width="640" /><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">A barra que estamos falando é a superior que conta e-mail e telefone. (Vide imagem abaixo) </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQVu4IXPqtY3HHPEXixV6WkJ4NwssdRH1toG1yTa9tCFfr7KKnTbRDrVCMEbqwL9FlV3UwAYfhm_iRbKCpENb7Mcrb_BTsr8pqX9r0NZLDGkMMi2oI21AsWv23xzCuySQv9TRcPcQB1w/s1600/alterar+cor+barra+telefone+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Trebuchet MS, sans-serif;"><img border="0" data-original-height="39" data-original-width="1183" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQVu4IXPqtY3HHPEXixV6WkJ4NwssdRH1toG1yTa9tCFfr7KKnTbRDrVCMEbqwL9FlV3UwAYfhm_iRbKCpENb7Mcrb_BTsr8pqX9r0NZLDGkMMi2oI21AsWv23xzCuySQv9TRcPcQB1w/s640/alterar+cor+barra+telefone+prestashop.jpg" width="640" /></span></a></div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">O método usado é bem simples e será necessário ter acesso aos arquivos na hospedagem onde está instalado a loja.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">1) Fazer um backup como garantia do arquivo global.css que fica dentro da pasta themes/css</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">2) Então é isso aí. este arquivo que vamos editar.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">Procure a classe header {</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">Provavelmente estará na linha 5745 e altere o código da cor pela desejada </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZmqkipBtwGSeWjL17X-WvJcQKVvW2r4iatZJF4qNiARCEIU-TRDtQlSy9XuffjMPI9efaLgWSk4LaRjdiLtGYs8HaufJeFMTUFPstsu6Lih6uGjfoVzFPoD9MrHpBNZHHzH91AqcUTE/s1600/codigo+cor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Trebuchet MS, sans-serif;"><img border="0" data-original-height="306" data-original-width="322" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZmqkipBtwGSeWjL17X-WvJcQKVvW2r4iatZJF4qNiARCEIU-TRDtQlSy9XuffjMPI9efaLgWSk4LaRjdiLtGYs8HaufJeFMTUFPstsu6Lih6uGjfoVzFPoD9MrHpBNZHHzH91AqcUTE/s320/codigo+cor.jpg" width="320" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<span style="font-family: Trebuchet MS, sans-serif;">Salve o arquivo alterado e prontinho. A cor do fundo da barra está alterado.</span><br />
<b><br /></b>
<b><br /></b>
<b><br /></b>
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-77343459561992972262019-04-18T18:23:00.003-03:002019-04-18T18:23:59.172-03:00PRESTASHOP 1.6 - Antispam no formulário de contato com reCAPTCHA<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s1600/PRESTASHOP+1.6.png" style="color: #3058aa; margin-left: 1em; margin-right: 1em; outline: none; text-decoration-line: none;"><img border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s640/PRESTASHOP+1.6.png" style="background: transparent; border: none; padding: 0px;" width="640" /></a></div>
<br style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" /><br style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" /><br />
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<span style="box-sizing: border-box; vertical-align: inherit;"><span style="box-sizing: border-box; vertical-align: inherit;">Um dos problemas mais frequentes é o envio massivo de mensagens de spam através do formulário de contato da loja online. Para evitar esta situação vamos</span><span style="box-sizing: border-box; vertical-align: inherit;"> </span></span><span style="box-sizing: border-box; font-weight: 700;">adicionar um captcha aos formulários da loja online</span><span style="box-sizing: border-box; vertical-align: inherit;"> .</span></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<span style="box-sizing: border-box; vertical-align: inherit;">Captcha</span><span style="box-sizing: border-box; vertical-align: inherit;"> é um acrônimo para </span><em style="box-sizing: border-box;"> Teste de Turing Público Completamente Automatizado para informar a Computers and Humans Apart</em><span style="box-sizing: border-box; vertical-align: inherit;"><span style="box-sizing: border-box; vertical-align: inherit;"> (teste de Turing totalmente automático e público para diferenciar computadores de humanos). </span><span style="box-sizing: border-box; vertical-align: inherit;">Uma </span></span><em style="box-sizing: border-box;">palavra</em><span style="box-sizing: border-box; vertical-align: inherit;"> muito longa que se refere ao teste que é usado para </span><span style="box-sizing: border-box; font-weight: 700;">impedir que programas de robô enviem milhões de mensagens de spam</span><span style="box-sizing: border-box; vertical-align: inherit;"> automaticamente e de forma invasiva.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<span style="box-sizing: border-box; vertical-align: inherit;"><br /></span></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<span style="box-sizing: border-box; vertical-align: inherit;">Então como vamos inserir em nosso formulário de contato de nossa loja?</span></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<span style="box-sizing: border-box; vertical-align: inherit;"></span></div>
<h2 data-fontsize="30" data-lineheight="36" style="background-color: white; box-sizing: border-box; line-height: 34.65px; margin: 1.8em 0px; padding-bottom: 0px;">
<span class="ez-toc-section" id="1_Instalar_el_modulo_gratuito_de_reCAPTCHA" style="box-sizing: border-box;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;">1) Baixe o módulo reCAPTCHA clicando <a href="https://webacappellashow.com.br/loja/home/21-prestashop-recaptcha.html" target="_blank">aqui</a><span style="color: #333333;">.</span></span></span></h2>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;"><b>2) Instalando o módulo</b></span></div>
<div>
<br /></div>
<div>
Logue na área administrativa e no menu principal vá até Módulos e Serviços > Módulo e serviços</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQAYjLa5xmqySpIzc6cir0Rck-8fjysxHpErWkUoBXbJBGXG9BkQUfL5jKbvamov6Cqj51BFnPvW8Ev0oOHILte_hv2Vj6Wsx-GPNySSWrWnxXpNF5zxqHdqKBdA9FY3gZUqc4BQJ8Fo/s1600/instalar+antispam+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="141" data-original-width="404" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQAYjLa5xmqySpIzc6cir0Rck-8fjysxHpErWkUoBXbJBGXG9BkQUfL5jKbvamov6Cqj51BFnPvW8Ev0oOHILte_hv2Vj6Wsx-GPNySSWrWnxXpNF5zxqHdqKBdA9FY3gZUqc4BQJ8Fo/s400/instalar+antispam+prestashop.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<br /></div>
<div>
<span class="ez-toc-section" style="box-sizing: border-box;"><span style="box-sizing: border-box; vertical-align: inherit;"></span></span><br />
<div>
<span class="ez-toc-section" style="box-sizing: border-box;"><span style="box-sizing: border-box; vertical-align: inherit;"><span style="box-sizing: border-box; vertical-align: inherit;">No topo superior esquerdo cliequ em em <b>Adicionar novo módulo </b>selecione o arquivo baixado e clique em<b> Enviar este módulo.</b></span></span></span></div>
<span class="ez-toc-section" style="box-sizing: border-box;"><span style="box-sizing: border-box; vertical-align: inherit;"><span style="box-sizing: border-box; vertical-align: inherit;"><div>
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHudW8RaYmzm5kz476KTcyhYjdQLOw7AQUiX1zIEUthnr5Amg0qmYTx6FU9X5vywepokWo3nj0iT5Rt5ty8C45NfVFgylsiM7CmtCSV6CFnfmzZWODJLJAbmAitCx6iGegl1cLj0uM4dI/s1600/antspam+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="129" data-original-width="319" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHudW8RaYmzm5kz476KTcyhYjdQLOw7AQUiX1zIEUthnr5Amg0qmYTx6FU9X5vywepokWo3nj0iT5Rt5ty8C45NfVFgylsiM7CmtCSV6CFnfmzZWODJLJAbmAitCx6iGegl1cLj0uM4dI/s400/antspam+prestashop.jpg" width="400" /></a></div>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yxrDi0uuQd8n9emVM_gXs1GbMQVGgonxlwSxMIHxNjqVRMjt0ALpV1oKLUQCHAG4Wlsq2aWPm8IYHbtSWzhsAJ4Rl6Q_wxN8wBeyVBIkiEiXj5mBsgF7hEz9RzAWS4_2Gqihf67FMRQ/s1600/modulo+captcha+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="prestashop recatpcha" border="0" data-original-height="228" data-original-width="707" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yxrDi0uuQd8n9emVM_gXs1GbMQVGgonxlwSxMIHxNjqVRMjt0ALpV1oKLUQCHAG4Wlsq2aWPm8IYHbtSWzhsAJ4Rl6Q_wxN8wBeyVBIkiEiXj5mBsgF7hEz9RzAWS4_2Gqihf67FMRQ/s400/modulo+captcha+prestashop.jpg" title="prestashop recatpcha" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
Caso ocorra tudo OK irá aparecer a mensagem de sucesso.</div>
<div>
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKC4eVACqmyFDMdbf70-RXuldHNoLjuEJfudNpaHlVBLrkA0hVhXAUA1h7zzWcd0cHktihV4JFfsVBgmIlVSqQ7hNuGcC3PwRSXLIRPS2lfDqLDk4F4Pdo_B2QfQsssUKac37VPCKSV9U/s1600/Screenshot_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="165" data-original-width="370" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKC4eVACqmyFDMdbf70-RXuldHNoLjuEJfudNpaHlVBLrkA0hVhXAUA1h7zzWcd0cHktihV4JFfsVBgmIlVSqQ7hNuGcC3PwRSXLIRPS2lfDqLDk4F4Pdo_B2QfQsssUKac37VPCKSV9U/s400/Screenshot_1.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;"><b>3 ) Ative o serviço reCATCHA do Google</b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #444444; font-family: "droid sans" , "arial" , "helvetica" , sans-serif; font-size: 17px;">Para adicionar o reCAPTCHA ao formulário de contato, é necessário acessar o serviço reCAPTCHA com nsua Conta do Google.</span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #444444; font-family: "droid sans" , "arial" , "helvetica" , sans-serif; font-size: 17px;"><br /></span></div>
<ol style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px;">
<li style="box-sizing: border-box;"><span style="box-sizing: border-box; vertical-align: inherit;"><span style="box-sizing: border-box; vertical-align: inherit;">Vá para </span></span><span style="box-sizing: border-box; color: #2a9b71; transition-duration: 0.2s; transition-timing-function: linear; vertical-align: inherit;"><span style="box-sizing: border-box; vertical-align: inherit;"><a href="https://www.google.com/recaptcha/intro/index.html" rel="noopener" style="box-sizing: border-box; color: #2a9b71; transition-duration: 0.2s; transition-timing-function: linear;" target="_blank">https://www.google.com/recaptcha/intro/index.html</a> e clique em </span></span></li>
<li style="box-sizing: border-box;"><span style="box-sizing: border-box; vertical-align: inherit;"><span style="box-sizing: border-box; vertical-align: inherit;">Clique em Admin console e registre um recaptcha para seu domínio de sua loja</span></span></li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiML-qjBEzSip6TUTTEoaOG2hiZAHnBF9SUlpw18A1PlQQg7e0ZY4AFEzwRIXbC1YM12HAdwPni7dab9BrJTgIBUZ8T6YyFE-W_v3GUIiPUz-GCkCBU5FI1U27n3hUNNhX7odlgbwpF0Nk/s1600/cadastro+recaptcha+google+webacappella+show.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="como inserir recaptcha no prestashop" border="0" data-original-height="759" data-original-width="653" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiML-qjBEzSip6TUTTEoaOG2hiZAHnBF9SUlpw18A1PlQQg7e0ZY4AFEzwRIXbC1YM12HAdwPni7dab9BrJTgIBUZ8T6YyFE-W_v3GUIiPUz-GCkCBU5FI1U27n3hUNNhX7odlgbwpF0Nk/s640/cadastro+recaptcha+google+webacappella+show.jpg" title="como inserir recaptcha no prestashop" width="550" /></a></div>
<div>
<span style="color: #444444; font-family: "droid sans" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 17px;"><br /></span></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #444444; font-family: "droid sans" , "arial" , "helvetica" , sans-serif; font-size: 17px;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #444444; font-family: "droid sans" , "arial" , "helvetica" , sans-serif; font-size: 17px;">Após enviado será gerado a CHAVE DO SITE e a CHAVE SECRETA. Salve estas informações em algum lugar pois vai precisar delas.</span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #444444; font-family: "droid sans" , "arial" , "helvetica" , sans-serif; font-size: 17px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl97B7xe0AH6ypN3Sp6m8NtHyHxqYJbfdeBoxgAlmsTsRFVk2A3DK9DbLQ3m-UbKlfdQ1lUvXp4O8nqXEbxMgR3PaEM1EK0r8DKRsKG1K92BFnNPUG0U4Lp4_trQepgF2q7WkiVp5lUUU/s1600/chave+google+recaptcha.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="chave recaptcha para prestashop" border="0" data-original-height="693" data-original-width="987" height="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl97B7xe0AH6ypN3Sp6m8NtHyHxqYJbfdeBoxgAlmsTsRFVk2A3DK9DbLQ3m-UbKlfdQ1lUvXp4O8nqXEbxMgR3PaEM1EK0r8DKRsKG1K92BFnNPUG0U4Lp4_trQepgF2q7WkiVp5lUUU/s640/chave+google+recaptcha.jpg" title="chave recaptcha para prestashop" width="640" /></a></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #444444;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;"><b><br /></b></span></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;"><b>4 ) Configurando o módulo reCAPTCHA</b></span></div>
<div>
<br /></div>
<div>
Voltando ao painel administrativo do Prestashop vá até Módulos e Serviços > Módulo e serviços</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQAYjLa5xmqySpIzc6cir0Rck-8fjysxHpErWkUoBXbJBGXG9BkQUfL5jKbvamov6Cqj51BFnPvW8Ev0oOHILte_hv2Vj6Wsx-GPNySSWrWnxXpNF5zxqHdqKBdA9FY3gZUqc4BQJ8Fo/s1600/instalar+antispam+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="módulo prestashop recaptcha" border="0" data-original-height="141" data-original-width="404" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQAYjLa5xmqySpIzc6cir0Rck-8fjysxHpErWkUoBXbJBGXG9BkQUfL5jKbvamov6Cqj51BFnPvW8Ev0oOHILte_hv2Vj6Wsx-GPNySSWrWnxXpNF5zxqHdqKBdA9FY3gZUqc4BQJ8Fo/s400/instalar+antispam+prestashop.jpg" title="módulo prestashop recaptcha" width="400" /></a></div>
<div>
<b><br /></b></div>
<div>
<br /></div>
<div>
Buque por "Ei captcha" e ao lado clique em Instalar</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoOMStde5MHHzKQPfchqEjhffYPMJnTdvv0PJAfWz4UKGHDdN5MvqBnYrXWN_R6zyQBwO9tFVSbRkaTpoDOCxZXtzCEWe2MJkuiPCCbPHb1GQ_K_j9sRoKh_uMOdlOiRwQXGo1bnGQcQ/s1600/instalar+captcha+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="instalando recaptcha no prestashop" border="0" data-original-height="180" data-original-width="964" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoOMStde5MHHzKQPfchqEjhffYPMJnTdvv0PJAfWz4UKGHDdN5MvqBnYrXWN_R6zyQBwO9tFVSbRkaTpoDOCxZXtzCEWe2MJkuiPCCbPHb1GQ_K_j9sRoKh_uMOdlOiRwQXGo1bnGQcQ/s640/instalar+captcha+prestashop.jpg" title="instalando recaptcha no prestashop" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
</span></span></span></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<span style="box-sizing: border-box; vertical-align: inherit;">Preencha os campos com as chaves geradas no Goggle Captcha e assinale as configurações como desejar. </span></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<span style="box-sizing: border-box; vertical-align: inherit;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BZIGpsfLwXwJAYOfiwNRewCNSXhL98Pq5UeTU7o-SVWk-jVtJBTkD0F4QaLy3seZR65wbY96rZrBfUyQKItdY0N5MezQJAPw80KFekto5NxbELOQNLeD-JmMcwSweiRPLBZayMQkL4A/s1600/configurando+captcha+no+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="configurando recaptcha no prestashop" border="0" data-original-height="744" data-original-width="970" height="490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BZIGpsfLwXwJAYOfiwNRewCNSXhL98Pq5UeTU7o-SVWk-jVtJBTkD0F4QaLy3seZR65wbY96rZrBfUyQKItdY0N5MezQJAPw80KFekto5NxbELOQNLeD-JmMcwSweiRPLBZayMQkL4A/s640/configurando+captcha+no+prestashop.jpg" title="configurando recaptcha no prestashop" width="640" /></a></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
Clique em Salvar</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
. </div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
Prontinho seu formulário de contato já tem o reCAPTCHA instalado.</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxpFAJ3lRpHaFXbtcXODGxi2kzvkl7kWk-roc_5BqHF3iQWF_DrJsuGEjfBpKDuuPrVdLcsaRck6T2VqZLwgM0OWX9b1dDT03zV56SHBr7d_dlfdMJ_uNu5CK6WZVaKD1RhAGT3Dzuj4/s1600/recpatcha+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="reCAPTCHA no prestashop" border="0" data-original-height="589" data-original-width="944" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxpFAJ3lRpHaFXbtcXODGxi2kzvkl7kWk-roc_5BqHF3iQWF_DrJsuGEjfBpKDuuPrVdLcsaRck6T2VqZLwgM0OWX9b1dDT03zV56SHBr7d_dlfdMJ_uNu5CK6WZVaKD1RhAGT3Dzuj4/s640/recpatcha+prestashop.jpg" title="reCAPTCHA no prestashop" width="640" /></a></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "Droid Sans", Arial, Helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
</div>
<div style="color: black; font-family: "Times New Roman"; font-size: medium;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #444444; font-family: "droid sans", arial, helvetica, sans-serif; font-size: 17px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 20px; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<div style="margin: 0px;">
Para ver online<span> </span><a href="https://webacappellashow.com.br/loja/contact-us" target="_blank">CLIQUE AQUI</a></div>
</div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "Droid Sans", Arial, Helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #444444; font-family: "Droid Sans", Arial, Helvetica, sans-serif; font-size: 17px; margin-bottom: 20px;">
<br /></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-41311872011128569182018-08-31T00:37:00.001-03:002018-08-31T00:37:36.196-03:00Rodapé fixo na base do site<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBz_PMhdcdeElUzGhPrTg7GgKGmY2FvThbBWNQ9k1UeLYTx0pmhAxQC0qIg_zDwEK864bCTa59WJQkYhMQhqRwViIla_9nqeNQAcGSForizfJi1bNCDEeqs5tA9cArgEzzCUfnWdSZEdI/s1600/rodape-fixo-no-sie-webacappella.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1180" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBz_PMhdcdeElUzGhPrTg7GgKGmY2FvThbBWNQ9k1UeLYTx0pmhAxQC0qIg_zDwEK864bCTa59WJQkYhMQhqRwViIla_9nqeNQAcGSForizfJi1bNCDEeqs5tA9cArgEzzCUfnWdSZEdI/s640/rodape-fixo-no-sie-webacappella.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">Códigos | Rodapé</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Atualizado em 30/08/2018</span></b></span></span></div>
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> <span style="color: orange;"> | WA 4</span></b></span></span><br />
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><span style="color: orange;"><br /></span></b></span></span>
Olá galera do bem!! Vamos postar hoje uma gambiarra que funciona..hehehe<br />
<br />
Hoje vou passar um truque que é muito útil para quem quer por "Um rodapé fixo na base do site.". Este rodapé fica fixo enquanto o site rola por baixo dele.<br />
<br />
<br />
Já vou falar um inconveniente que deve-se presta atenção:<br />
<br />
Não crie botões redirecionando para uma página na internet ou do próprio projeto, pois irá carregar dentro do rodapé; a não ser que defina para abri em uma nova guia.<br />
<br />
<br />
<br />
Mãos a obra:<br />
<br />
<b><span style="color: orange;">NO WEBACAPPELLA 4</span></b><br />
<br />
O primeiro passo é se criar uma "página" no Webacappella com a mesma largura usada nas outras páginas. Dê um nome para essa página de rodape por exemplo. No caso deste post estamos mostrando somente para a versão desketop do site. Para quem está usando o WA4 criando sites nas versões desktop, tablet e celular terá que criar a página rodapé para cada versão. (Para saber mais sobre várias versões do site usando WA4 <a href="https://webacappellashow.blogspot.com/2018/05/site-responsivo-x-versao-mobile-criando.html" target="_blank">clique aqui</a>)<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieeVq-Z2wddmeSpx20yxfbBcVbUg2wQNMmFXH8QNVWcRH370ePMdx3kPW28k2hpYDR40gLLxPwUtQQSJ2_twJ4KG8p8TxQHq1DZ9JsBtlTxfnjVQc1sVR-iTTeK1C-Dr0FAE9J8hdAyeo/s1600/rodap%25C3%25A9-fixo-no-site-webacappella-4-01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="632" data-original-width="548" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieeVq-Z2wddmeSpx20yxfbBcVbUg2wQNMmFXH8QNVWcRH370ePMdx3kPW28k2hpYDR40gLLxPwUtQQSJ2_twJ4KG8p8TxQHq1DZ9JsBtlTxfnjVQc1sVR-iTTeK1C-Dr0FAE9J8hdAyeo/s640/rodap%25C3%25A9-fixo-no-site-webacappella-4-01.jpg" width="553" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Lembre-se de usar a mesma largura das outras páginas do seu projeto. No caso do exemplo 1024px. e a altura desejada de acordo com o tamanho do rodapé. Caso seu rodapé for ter menos de 100px, não se preocupe, configure com 100px pois o WebAcappella 4 não permite que seja menor do que isso.<br />
Mas logo em frente vamos contornar esta situação.<br />
<br />
Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.<br />
<br />
No caso eu configure a cor preta de código #000000 no exemplo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtzqo6BNhKvJWm6glPDReBVmdXj1o5lq9U5fAiQ4Bair_BEIuOodxQoL3MCSLSf7bhlREux-88s0wqjcLBDzub3ydxttM8FXuA_9okD9vSaakv_nm3mFP_mgi6klCol2J1ZrhnexqZTeM/s1600/rodap%25C3%25A9-fixo-no-site-webacappella-4-02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="634" data-original-width="370" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtzqo6BNhKvJWm6glPDReBVmdXj1o5lq9U5fAiQ4Bair_BEIuOodxQoL3MCSLSf7bhlREux-88s0wqjcLBDzub3ydxttM8FXuA_9okD9vSaakv_nm3mFP_mgi6klCol2J1ZrhnexqZTeM/s640/rodap%25C3%25A9-fixo-no-site-webacappella-4-02.jpg" width="372" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOfRpJMpdjWpgjSvUbZriBm8CljRByf5I-0GSugPodJi_QyqhoHvBmvwQWNwdFLFVwPrqlqDRE91JSxECq93s_6qFyjMs01ui3sEtpBeyU7X28QBOwwnB-5LvDVpyCsAGIQUmtC_idXA/s1600/rodap%25C3%25A9-fixo-no-site-webacappella-4-04.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="632" data-original-width="368" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOfRpJMpdjWpgjSvUbZriBm8CljRByf5I-0GSugPodJi_QyqhoHvBmvwQWNwdFLFVwPrqlqDRE91JSxECq93s_6qFyjMs01ui3sEtpBeyU7X28QBOwwnB-5LvDVpyCsAGIQUmtC_idXA/s640/rodap%25C3%25A9-fixo-no-site-webacappella-4-04.jpg" width="372" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Agora preste atenção, se seu rodapé for ter a altura menor que 100px, Coloque uma marca na altura que você vai utilizar. Neste exemplo o meu rodapé vai ter 50px de altura. Veja na imagem abaixo como fiz a marcação:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ62lkCmCeTIWqFn7CQF0zHHSxXaZC0pMKsN3gf28Dvlng8TC2CbONPwiUXGD0rPq6gckHGuW4wJG4lhYsKUqm2PVqvGZXm4l3KjNqmsdBraxu5OXYnLzzf4afaXbYJlYDcuV91jccRHw/s1600/rodap%25C3%25A9-fixo-no-site-webacappella-4-05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="542" data-original-width="604" height="572" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ62lkCmCeTIWqFn7CQF0zHHSxXaZC0pMKsN3gf28Dvlng8TC2CbONPwiUXGD0rPq6gckHGuW4wJG4lhYsKUqm2PVqvGZXm4l3KjNqmsdBraxu5OXYnLzzf4afaXbYJlYDcuV91jccRHw/s640/rodap%25C3%25A9-fixo-no-site-webacappella-4-05.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Portanto se meu rodapé terá 50px de altura eu só vou trabalhar na parte superior da linha.<br />
<br />
Fiz um exemplo de como editei meu rodapé bem simples para terem uma ideia, veja abaixo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRvAQus7772-aV8JaGxYyyZPzdd-ERVD18zqTgrdHWfiJJ0gcW8EWSG4_sb7lb9ua8K83Id2YC0N4brkZNNHnJjZQeUf4jNQWuHAyjrlJWQbQWzZ0qCNWDc0ACTY5fVsMsZJX_9dxpJK8/s1600/rodap%25C3%25A9-fixo-no-site-webacappella-4-07.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="193" data-original-width="931" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRvAQus7772-aV8JaGxYyyZPzdd-ERVD18zqTgrdHWfiJJ0gcW8EWSG4_sb7lb9ua8K83Id2YC0N4brkZNNHnJjZQeUf4jNQWuHAyjrlJWQbQWzZ0qCNWDc0ACTY5fVsMsZJX_9dxpJK8/s640/rodap%25C3%25A9-fixo-no-site-webacappella-4-07.jpg" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.<br />
<br />
<body style="overflow-y: hidden;overflow-x: hidden;"><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPl_DVLOiPyvFPf8o81sWT_nSdRdQWYKdV6ki2oEYi_sExDTGUzbrjpUqmAifwqaPiHuFMOJIRCO7MkCSBXXvqhWUiZH7PltLaFVGTBFMBWuo7yqhyphenhyphenaumLypNxIIxbMntSW_Fw0U-xFrM/s1600/fundo+fixo+no+rodap%25C3%25A9+do+site.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="633" data-original-width="369" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPl_DVLOiPyvFPf8o81sWT_nSdRdQWYKdV6ki2oEYi_sExDTGUzbrjpUqmAifwqaPiHuFMOJIRCO7MkCSBXXvqhWUiZH7PltLaFVGTBFMBWuo7yqhyphenhyphenaumLypNxIIxbMntSW_Fw0U-xFrM/s640/fundo+fixo+no+rodap%25C3%25A9+do+site.jpg" width="372" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Clique em OK</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Agora vamos utilizar o seguinte código para configurar nosso rodapé. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<style type="text/css"><br />
<br />
#rodape /*rodapé do sistema */<br />
<br />
{<br />
<br />
<br />
<br />
background-color: <span style="color: red;">códigocor</span>;<br />
<br />
width:100%;<br />
<br />
text-align: center;<br />
<br />
position:fixed;<br />
<br />
bottom:0px;<br />
<br />
left:0px;<br />
<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<form id="form1" runat="server"><br />
<br />
<div id="rodape"><br />
<br />
<html><br />
<br />
<iframe src="<span style="color: red;">urlrodape</span>" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="<span style="color: red;">altura</span>" width="<span style="color: red;">largura</span>" allowfullscreen></iframe><br />
<br />
</html><br />
<br />
<br />
</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
Você vai alterar somente os trechos de vermelho no código da seguinte maneira:<br />
<br />
<span style="color: red;">códigocor</span> : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #000000<br />
<span style="color: red;">largura: </span>Utilize o mesmo valor que usou para largura da sua página rodapé. No caso do exemplo foi 1024<br />
<br />
<span style="color: red;">altura: </span>Agora você vai usar o valor que você deseja para altura do rodapé, NÃO é o valor configurado para altura da sua página no caso do seu rodapé for menor que 100px. No caso deste exemplo é 50px.<br />
<br />
<span style="color: red;">urlrodape: </span>Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)<br />
<br />
<br />
<b><span style="font-size: large;">O código do exemplo ficou assim:</span></b><br />
<br />
<br />
<style type="text/css"><br />
#rodape /*rodapé do sistema */<br />
{<br />
background-color: #000000;<br />
width:100%;<br />
text-align: center;<br />
position:fixed;<br />
bottom:0px;<br />
left:0px;<br />
}<br />
</style><br />
<form id="form1" runat="server"><br />
<div id="rodape"><br />
<html><br />
<iframe src="http://www.webacappellashow.com.br/wasevents/wa4/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="50px" width="100%" allowfullscreen></iframe><br />
</html><br />
</div><br />
<br />
<br />
Agora crie uma matriz, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF0uiDg12YFT5-2W3KWu7VvcAfepHIwHywgvf8S2yzvXPOD784xlsIh7VxEM8-9lKb3kIRCvJmsTuNX-Dv3RmvYeTtvFrOQNyJKs0-onihyQpjtHFnDHaiFXtzPvtqeh-6LU_Pg_qdZlE/s1600/rodap%25C3%25A9-fixo-no-site-webacappella-4-08.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="770" data-original-width="1076" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF0uiDg12YFT5-2W3KWu7VvcAfepHIwHywgvf8S2yzvXPOD784xlsIh7VxEM8-9lKb3kIRCvJmsTuNX-Dv3RmvYeTtvFrOQNyJKs0-onihyQpjtHFnDHaiFXtzPvtqeh-6LU_Pg_qdZlE/s640/rodap%25C3%25A9-fixo-no-site-webacappella-4-08.jpg" width="640" /></a></div>
<br />
Agora nas páginas que deseja utilizar o rodapé fixo basta ir nas propriedades e Escolher o rodapé que criou como matriz.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYY_60ls-3oNs1RHFaBcnPsg_S1xd7QnW_RTM0YOg6uOlWmwXjVuOZlpaLmywaxRInsU-RBJggn5nAL8dFo9Rje_apN2LP_dz3q21rI348AEm2tsfsR43QF6grb_y7SIhHZ8PmYIBJUk/s1600/escolherndo+rodape.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="804" data-original-width="1052" height="488" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYY_60ls-3oNs1RHFaBcnPsg_S1xd7QnW_RTM0YOg6uOlWmwXjVuOZlpaLmywaxRInsU-RBJggn5nAL8dFo9Rje_apN2LP_dz3q21rI348AEm2tsfsR43QF6grb_y7SIhHZ8PmYIBJUk/s640/escolherndo+rodape.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
Clique abaixo para ver um exemplo on line:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.webacappellashow.com.br/wasevents/wa4//site-exemplo-wasevents-d.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUJMlLbGRjCSvRofKmsG-cCIFVXaQZFlILpIwdIHqtQMYaOQJ_C5UWg3JQHdQ2x24svWaZYWXLcXENPSYptu-j-sSCR0Hjdv50CEjnuZpBqq91L2FnuKUB_lLNk2HuRTVQ4hv2TUl9ZU/s1600/ver+demo.png" /></a></div>
<br />
<br />
<br />
<b><span style="color: orange;">NO WEBACAPPELLA RC (WA5 - RESPONSIVE)</span></b><br />
<br />
O primeiro passo é se criar uma "página" no Webacappella . Dê um nome para essa página de rodape por exemplo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgntAvcqIAWU8hyphenhyphenziPcdjfk1iIZ2jty2JhihtCs1pE9iD5zopdR9aWgzL4z8McUpP0KwEwrzio2ueJJb3fG3XUqN291FTIMD_DjDt8TNogYDPeii008Krb2IAsLKXPyl2wTiFmSunIiLMA/s1600/warc-rodap%25C3%25A9+fixo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="389" data-original-width="265" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgntAvcqIAWU8hyphenhyphenziPcdjfk1iIZ2jty2JhihtCs1pE9iD5zopdR9aWgzL4z8McUpP0KwEwrzio2ueJJb3fG3XUqN291FTIMD_DjDt8TNogYDPeii008Krb2IAsLKXPyl2wTiFmSunIiLMA/s400/warc-rodap%25C3%25A9+fixo.jpg" width="271" /></a></div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.<br />
<br />
No caso eu configure a cor preta de código #000000 no exemplo.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKuoHrgoD3sN0dqX3q4JXBURwwsny9n8cq4LFoMSC8cLB0ODauiqF2KlCVc9ZReUhyphenhyphenKZ6A89BWClCcsuh6J4t8mqfK7pvKk0kJ55mlD9MLtHGPHc__gx0akrgsyfxDZJbleAldT_05Qgk/s1600/warc-rodap%25C3%25A9+fixo-01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="643" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKuoHrgoD3sN0dqX3q4JXBURwwsny9n8cq4LFoMSC8cLB0ODauiqF2KlCVc9ZReUhyphenhyphenKZ6A89BWClCcsuh6J4t8mqfK7pvKk0kJ55mlD9MLtHGPHc__gx0akrgsyfxDZJbleAldT_05Qgk/s640/warc-rodap%25C3%25A9+fixo-01.jpg" width="456" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT__ewEGew9fAJQEhg0FsMQbd7YfZ8ZDlitkSaY8DR2bWIsCi7YCjwmKNBRlbLOjKeM3b5Xm0FI5pu8E7Rrh8SQi9bJE88YBc-57yRJRjx2VLGbqeGb7cuYcB5S5x4xvnPWnTQkb2eWYE/s1600/warc-rodap%25C3%25A9+fixo-02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="893" data-original-width="660" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT__ewEGew9fAJQEhg0FsMQbd7YfZ8ZDlitkSaY8DR2bWIsCi7YCjwmKNBRlbLOjKeM3b5Xm0FI5pu8E7Rrh8SQi9bJE88YBc-57yRJRjx2VLGbqeGb7cuYcB5S5x4xvnPWnTQkb2eWYE/s640/warc-rodap%25C3%25A9+fixo-02.jpg" width="472" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.<br />
<br />
<body style="overflow-y: hidden;overflow-x: hidden;"><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUg_RftOCmaP2shG-gNBYpN-0wldvTVxTvk9P1GaOnyabXKEwfc1wRXA2m3tfNPVDdKBwktdASzTnF_9-CGk8ALngSnOI0IgTIoASbnfV-U5RCj3y-088eUnDvKqEvd5S58yESYSZhq4/s1600/warc-rodap%25C3%25A9+fixo-03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="849" data-original-width="727" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUg_RftOCmaP2shG-gNBYpN-0wldvTVxTvk9P1GaOnyabXKEwfc1wRXA2m3tfNPVDdKBwktdASzTnF_9-CGk8ALngSnOI0IgTIoASbnfV-U5RCj3y-088eUnDvKqEvd5S58yESYSZhq4/s640/warc-rodap%25C3%25A9+fixo-03.jpg" width="548" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;">Agora vamos utilizar o seguinte código para configurar nosso rodapé. </span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<style type="text/css"><br />
#rodape /*rodapé do sistema */<br />
<br />
{<br />
background-color: <span style="color: red;">códigocor</span>;<br />
width:100%;<br />
text-align: center;<br />
position:fixed;<br />
bottom:0px;<br />
left:0px;<br />
}<br />
</style><br />
<form id="form1" runat="server"><br />
<div id="rodape"><br />
<html><br />
<iframe src="<span style="color: red;">urlrodape</span>" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="<span style="color: red;">altura"</span> width="100%" allowfullscreen></iframe><br />
</html><br />
</div><br />
<br />
<br />
<br />
Você vai alterar somente os trechos de vermelho no código da seguinte maneira:<br />
<br />
<span style="color: red;">códigocor</span> : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #000000<br />
<br />
<br />
<span style="color: red;">altura: </span>Agora você vai usar o valor que você deseja para altura do rodapé, Já no WARC você terá que ir ajustando o valor da altura ao publicar o site. Tipo, você ajusta, publica e ve se ficou bom, e assim por diante.<br />
<br />
<span style="color: red;">urlrodape: </span>Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)<br />
<br />
<br />
<br />
<br />
<br />
<b><span style="font-size: large;">O código do exemplo ficou assim:</span></b><br />
<br />
<br />
<style type="text/css"><br />
#rodape /*rodapé do sistema */<br />
{<br />
background-color: #000000;<br />
width:100%;<br />
text-align: center;<br />
position:fixed;<br />
bottom:0px;<br />
left:0px;<br />
}<br />
</style><br />
<form id="form1" runat="server"><br />
<div id="rodape"><br />
<html><br />
<iframe src="http://www.webacappellashow.com.br/wasevents/warc/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" height="50" width="100%" allowfullscreen></iframe><br />
</html><br />
</div><br />
<br />
<br />
Agora crie uma subpage, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEPG1OKcM-K8_foHJ8EEjAWq-QNSXLNqo_T7Z01tmPkiMjeUuBnshXKInd5tpCPMtGDOnhyphenhyphenOEkx6W08pjuTLSTczTdSS2R_ih6frvLhHIDFlh8Vdwuymh_DbwbPPKv_tAtPot-8kFnSZ4/s1600/warc-rodap%25C3%25A9+fixo-04.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="393" data-original-width="1487" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEPG1OKcM-K8_foHJ8EEjAWq-QNSXLNqo_T7Z01tmPkiMjeUuBnshXKInd5tpCPMtGDOnhyphenhyphenOEkx6W08pjuTLSTczTdSS2R_ih6frvLhHIDFlh8Vdwuymh_DbwbPPKv_tAtPot-8kFnSZ4/s640/warc-rodap%25C3%25A9+fixo-04.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Agora nas páginas que deseja utilizar o rodapé fixo basta inserir um box no fim da página e adicionar uma subpage que obviamente será a que você fez para o rodapé.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDTtUJeqt3A3ExXmDA8TwAREvQPwA4pZNTkxJtv5J2kqDhEhEZgV3Vp6QhcVxLpIUkkhareAH465paGIrC6DAbAxKCcuQuXZr0reyodlLFHhIewml0GHXETszEg-q16835V_dk16yYoE/s1600/warc-rodap%25C3%25A9+fixo-05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="867" data-original-width="1221" height="454" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDTtUJeqt3A3ExXmDA8TwAREvQPwA4pZNTkxJtv5J2kqDhEhEZgV3Vp6QhcVxLpIUkkhareAH465paGIrC6DAbAxKCcuQuXZr0reyodlLFHhIewml0GHXETszEg-q16835V_dk16yYoE/s640/warc-rodap%25C3%25A9+fixo-05.jpg" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Maravilha. agora só publicar.<br />
<br />
<br />
Clique abaixo para ver um exemplo on line:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://webacappellashow.com.br/wasevents/warc/index.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUJMlLbGRjCSvRofKmsG-cCIFVXaQZFlILpIwdIHqtQMYaOQJ_C5UWg3JQHdQ2x24svWaZYWXLcXENPSYptu-j-sSCR0Hjdv50CEjnuZpBqq91L2FnuKUB_lLNk2HuRTVQ4hv2TUl9ZU/s1600/ver+demo.png" /></a></div>
<br />
<br />
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-34587896358520528622018-06-11T23:10:00.000-03:002018-06-11T02:37:27.462-03:0003 - Criando a página provisória usando o Módulo Páginas/Conteúdo do M7admin<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwN9bKNXxU-uybtWCG-6ndgaSO0_cxpFUjDhoTy5r4z2VxcNr-JhumOTKofxTonp1ooJogTgKlHRruCgTuoodls6xm4ROBa29nBXZ90Sq2gOxpb5Dh8kkeFm0dzOqOFUH0k3uaUbCzvIk/s1600/03+-+CRIANDO+PAGINA+PROVISORIA.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwN9bKNXxU-uybtWCG-6ndgaSO0_cxpFUjDhoTy5r4z2VxcNr-JhumOTKofxTonp1ooJogTgKlHRruCgTuoodls6xm4ROBa29nBXZ90Sq2gOxpb5Dh8kkeFm0dzOqOFUH0k3uaUbCzvIk/s640/03+-+CRIANDO+PAGINA+PROVISORIA.png" width="640" /></a></div>
<br />
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: </b></span></span><span style="font-size: 13px; text-align: left;"><b><span style="color: orange;">Criando um site com M7admin com WA 4 e WA RC</span></b></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> | </b></span></span><b style="font-family: "open sans", arial, sans-serif; font-size: 13px;"><span style="color: orange;">WA 4</span></b></div>
<br />
<br />
Fala galera, beleza pura sem mistura?<br />
<br />
Pois então, como comentado iremos criar um site utilizando o M7Admin e o Webacappella. Serão duas versões do mesmo site. Uma usando o Wa4 e o outro usando o Wa Rc. E como prometido estaremos também passando algumas coisinhas que já foram postadas aqui no Blog.<br />
<br />
Esta página provisória, sera´uma página dizendo que o website está em construção. Pois uma coisa que não é muito agradável é por o site no ar enquanto o mesmo está em desenvolvimento; ou seja, ainda inacabado.<br />
<br />
Eu por exemplo, enquanto vou desenvolvendo o website mantenho o index como página provisória. Assim, quando finalizado eu só mudo no Webacappella qual será a página principal.<br />
<br />
Na página principal vamos utilizar também alguns recursos já postados aqui no blog que são:<br />
<br />
<br />
<b>1) Botão Google + Share:</b> Um botão para compartilhamento no Google +<br />
Link do post em nosso Blog: <a href="https://webacappellashow.blogspot.com.br/2017/09/gogle-botao-share-botao-para.html">https://webacappellashow.blogspot.com.br/2017/09/gogle-botao-share-botao-para.html</a><br />
<br />
<b>2) Botão Facebook Share:</b> Um botão para compartilhamento no Facebook<br />
Link do post em nosso Blog: <a href="https://webacappellashow.blogspot.com.br/2016/08/inserindo-um-botao-compartilhar-no.html" target="_blank">https://webacappellashow.blogspot.com.br/2016/08/inserindo-um-botao-compartilhar-no.html</a><br />
<br />
<b>3) Código de redirecionamento:</b> Gosto muito de no período do site em construção que após alguns segundo seja direcionado para a Fanpage do Cliente. Desta forma já ajudo na divulgação.<br />
Link do post em nosso Blog: <span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><a href="https://webacappellashow.blogspot.com/2015/06/dica-para-colocar-na-primeira-pagina.html">https://webacappellashow.blogspot.com/2015/06/dica-para-colocar-na-primeira-pagina.html</a></span><br />
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<br />
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><b style="color: black; font-family: "Times New Roman"; font-size: medium;">4) Criando o site no Wa4 com versões mobile atendendo as exigências do Google: </b></span> Nesta postagem é mostrado como criar o site pelo WA4 com vesões mobile para que passe nos testes do Google e não seja penalizado:<br />
Link do post em nosso Blog: <a href="https://webacappellashow.blogspot.com/2018/05/site-responsivo-x-versao-mobile-criando.html">https://webacappellashow.blogspot.com/2018/05/site-responsivo-x-versao-mobile-criando.html</a><br />
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span><span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="color: black; font-family: "times new roman"; font-size: small;">Os links acima disponibilizei, pois nos vídeos abaixo, para que não ficassem muito extensos eu já deixei pronto em um arquivo txt os códigos a serem utilizados no site exemplo. Mas caso vocês queiram informações sobre os mesmos só clicar no link acima no que os interessa.</span></span><br />
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="color: black; font-family: "times new roman"; font-size: small;"><br /></span></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="color: black; font-family: "times new roman"; font-size: small;">Coloquei os vídeos em separados para sermos mais objetivos. </span></span><br />
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="color: black; font-family: "times new roman"; font-size: small;"><br /></span></span><span style="font-family: "times new roman";"><b style="background-color: white;">Atualização do M7admin paraversão 3.7</b></span><br />
<span style="background-color: white; font-family: "times new roman";"><br /></span>
<span style="color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="background-color: white; color: black; font-family: "times new roman"; font-size: small;">No vídeo abaixo antes de irmos direto para o projeto exemplo falo da fantástica atualização que houve no M7admin onde forma inclusos várias novidades tanto na forma de atualização dos módulos quanto também novidades no que se trata em animações no website. Ou seja, agora você poderá ativar animações em módulos que refletiram em um visual muito melhor no site desenvolvido.</span></span><br />
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="color: black; font-family: "times new roman"; font-size: small;"><br /></span></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="color: black; font-family: "times new roman"; font-size: small;"><br /></span></span><span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="color: black; font-family: "times new roman"; font-size: small;">-</span></span>
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/BDUv4N3aqAY" width="560"></iframe>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><span style="color: black; font-family: "times new roman"; font-size: small;"><br /></span></span>
<span style="background-color: #edf4ff;"><br /></span>
<span style="background-color: #edf4ff;"><br /></span><br />
<span style="font-family: "times new roman";"><span style="background-color: white;"><b>Criando a página provisório do site em construção feita no WA RC usando o módulo Página/Conteúdo do M7Admin.</b></span></span><br />
<br />
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/8m8riu5qoIw" width="560"></iframe>
<span style="font-family: "times new roman";"><span style="background-color: white;"><b><br /></b></span></span>
<span style="font-family: "times new roman";"><span style="background-color: white;"><b><br /></b></span></span>
<span style="font-family: "times new roman";"><span style="background-color: white;"><b><br /></b></span></span>
<span style="font-family: "times new roman";"><span style="background-color: white;"><b><br /></b></span></span>
<span style="font-family: "times new roman";"><span style="background-color: white;"><b><br /></b></span></span>
<span style="font-family: "times new roman";"><span style="background-color: white;"><b>Criando a página provisório do site em construção feita no WA 4 usando o módulo Página/Conteúdo do M7Admin.</b></span></span><br />
<br />
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/jCX840-RvrU" width="560"></iframe>
<span style="font-family: "times new roman";"><span style="background-color: white;"><b><br /></b></span></span>
<span style="font-family: "times new roman";"><span style="background-color: white;"><b><br /></b></span></span>
<br />
<span style="background-color: white; font-family: "times new roman";"><br /></span>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /><span style="background-color: orange;"><span style="color: red;"><b>Para acompanhar o projeto do site exemplo WASEVENTS on line <a href="http://www.webacappellashow.com.br/wasevents/" target="_blank">clique aqui</a></b></span></span></span><br />
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span><br />
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<span style="background-color: #edf4ff; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-30635915188463559722018-05-15T04:20:00.000-03:002018-05-21T22:15:46.968-03:00Site Responsivo x Versão Mobile | Criando versão Mobile no WA4 sem necessidade de largura de 1000px<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zbNZFE3IP9VFcWXkESzIDzcd4WdTxzMZ0VfDqL_Gr9rnqIpsKQLOkrd0tZ87MRSnei6b5vPsOEZiSarKMZSODdYWkKN7SGONzeiQ9KukOOz6n9XRi5YnCxrMAeCjAI7uDIovP8TRX7k/s1600/VERSOES+MOBILE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="site para celular no webacappella 4 " border="0" data-original-height="628" data-original-width="1200" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zbNZFE3IP9VFcWXkESzIDzcd4WdTxzMZ0VfDqL_Gr9rnqIpsKQLOkrd0tZ87MRSnei6b5vPsOEZiSarKMZSODdYWkKN7SGONzeiQ9KukOOz6n9XRi5YnCxrMAeCjAI7uDIovP8TRX7k/s640/VERSOES+MOBILE.png" title="versão mobile webacappella 4" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; line-height: 20px;"><span style="font-size: 13px;"><b>TEMA: </b></span></span><span style="background-color: transparent; font-size: 13px; line-height: 20px; text-align: left;"><span style="color: orange; font-family: "open sans" , "arial" , sans-serif;"><b>Site Responsivo x Versão Mobile</b></span></span></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Revisado e melhorado </span><span style="color: red;">(esta postagem sofreu nova atualização em 15/05/2018)</span></b></span></span></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>VERSÃO: <span style="color: orange;">WEBACAPPELLA</span></b></span></span><b style="font-family: "open sans", arial, sans-serif; font-size: 13px;"><span style="color: orange;"> 4</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Olá galera, beleza?</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Lembram do que já falei sobre a forma de se olhar para a xícara? Que a xícara tem uma alça só, e dependendo do ângulo que se olha pra ela, verá a mesma xícara porém de formas diferentes?</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Resumindo: " Veja tudo com vários pontos de vistas"</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Quando o Google começou com suas penalidades para sites não compatíveis para dispositivos móveis todos começaram (mais do que certo) a procurar alternativas.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
No Webacappella então a alternativa seria criar outro projeto para a versão mobile.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então surgiram artigos com configurações para o htacces para direcionar para a versão mobile, surgiram explicações sobre quais formatações deveriam ser usadas no projeto mobile, enfim..</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Eu, como disse, gosto de analisar as situações em vários pontos de vistas, ver as prioridades, não concentrar no problema e sim na solução.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Como havia acompanhado e percebido que os sites dos meus clientes que não tinham a versão mobile começaram a perder visitação de uma forma considerável me senti na obrigação de executar uma estratégia imediata. Para compartilhar com todos criei o seguinte artigo: Clique <a href="https://webacappellashow.blogspot.com.br/2015/09/site-responsivo-x-versao-mobile-sair-da-penalidade.html" target="_blank">aqui</a> e veja o artigo mais detalhado sobre isso.</div>
<h3 class="post-title entry-title" itemprop="name" style="background-color: white; font-family: oswald; font-size: 24px; font-stretch: normal; margin: 0.75em 0px 0px; position: relative; text-align: justify;">
Site Responsivo x Versão Mobile | PRIORIDADE 1 > Sair da Penalidade do Google</h3>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://webacappellashow.blogspot.com.br/2015/09/site-responsivo-x-versao-mobile-sair-da-penalidade.html" target="_blank"> Clique aqui</a> e veja o artigo .</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Neste artigo eu criei um código simples de redirecionamento para versão desktop e mobile e informei também as dimensões que o blog oficial do Webacappella informa para se criar a versão Mobile.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mas na prática eu senti um grande desconforto de criar um site com dimensões enormes. Era muito ruim, e eu sempre tinha dúvidas como ficaria no celular ou outro dispositivo móvel que seja.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Daí verificando nas ferramentas do Google, percebi que criar o site nessas dimensões sugeridas não era a melhor opção. Como eu já disse a intenção do Google é fornecer a melhor experiência para seu usuário. Então mesmo o site passando pelo teste mobile do Google, outros fatores vão colaborar para que sua posição seja melhor no ranqueamento. Tais como velocidade do carregamento do site entre outras.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Entre estas outras está a meta tag Viewport a qual me chamou atenção e foi a primeira solução para alguns problemas.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Possa ser que crie um artigo exclusivo sobre o Viewport, mas hoje vou mostrar bem simplificado como utilizá-lo, o motivo e a vantagem.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para quem entrasse no site do WebacappellaShow pelo celular via a seguinte tela:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbnAiKIwxUG1eU_qujKeIk9aDLLWhhh5M6BfcxZEFiXkEMpyjVMCV749srCL6jXIkmoniBCN9qCXOUWFEAuq1o5l6tRsmVRNwTBSULHJdQcoHIzXVgwUfKe348mt59jEWoAx0b7yvAS4/s1600/tela_mobile_webacappellashow.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbnAiKIwxUG1eU_qujKeIk9aDLLWhhh5M6BfcxZEFiXkEMpyjVMCV749srCL6jXIkmoniBCN9qCXOUWFEAuq1o5l6tRsmVRNwTBSULHJdQcoHIzXVgwUfKe348mt59jEWoAx0b7yvAS4/s320/tela_mobile_webacappellashow.JPG" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Esta foi feita usando as dimensões sugeridas no blog oficial do WebAcappella.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Apesar de depois de ter a prioridade de sair da penalidade como falado no outro artigo (link informado acima). Mesmo passando no teste do Google, os ajustes não teriam terminado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Meu próximo passo era testar a experiência do usuário. Para isso utilizei a seguinte ferramenta do Google: </div>
<div style="text-align: justify;">
Link : <a href="https://developers.google.com/speed/pagespeed/insights/">https://developers.google.com/speed/pagespeed/insights/</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Preste atenção ao destaque em vermelho na imagem abaixo:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_OW4TaBX0vhRgdLhHxiIFLJ7tQ3PAX6_XV9Mh_XxhviCrka7F2-R6vYvWWzc2RW9JjNr7sMxohwUCmOURJiBVgu8_vTitPINh1msUadOBqf66Da8JFEGNmr56gORfg8xupGxfmYbkkg/s1600/04.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_OW4TaBX0vhRgdLhHxiIFLJ7tQ3PAX6_XV9Mh_XxhviCrka7F2-R6vYvWWzc2RW9JjNr7sMxohwUCmOURJiBVgu8_vTitPINh1msUadOBqf66Da8JFEGNmr56gORfg8xupGxfmYbkkg/s640/04.JPG" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Repare que para a satisfação total do Google muitas coisas ainda devem ser feitas no meu projeto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mas me chamou a atenção em "<span style="background-color: yellow;">Configure o Visor</span>"</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Clicando em detalhes:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkiHbpjXX1_y3rq9T_4cAtgNNJv4pVEZr_-lvB77HUdwtEPS9nk4pDDdyjN62QrSfPHzsHkY54kxMQtKXBaQ-uku3FvEvxOsy-xKwSYTyhdbQwkt7NWWotcLn4fLvAdmTEngulA9owCN0/s1600/05.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkiHbpjXX1_y3rq9T_4cAtgNNJv4pVEZr_-lvB77HUdwtEPS9nk4pDDdyjN62QrSfPHzsHkY54kxMQtKXBaQ-uku3FvEvxOsy-xKwSYTyhdbQwkt7NWWotcLn4fLvAdmTEngulA9owCN0/s640/05.JPG" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Daí de cara percebi.. Falta o Viewport</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Neste momento pensei. "Caramba!! eu aqui que nem bobo fazendo sites versão mobile com dimensões gigantescas " Que até mesmo ficaria até pesado para celular.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então pensei, qual seria a dimensão boa para trabalhar com o projeto mobile. Então, no meu achar, (você pode achar que outra dimensão te atenda melhor) resolvi usar a largura 440 px.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então eu que estava trabalhando no Webacappella assim:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitW6CsP1nS9t8tlmE4uaw7o73V63kfKXxgV-hlchGZkpO1GXGQkzR7YpBvVp64X7A2tXe6qG1GXC9Kj9slU6gNPuL6ak6QHw7adNyht7UBlsxZ5UESqvTwS9w4EyHmSiLMjrzQF-z2O40/s1600/06.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitW6CsP1nS9t8tlmE4uaw7o73V63kfKXxgV-hlchGZkpO1GXGQkzR7YpBvVp64X7A2tXe6qG1GXC9Kj9slU6gNPuL6ak6QHw7adNyht7UBlsxZ5UESqvTwS9w4EyHmSiLMjrzQF-z2O40/s640/06.JPG" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Passei a trabalhar assim:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7J-ufM-CTyvE75Wu_67LkScBn_kb_b6Ep8XP2zAfp1ueHM44gka7StyqjmVOT2l4_y9_NeIQnK-IXOwJmN1sPhcFBWxpJgIhs_24fm0nfvPJdTKWNzcJYPBw1d_8STvvZ2QoA9uXt6UI/s1600/07.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7J-ufM-CTyvE75Wu_67LkScBn_kb_b6Ep8XP2zAfp1ueHM44gka7StyqjmVOT2l4_y9_NeIQnK-IXOwJmN1sPhcFBWxpJgIhs_24fm0nfvPJdTKWNzcJYPBw1d_8STvvZ2QoA9uXt6UI/s640/07.JPG" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E aquela estória de tamanho das fontes, besteira,, nem me preocupo mais com aquilo. Em questão das fontes o que tenho que me preocupar é de utilizar fontes maior que 12.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Faço o projeto visualizando quase exato do que vai aparecer no celular. Digo quase pois o viewport faz alguns ajustes automaticamente.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O que se deve ter um certo cuidado é de manter uma distancia mais confortável entre os elementos e dependendo da fonte utilizada sugiro transformar o texto em imagem..</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para transformar o texto em imagem basta clicar na caixa de verificação na configuração do texto pelo próprio WebAcappella.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JS_DkTixlaRNziy1Epedegi8jtn8RlPfLhW_DmNe5NHPrKg9jFyvma0JQl6c7PhWmsHZ_Vos07Ku67g61tOwdJ8c3pZ-D6QUztY-pUgjrVGCkAo7j3jy0YADd9MPFCjhMXm-yplbN4U/s1600/texto+em+imagem.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="364" data-original-width="226" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JS_DkTixlaRNziy1Epedegi8jtn8RlPfLhW_DmNe5NHPrKg9jFyvma0JQl6c7PhWmsHZ_Vos07Ku67g61tOwdJ8c3pZ-D6QUztY-pUgjrVGCkAo7j3jy0YADd9MPFCjhMXm-yplbN4U/s400/texto+em+imagem.jpg" width="247" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Outro detalhe que não é obrigatório é criar as imagens nas dimensões reais que se vai usar no projeto. Não é obrigatório pois vão abrir normalmente ao visitar o site, mas sugiro por questão de velocidade. O Google adora sites que carregam rapidamente</div>
<div style="text-align: justify;">
<br /></div>
<div>
<div style="text-align: justify;">
Acredite, é muito mais confortável trabalhar assim. Sem contar que você pode criar também projetos separado para tablet; por exemplo. </div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Mesmo já utilizando o WebAcappella Responsive, continuo também utilizando o WA 4 com versões separadas para mobile (óbvio dependendo do projeto) , pois o WA4 possibilita maior liberdade de criação do que o WA RC. Um exemplo é ícones em botões, sobrescrever um elemento com outro e etc. Seguindo o mesmo pensamento dos grandes como Facebook, loja submarino e etc. Todos estes possuem a versão mobile separada.</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
A versão mobile você foca diretamente no que o usuário gostaria de ver por um dispositivo móvel.</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
E sabe como eu faço? </div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
1 - Faço o site primeiro por inteiro na vesão desktop.</div>
</div>
<div>
<div style="text-align: justify;">
2 - Depois duplico as páginas para as outras versóes (sem precisar criar pastas para outras versões, apenas acrescento um -m(mobile) , -t(tablet), -d(desktop) no final do nome de cada url</div>
</div>
<div>
<div style="text-align: justify;">
3 - Daí saio retirando tudo que não vou querer na versão mobile e tablet</div>
<div style="text-align: justify;">
4 - Altero as dimensões</div>
</div>
<div>
<div style="text-align: justify;">
5 - Faço todos os ajustes para as novas dimensões</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Em poucas horas já ta pronta a versão mobile.</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Bom, continuando.......</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Preciso de definir as dimensões referente a largura de cada versão. Então depois de vários testes cheguei nas seguintes dimensões:<br />
<br />
<br />
<b style="color: orange;">Para celular (na vertical) 410 px de largura</b><br />
<b style="color: orange;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_OkEsyW6TqnL-NduugJbjjBKDDflNM1S4-z2fTFXxOsyTBdIc-xBIWUIhQuDATmynaz2INIhYC8d61CEB1XY8aHJAmU9fm2DLJQNA3oQXQAmvVA0Nd-uyXyHvhYk7gOP_R-7L4gMCOU/s1600/largura+wa4+para+celular+410px.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="873" data-original-width="1266" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_OkEsyW6TqnL-NduugJbjjBKDDflNM1S4-z2fTFXxOsyTBdIc-xBIWUIhQuDATmynaz2INIhYC8d61CEB1XY8aHJAmU9fm2DLJQNA3oQXQAmvVA0Nd-uyXyHvhYk7gOP_R-7L4gMCOU/s640/largura+wa4+para+celular+410px.jpg" width="640" /></a></div>
<b style="color: orange;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: orange;">Para tablet (na vertical) 600px de largura</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr3-EXRBNN2KN1nSjFdpzgWrGZJbWXvmXFX48Lgyogz9Sr7wdllGeKo9VvjP5Q0lFRRNxNMzjpJ9R-uQMwkHglJTUKRGcUxQyiSLRDcEmMKvWg6X460-lT8QwyzMsIjTQ9_FcTLDwFnS4/s1600/largura+wa4+para+tablet.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="771" data-original-width="834" height="590" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr3-EXRBNN2KN1nSjFdpzgWrGZJbWXvmXFX48Lgyogz9Sr7wdllGeKo9VvjP5Q0lFRRNxNMzjpJ9R-uQMwkHglJTUKRGcUxQyiSLRDcEmMKvWg6X460-lT8QwyzMsIjTQ9_FcTLDwFnS4/s640/largura+wa4+para+tablet.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
As áreas que separei para cada lado de 10 px é para que tenha uma melhor visualização. Elementos esbarrando no canto da tela ninguém merece.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E no caso do celular estiver vai depender de cada dispositivo, pois dependendo da resolução ele pode assumir a de outro dispositivo. Por exemplo: Dependendo da resolução do tablet ele poderá assumir a versão do site para desktop.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Minhas páginas ficaram assim:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2Md0eMq1EPSYHN9IGqeXG5K8ekbtUxeaccKDLxNI9JhHJSxL4cbSNCmVRvPQURBaCIvjBafRjBQKUmGvfaUP3w5xg2pRS0p9WuQtZNr2uGluildF1_X8mR3P03gw-FXnwc65NOKXrVE/s1600/versoes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="173" data-original-width="532" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2Md0eMq1EPSYHN9IGqeXG5K8ekbtUxeaccKDLxNI9JhHJSxL4cbSNCmVRvPQURBaCIvjBafRjBQKUmGvfaUP3w5xg2pRS0p9WuQtZNr2uGluildF1_X8mR3P03gw-FXnwc65NOKXrVE/s640/versoes.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Lembrando que no caso do ipad, pode também ser criada uma página para ipad com suas dimensões. Dessa forma quem entrar pelo ipad terá uma visualização só para ele. O importante deste post é passar a ideia de como fazer. As dimensões você pode alterar do seu jeito e fazer devidos testes.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Agora que já estou trabalhando com as dimensões reais, mais confortavelmente e mais feliz vou inserir o detalhe chave. A tag Viewport.</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então através do Viewport vou fazer que a página para cada dispositivo se ajuste a resolução do mesmo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sendo assim para cada tipo dispositivo incluirei o código no head da página. Lembrando que cada página mobile (celular, tablet, ipad e etc) do projeto do seu site tem que ser inserido o código .</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Código:</div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: "roboto" , "helvetica" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><b><span style="color: orange;"><meta name="viewport" content="width=device-width, user-scalable=no"></span></b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Agora vamos as simulações . O ideal seria testar diretamente nos dispositivos, mas como isso pra mim é quase impossível vou usar o Opera Mobile Emulator.</b></div>
<br />
<div style="text-align: justify;">
<span style="font-weight: 700;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-weight: 700;"><br /></span></div>
<b style="color: orange;"></b><br />
<div style="text-align: justify;">
<b style="color: orange;"><b style="color: orange;">Para celular (na vertical) 410 px de largura</b></b><br />
<b style="color: orange;"><b style="color: orange;"><br /></b></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv4lr_g2BHekVMzNAglXq6JKjFJiA9WR1iWWYFKwxdb2Ga-vqpiiM0GyMHQGTSSUQPQz0njUnTz_UHcY4pfaP8uNIfEj2FyisV7qNXJRs3ULQPvSxXpC8Qsl2eOVh8Wd6agnu9htni06o/s1600/simula%25C3%25A7%25C3%25A3o+site+celular+pelo+wa4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="985" data-original-width="1279" height="492" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv4lr_g2BHekVMzNAglXq6JKjFJiA9WR1iWWYFKwxdb2Ga-vqpiiM0GyMHQGTSSUQPQz0njUnTz_UHcY4pfaP8uNIfEj2FyisV7qNXJRs3ULQPvSxXpC8Qsl2eOVh8Wd6agnu9htni06o/s640/simula%25C3%25A7%25C3%25A3o+site+celular+pelo+wa4.jpg" width="640" /></a></div>
<b style="color: orange;"><b style="color: orange;"><br /></b></b></div>
<b style="color: orange;">
</b>
<br />
<div style="text-align: justify;">
<b style="color: orange;"><br /></b>
</div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<br />
<div style="text-align: justify;">
<b><b>E o teste Google mobile</b></b></div>
<b>
</b>
<br />
<div style="text-align: justify;">
<b><br /></b>
</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1lT4lM_YOEDv6mY_iAiJ7553oQYCP_lyjL7PEl26GVgXZUiwj_8gjdwqf93EBmB6ou0RJwmWjD-Kxuq6K6mBhGVkW-fpPA10Gq48-Rj8Z_PGn-i7s_uikXE7cGJLHFDNO7TWmhYL-o8/s1600/teste+google+celular.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="719" data-original-width="1158" height="395" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1lT4lM_YOEDv6mY_iAiJ7553oQYCP_lyjL7PEl26GVgXZUiwj_8gjdwqf93EBmB6ou0RJwmWjD-Kxuq6K6mBhGVkW-fpPA10Gq48-Rj8Z_PGn-i7s_uikXE7cGJLHFDNO7TWmhYL-o8/s640/teste+google+celular.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<b><br /></b>
</div>
<div style="text-align: justify;">
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;">Para tablet (na vertical) 600px de largura</span></b></div>
<br />
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHhmCTdsCkvzywBAKz3-Ba3YubjjY7bqYBqlq1536eMWk6QGf7iEEhE8NVBiIbkLiDQQ4TAyxoAx_c0EEFIeBuWBJykBcdSz1Yddlc0V0CxnOVFcyl1oWhM2SqG9bRgBminU8FmnJipKs/s1600/simula+tablet+wa4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="956" data-original-width="1152" height="530" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHhmCTdsCkvzywBAKz3-Ba3YubjjY7bqYBqlq1536eMWk6QGf7iEEhE8NVBiIbkLiDQQ4TAyxoAx_c0EEFIeBuWBJykBcdSz1Yddlc0V0CxnOVFcyl1oWhM2SqG9bRgBminU8FmnJipKs/s640/simula+tablet+wa4.jpg" width="640" /></a></div>
<br />
<div style="text-align: justify;">
<span style="color: orange; font-weight: 700;"><br /></span></div>
<div style="text-align: justify;">
<span style="color: orange; font-weight: 700;"><br /></span></div>
<b></b><br />
<div style="text-align: justify;">
<b><b>E o teste Google mobile</b></b></div>
<b>
</b>
<br />
<div style="text-align: justify;">
<span style="font-weight: 700;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-weight: 700;"><br /></span></div>
<br />
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2ex7mXlxPRIgQ-6Mwl1fMIlsZMxZEYb_TkFpBHrx6WP-E45NZHSFo-mGrVW_66fXVqgiuuwQu4TD7ejJwBpUtvTuHBJVdqLFxU8eCX-zMPIfN_VjAJojw4GtZpV4ptKn1sVUCmlfZ9w/s1600/teste-google-mobile-wa4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="698" data-original-width="1154" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2ex7mXlxPRIgQ-6Mwl1fMIlsZMxZEYb_TkFpBHrx6WP-E45NZHSFo-mGrVW_66fXVqgiuuwQu4TD7ejJwBpUtvTuHBJVdqLFxU8eCX-zMPIfN_VjAJojw4GtZpV4ptKn1sVUCmlfZ9w/s640/teste-google-mobile-wa4.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<b><br /></b>
</div>
<div style="text-align: justify;">
<br />
<br /></div>
<div style="text-align: justify;">
Agora que já tenho minha página para cada dispositivo, falta fazer com que ao entrar na página ela seja direcionada pela versão certa. PRESTE BEM ATENÇÃO!!! Estou dizendo que é entrar na PÁGINA, NÃO NO SITE. Porque? Simplesmente se você determinar um código somente no inicio do site para redirecionar para a versão correta, só irá funcionar se for digitado a <b>url inicial do site</b>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então imagina a seguinte situação: Em uma pesquisa no <b>Google</b> feita pelo celular, encontra a página <b>contato da versão desktop</b> (por exemplo) ao clicar para abrir a página contato <b>não estará </b>configurada para celular, abrindo a <b>versão incorreta</b> e não se adaptando ao dispositivo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para solucionar isso vou criar uma página que apelidei de <b><span style="color: orange;">página piloto</span></b> para cada página onde ela vai decidir para qual versão ela vai direcionar de acordo com o dispositivo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
então para cada página serão 4 páginas.</div>
<div style="text-align: justify;">
1 - <b>Página Piloto</b> : A que vai fazer o redirecionamento</div>
<div style="text-align: justify;">
2 - Página para desktop</div>
<div style="text-align: justify;">
3 - Página para tablet</div>
<div style="text-align: justify;">
4 - Página para celular</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Parece muito trabalho né? Mas na prática verá que não é e funciona.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Supomos que tenho só a página Home. Então ficaria assim:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghRQAdm1aa_9r0ZzO5TUGfpw6uzDZmqZ73N0ERLeOFoCIkhfHEW-VMRWc3JNGsz4vZ7jPUM2ejZd88C8AQgbeFvejBLa00-X30kOxh9gTe6Pl2ud-sulyaD1liYtJlFaJjzYPSmvFFp_I/s1600/index.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="227" data-original-width="546" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghRQAdm1aa_9r0ZzO5TUGfpw6uzDZmqZ73N0ERLeOFoCIkhfHEW-VMRWc3JNGsz4vZ7jPUM2ejZd88C8AQgbeFvejBLa00-X30kOxh9gTe6Pl2ud-sulyaD1liYtJlFaJjzYPSmvFFp_I/s640/index.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para melhorar ainda mais o entendimento vamos supor que temos a página Home e a página Contato.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ficaria assim:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3C3UmAdoaTVoC6H77Kv8wLWDFpGDklmr_MtWwZTf-fXYz9TrzQ4zJHJIt8rAaj0OZN1iRymEYDCPmlL-Mp0wmdKiQSVc_ERRg2HtQjEuho3DdnccvtzrCCfoMppx2_e_V3wzPoyLlHbA/s1600/comoficaria.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="290" data-original-width="542" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3C3UmAdoaTVoC6H77Kv8wLWDFpGDklmr_MtWwZTf-fXYz9TrzQ4zJHJIt8rAaj0OZN1iRymEYDCPmlL-Mp0wmdKiQSVc_ERRg2HtQjEuho3DdnccvtzrCCfoMppx2_e_V3wzPoyLlHbA/s640/comoficaria.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Coloquei um hífen na frente das páginas home só por uma questão de organização, pois Home começa com H, e como é minha página principal fica melhor para trabalhar se forem as primeiras e estiverem próximas uma abaixo da outra.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Eu usei o que chamo de <b>página piloto</b> onde vai conter as configurações para o redirecionamento pois dessa forma nos meus menus fica mais fácil e prático de manusear. Pois assim não preciso em ir em cada menu de cada versão e ficar trocando as referências. Pois todo menu vai apontar para a página piloto, e ela que vai direcionar para a página certa. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: orange;">COMO DEVE SER CADA PÁGINA PILOTO:</span></b></div>
<div style="text-align: justify;">
<b><span style="color: orange;"><br /></span></b></div>
<div style="text-align: justify;">
<b>Para que o carregamento da página piloto seja o mais rápido possível eu configurei uma página em branco nas dimensões mínimas que o WA4 permite. </b></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xHf59pnKczvHqf2pAEj502Jpx9X2hZuuyXVQOloTU0thvkOtkuz2UwVDwnP2oSrZsqEnF2qlSJFR1FuZ9ESZH0U72sputhnF0NLA1yE5Ug67HZZxPMGkDp6pf15esYcMSjP5EEsZS-w/s1600/pagina+piloto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="797" data-original-width="739" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xHf59pnKczvHqf2pAEj502Jpx9X2hZuuyXVQOloTU0thvkOtkuz2UwVDwnP2oSrZsqEnF2qlSJFR1FuZ9ESZH0U72sputhnF0NLA1yE5Ug67HZZxPMGkDp6pf15esYcMSjP5EEsZS-w/s640/pagina+piloto.jpg" width="592" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Na aba SEO marco para que os mecanismos de busca não localize as páginas piloto. (<b>só para as páginas piloto</b>)</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjojjSOSOl56SgqEoi0vyAmtVGOApQYQztwbaHBVS0nNGlN9qNGZskeM5QYJkoSG8U-6dmtBDShVulYkW-jXVIdpkDOS1nVIEL0sA0SSxkJcEPkGK7ifCtL4r4kCp8RnZ6b9ELGOhGrMDg/s1600/ignorar+a+pagina.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="680" data-original-width="403" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjojjSOSOl56SgqEoi0vyAmtVGOApQYQztwbaHBVS0nNGlN9qNGZskeM5QYJkoSG8U-6dmtBDShVulYkW-jXVIdpkDOS1nVIEL0sA0SSxkJcEPkGK7ifCtL4r4kCp8RnZ6b9ELGOhGrMDg/s640/ignorar+a+pagina.jpg" width="378" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E no head de <b>cada página piloto</b> usei o seguinte código:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;"><meta name="viewport" content="width=device-width, user-scalable=yes"></span></span></div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;"><script type="text/javascript"></span></span></div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;">var width = screen.width;</span></span></div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;">if (width < 600)</span></span><br />
<span style="background-color: #f3f3f3; color: #666666;">document.write("<meta http-equiv='refresh' content='0; url=</span><span style="background-color: #f3f3f3; color: orange;">URLPAGINACELULAR</span><span style="background-color: #f3f3f3; color: #666666;">'>")</span><br />
<span style="background-color: #f3f3f3; color: #666666;">else</span></div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;"> if (width < 800)</span></span></div>
<div style="text-align: justify;">
<span style="color: #666666;"><span style="background-color: #f3f3f3; color: #666666;"> document.write("<meta http-equiv='refresh' content='0; url=</span><span style="background-color: #f3f3f3; color: orange;">URLPAGINATABLET</span><span style="background-color: #f3f3f3; color: #666666;">'>")</span></span></div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;"> else</span></span></div>
<div style="text-align: justify;">
<span style="color: #666666;"><span style="background-color: #f3f3f3; color: #666666;"> document.write("<meta http-equiv='refresh' content='0; url=</span><span style="background-color: #f3f3f3; color: orange;">URLPAGINADESKTOP</span><span style="background-color: #f3f3f3; color: #666666;">'>")</span></span></div>
<div style="margin: 0px; text-align: justify; text-indent: 0px;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;"></script></span></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Os valores 600 e 800 são as dimensões para atender a condição.<br />
Então vai seguir a ordem das seguintes condições:<br />
<br />
1ª condição) Verifica se o dispositivo tem uma largura menor que 600px. Se sim vai direcionar para a página para celular, se não vai para a próxima condição.<br />
<br />
2ª condição) Verifica se o dispositivo tem uma largura menor que 800px. Se sim vai direcionar para a página tablet, se não vai para a próxima condição<br />
<br />
3ª condição) Vai direto para a página desktop (só executa esta condição se não atender nenhuma das anteriores)<br />
<br />
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Lembrando que você determinas as dimensões e para que página quer o redirecionamento. Eu usei essas medidas pois em testes encontrei os melhores resultados. Mas é opcional. E caso você tiver mais páginas específicas para outra resoluções como exemplo ipad, terá que adaptar conforme seu projeto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Testando pelo <b>Teste de compatibilidade com dispositivos móveis do Google </b>utilizando o url principal de onde usei para fazer a simulação e printar os exemplos veja o resultado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNv09A1xWaykvagUiGQa3YXVZOZ3TnZRymdcvdSbqsC0dtrbPkJhhUoowvla57H5umjoEjIZikpQclL-c-iottraOEE1rlj7vpIWgXOHlNArFoQGc7-lsC3Ba8dB7yQMl66ZWfVJW6ivg/s1600/teste+google+mobile+celular.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="917" data-original-width="1184" height="494" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNv09A1xWaykvagUiGQa3YXVZOZ3TnZRymdcvdSbqsC0dtrbPkJhhUoowvla57H5umjoEjIZikpQclL-c-iottraOEE1rlj7vpIWgXOHlNArFoQGc7-lsC3Ba8dB7yQMl66ZWfVJW6ivg/s640/teste+google+mobile+celular.jpg" width="640" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Provando assim que ele o Google não penalizou o site e se observar a url, o teste está direto na url principal do site. Ou seja, não foi feito teste em cima da url do celular como os outros citados acima. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Testando então pelo PAGE SPEED INSIGHTS (óbvio que não foi feito nenhum tipo de otimização, então não leve em consideração a pontuação e sim qual versão ele localizou para cada dispositivo)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq2hJ0Z9QFTRLToxGikOhJYRa6vDxHjYbThZYrRGiRy0Hu3WC81OwETnbJrU5AW4IATwXSy5dq7fcOhZo_QI7rOnQ4MFXoNcUMgrvDYBvk_Xq97ZJRSK3CYzS38gDeNlwp5m_UO7tU9rU/s1600/page+speed+celular.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="649" data-original-width="1255" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq2hJ0Z9QFTRLToxGikOhJYRa6vDxHjYbThZYrRGiRy0Hu3WC81OwETnbJrU5AW4IATwXSy5dq7fcOhZo_QI7rOnQ4MFXoNcUMgrvDYBvk_Xq97ZJRSK3CYzS38gDeNlwp5m_UO7tU9rU/s640/page+speed+celular.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnEVU6vWMnqQuP8nLkI1P0bJbMOsHgaHo-tStfEF6ORTfKCZRGUNsbdRt-infehwncrO_VoptRnPGJXbXUkLwLZ-VQdO_JjwuLmsG0GWFOJ-t6oihZQyYfv-SARUJyukdubsZaiMUQpxU/s1600/page+speed+desktop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="694" data-original-width="1249" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnEVU6vWMnqQuP8nLkI1P0bJbMOsHgaHo-tStfEF6ORTfKCZRGUNsbdRt-infehwncrO_VoptRnPGJXbXUkLwLZ-VQdO_JjwuLmsG0GWFOJ-t6oihZQyYfv-SARUJyukdubsZaiMUQpxU/s640/page+speed+desktop.jpg" width="640" /></a></div>
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">Mas se numa pesquisa pelo celular o Google mostrar a versão desktop?</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pois agora tem mais uma questão, se caso for localizado por uma pesquisa no Google uma página que não corresponde ao dispositivo correto, tenho que informar para não prosseguir e voltar para a página piloto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então para cada página de cada dispositivo, inclusive a página para desktop tenho que colocar um código no inicio do head, ou seja; na primeira linha. Sendo que a condição tem que ser oposta a condição que foi inserida na página piloto. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O código seria: </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<meta name="viewport" content="width=device-width, user-scalable=yes"></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<script type="text/javascript"></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
var width = screen.width;</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
if (<span style="color: red;"><b>CONDIÇÃO</b></span>)</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
document.write("<meta http-equiv='refresh' content='0; url=<b><span style="background-color: white;"><span style="color: red;">URLDAPÁGINAPILOTO</span>'</span></b>>")</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
</script></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vamos a lógica para tentar explicar melhor. Tomamos como exemplo a página contato. Sento que a página contato piloto seria contato.html; essa faz a verificação das dimensões e envia para a página da versão desejada. Sendo por exemplo, contato-m.html (para celular) , contato-t.html (para tablet) , contato-d.html (para desktop)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
No head da página contato.html (que seria a página piloto de contato) teria o seguinte código.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;"><meta name="viewport" content="width=device-width, user-scalable=yes"></span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;"><script type="text/javascript"></span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;">var width = screen.width;</span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;">if (width < 600)</span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;">document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-m.html'>")</span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;">else</span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;">if (width < 800)</span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="color: #666666;"><span style="background-color: #f3f3f3;">document.write("<meta http-equiv='refresh' content='0; url=</span></span><span style="background-color: #f3f3f3; color: #666666;">http://www.seudominio.com.br/contato-t.html</span><span style="color: #666666;"><span style="background-color: #f3f3f3;">'>")</span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;">else</span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="color: #666666;"><span style="background-color: #f3f3f3;">document.write("<meta http-equiv='refresh' content='0; url=</span></span><span style="background-color: #f3f3f3; color: #666666;">http://www.seudominio.com.br/contato-d.html</span><span style="color: #666666;"><span style="background-color: #f3f3f3;">'>")</span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3;"><span style="color: #666666;"></script></span></span></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então a condição do exemplo é: Primeiro ele verifica se a de largura do dispositivo for menor que 600px ele vai redirecionar para a versão contato para celular (contato-m.html), se for maior ele passa para a segunda condição; se for a largura do dispositivo for menor que 800px ele redireciona para a versão para tablet (contato-t.html). Se for maior ele passa para terceira condição que é redirecionar para a versão desktop (contato-d.html).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mas se pelo mecanismo de busca. O internauta fizer uma pesquisa pelo celular e o resultado for mostrado por exemplo a url para desktop (contato-d.html), Ao clicar, obviamente o arquivo acionado será contato-d.html ( o que corresponde a versão desktop), a qual não iria ser bem visualizada no celular. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Por este motivo no head da versão desktop (contato-d.html) teria de ter o seguinte código: </div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3; color: #666666;"><br /></span></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3; color: #666666;"><meta name="viewport" content="width=device-width, user-scalable=yes"></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3; color: #666666;"><script type="text/javascript"></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3; color: #666666;">var width = screen.width;</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3; color: #666666;">if (width < 800)</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3; color: #666666;">document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="background-color: #f3f3f3; color: #666666;"></script></span></div>
</div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3; color: #666666;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3; color: #666666;">*</span><span style="background-color: white; color: #666666;"> Informei que: Ao acessar o contato-d.html (versão desktop) vai verificar a largura, ser for menor que 800px ele vai para a página contato.html (que é a página piloto a qual vai verificar a largura e o e enviar para a página certa) </span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Já se no caso em uma busca pelo desktop, o resultado apresentar a versão celular (contato-m.html). Ao clicar mostraria a página que deveria mostrar somente pelo celular. Então seria muito estranho o internauta visualizar aquela página fina e espichada. Por isso no head da versão celular (contato-m.html) deveria ter o seguinte código no head. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<meta name="viewport" content="width=device-width, user-scalable=yes"><br />
<script type="text/javascript"><br />
var width = screen.width;<br />
if (width < 600)<br />
<b><span style="color: orange;"> endif</span></b><br />
else<br />
if (width < 800)<br />
document.write("<meta http-equiv='refresh' content='0; url=<b><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span>/paginapiloto.html</span></b>'>")<br />
else<br />
document.write("<meta http-equiv='refresh' content='0; url=<span style="color: orange;"><b>http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span>/paginapiloto.html</b></span>'>")<br />
<span style="background-color: #f3f3f3; color: #666666;">
</span><br />
</script><br />
<span style="background-color: #f3f3f3; color: #666666;"><br /></span>
<span style="background-color: #f3f3f3; color: #666666;"><br /></span>
<br />
<div style="text-align: justify;">
Coloquei o mesmo código inserido nas páginas piloto , porém se a condição obedece a resolução que eu quero que a página abra eu mato com <b><span style="color: orange;">ENDIF</span></b>, e as condições em que a resolução do dispositivo não obedece a página ele envia para a página piloto. Dái a piloto encaminha para a página que atenda o a largura do dispositivo. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Você pode até não querer usar uma página piloto, neste caso teria que substituir onde o codigo envia para a página piloto para a página exata correspondente a cada dispositivo. E também ter o trabalho de ajustar em cada menu do seu projeto. O que é meio cansativo inda mais se utilizar um menu feito por script.</div>
</div>
</div>
<div style="text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: white;">Resumindo, tomando como exemplo a página contato usando as dimensões escolhidas neste post sendo para os direcionamento; o</span><span style="background-color: white;">s códigos a serem inseridos no head (completos) em cada página ficaria assim:</span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: orange;"><b>PÁGINA PILOTO | contato.html</b></span><br />
<span style="background-color: white; color: orange;"><b><br /></b></span>
<span style="font-size: x-small;"><meta name="viewport" content="width=device-width, user-scalable=yes"></span><br />
<span style="font-size: x-small;"><script type="text/javascript"></span><br />
<span style="font-size: x-small;">var width = screen.width;</span><br />
<span style="font-size: x-small;">if (width < 600)</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b style="text-align: left;"><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span></span></b><span style="font-size: x-small;">/contato-m.html'>")</span><br />
<span style="font-size: x-small;">else</span><br />
<span style="font-size: x-small;">if (width < 800)</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b style="text-align: left;"><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span></span></b><span style="font-size: x-small;">/contato-t.html'>")</span><br />
<span style="font-size: x-small;">else</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b style="text-align: left;"><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span></span></b><span style="font-size: x-small;">/contato-d.html'>")</span><br />
<span style="font-size: x-small;"></script></span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: orange;"><b><br /></b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; color: orange;"><b>PÁGINA DESKTOP | contato-d.html</b></span></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br />
<span style="font-size: x-small;"><meta name="viewport" content="width=device-width, user-scalable=yes"></span><br />
<span style="font-size: x-small;"><script type="text/javascript"></span><br />
<span style="font-size: x-small;">var width = screen.width;</span><br />
<span style="font-size: x-small;">if (width < 600)</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span></span></b><span style="font-size: x-small;">/contato.html'>")</span><br />
<span style="font-size: x-small;">else</span><br />
<span style="font-size: x-small;">if (width < 800)</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span></span></b><span style="font-size: x-small;">/contato.html'>")</span><br />
<span style="font-size: x-small;">else</span><br />
<span style="color: orange; font-size: x-small;"><b>endif</b></span><br />
<span style="font-size: x-small;"></script></span></div>
</div>
<div style="text-align: justify;">
<span style="font-size: x-small;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: #f3f3f3; color: #666666;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><b><span style="color: orange;">PÁGINA CELULAR | contato-m.html</span></b></span></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: x-small;"><meta name="viewport" content="width=device-width, user-scalable=yes"></span><br />
<span style="font-size: x-small;"><script type="text/javascript"></span><br />
<span style="font-size: x-small;">var width = screen.width;</span><br />
<span style="font-size: x-small;">if (width < 600)</span><br />
<b><span style="color: orange; font-size: x-small;"> endif</span></b><br />
<span style="font-size: x-small;">else</span><br />
<span style="font-size: x-small;">if (width < 800)</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span></span></b><span style="font-size: x-small;">/contato.html'>")</span><br />
<span style="font-size: x-small;">else</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span></span></b><span style="font-size: x-small;">/contato.html'>")</span><br />
<span style="font-size: x-small;"></script></span></div>
</div>
<div style="text-align: justify;">
<span style="font-size: x-small;"><br /></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white;"><b><span style="color: orange;">PÁGINA TABLET | contato-t.html</span></b></span></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: x-small;"><meta name="viewport" content="width=device-width, user-scalable=yes"></span><br />
<span style="font-size: x-small;"><script type="text/javascript"></span><br />
<span style="font-size: x-small;">var width = screen.width;</span><br />
<span style="font-size: x-small;">if (width < 600)</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br</span></span></b><span style="font-size: x-small;">/contato.html'>")</span><br />
<span style="font-size: x-small;">else</span><br />
<span style="font-size: x-small;">if (width < 800)</span><br />
<span style="color: orange; font-size: x-small;"><b>endif</b></span><br />
<span style="font-size: x-small;">else</span><br />
<span style="font-size: x-small;">document.write("<meta http-equiv='refresh' content='0; url=</span><b><span style="color: orange;">http://<span style="background-color: #f3f3f3;">www.seudominio.com.br/</span></span></b><span style="font-size: x-small;">contato.html'>")</span><br />
<span style="font-size: x-small;"></script></span></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tá achando complicado né? Mas saiba que no WARC para ficar um site bacana também tem seus ajustes para cada versão. Mas isso vai ser mostrando na série de postagens com o tema<a href="https://webacappellashow.blogspot.com.br/search/label/Criando%20um%20site%20com%20M7admin%20com%20WA%204%20%20e%20%20WA%20RC" target="_blank"> <b style="background-color: #fbfbfb; font-family: Arial, Helvetica, sans-serif; font-size: 14.3px; text-align: center;">Criando um site com M7admin com WA 4 e WA RC</b></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: red;">DETALHE MUITO IMPORTANTE:</span></b></div>
<div style="text-align: justify;">
<span style="color: blue;">UTILIZE DE TITULO DA PÁGINA, DESCRIÇÃO, PALAVRAS CHAVES ; DIFERENTES ENTRES AS PÁGINAS MOBILE, DESKTOP E TABLET.. </span></div>
<div style="text-align: justify;">
<span style="color: blue;"><br /></span></div>
<div style="text-align: justify;">
<span style="color: blue;">Além de favorecer o site em SEO, evita<b> </b></span><span style="background-color: white; font-family: "gothamlight"; font-size: 16px; text-align: left;"><span style="color: blue;">que o Google bot leia as duas versões, que são duas URLs, contendo o mesmo conteúdo, o famoso conteúdo duplicado que tanto falamos.</span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: "gothamlight"; font-size: 16px; text-align: left;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: "gothamlight"; font-size: 16px; text-align: left;">HEHEH. .me lembrou as pessoas que gostam de fazer sites ONE PAGE (de uma página só); nem imaginam como esse prática prejudica para SEO). "Respeito outras opiniões". </span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Algumas pessoas saem falando por aí que o Google pune os sites que não são responsivos. <b>Foi provado o contrário.</b> <span style="color: red;"> </span>Tanto que o próprio Google sugere uma forma que deve ser feito para sites em várias versões; ou seja, sites que tem versões para cada dispositivo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Segue link da orientação do Google: <a href="https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls?hl=pt-br">https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls?hl=pt-br</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E outra, se fosse assim sites gigantes como o Facebook estariam punidos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mas confesso a vocês, que antes de ter conhecimento sobre as orientações do Google eu já fazia da minha maneira (citada neste post) , e acabei me acostumando com a mesma e nem experimentei usar a do Google. Pelo menos comigo a que uso sempre funcionou, passou nos testes do Google e o site não foi penalizado..</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Quer ver On line? . em breve.... Pois estarei dando continuidade na série com o tema <a href="https://webacappellashow.blogspot.com.br/search/label/Criando%20um%20site%20com%20M7admin%20com%20WA%204%20%20e%20%20WA%20RC" target="_blank"> <b style="background-color: #fbfbfb; font-family: Arial, Helvetica, sans-serif; font-size: 14.3px; text-align: center;">Criando um site com M7admin com WA 4 e WA RC</b></a>, onde estarei construindo aos poucos um site com WARC e o gerenciador de conteúdo para webacappella <a href="http://www.m7admin.com.br/" target="_blank">M7ADMIN</a> e outro com WA4 usando também o gerenciador de conteúdo <a href="http://www.m7admin.com.br/" target="_blank">M7ADMIN</a>. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Como as postagens do tema acima tem vídeos makingoff, achei interessante criar este explicando a utilizar o WA4 em várias versões para que os vídeos das outras postagens não fiquem muito grandes.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: red;"><br /></span></b></div>
<div style="text-align: justify;">
<br /></div>
</div>
<div style="text-align: justify;">
<span style="color: red;">GOSTARIA DE LEMBRAR QUE MEUS POSTS TEM SOMENTE O INTUITO DE COMPARTILHAR MINHAS EXPERIÊNCIAS, MAS NÃO SOU NENHUM GURU; E PEÇO QUE QUALQUER PESSOA TENHA UMA SUGESTÃO DE MELHORIA, ENVIE UM E-MAIL PARA CONTATO@WEBACAPPELLASHOW.COM.BR QUE SERÁ ANALISADA E MUITO BEM VINDA. </span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Abração a todos.<br />
<br />
<b>FRASE DO DIA:</b><br />
<br />
<i>"A experiência nem sempre está no tempo de vida e ou até mesmo no tempo que faz a mesma tarefa. Muitas das vezes a experiência está no poder de observação. Quem se acha muito fera por fazer determinada ação por muito tempo, pode pecar e não perceber que está bitolado"</i></div>
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-81507241711054738892018-05-06T21:41:00.001-03:002018-05-06T21:41:46.098-03:00Inserindo um botão linkando para o Whatsapp<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4ee0K0hHFxAmWb4oKeFD-EPGbUsFqBw7rUdszetBzTP8ttybt9jjmxawQya9gXfcv31JFSC4utrKzaOcCEeRd25vwmqPbe0zFuJORewncodSHZaSGjyfPVj7HcolqT4L18VX-EIM1fw/s1600/Whatsapp+no+seu+site.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="620" data-original-width="1200" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4ee0K0hHFxAmWb4oKeFD-EPGbUsFqBw7rUdszetBzTP8ttybt9jjmxawQya9gXfcv31JFSC4utrKzaOcCEeRd25vwmqPbe0zFuJORewncodSHZaSGjyfPVj7HcolqT4L18VX-EIM1fw/s640/Whatsapp+no+seu+site.png" width="640" /></a></div>
<br />
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans", arial, sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">Redes Sociais</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans", arial, sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<span style="background-color: white; font-family: "open sans", arial, sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> <span style="color: orange;"> | WA 4</span></b></span></span><br />
<br />
Hoje é muito usado disponibilizar o WhatsApp como uma forma de comunicação. Portanto não são todos os casos que devem ser considerados. Sugiro que o número seja exclusivo para isso, evitando que se misture com seus contatos pessoais.<br />
<br />
Mas caso seja uma opção desejada é muito fácil de se inserir um link para que o visitante do site ao clicar já seja direcionado para Whatsapp com seu número pré configurado.<br />
<br />
Pode-se ser usado através de um link configurado em um botão, imagem ou até mesmo em um texto.<br />
<br />
<br />
A url a ser configurada como redirecionamento é a seguinte:<br />
<br />
<a href="https://api.whatsapp.com/send?phone=seunumerodetelefone&text=sua%20mensagem" style="background-color: white; border: 0px; box-sizing: inherit; color: #2b2b2b; font-family: opensans, sans-serif; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 700; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">https://api.whatsapp.com/send?phone=</a><a href="https://api.whatsapp.com/send?phone=seunumerodetelefone&text=sua%20mensagem" style="background-color: white; border: 0px; box-sizing: inherit; font-family: opensans, sans-serif; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 700; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank"><span style="color: red;">seunumerodetelefone</span></a><a href="https://api.whatsapp.com/send?phone=seunumerodetelefone&text=sua%20mensagem" style="background-color: white; border: 0px; box-sizing: inherit; color: #2b2b2b; font-family: opensans, sans-serif; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 700; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">&text=%20</a><span style="background-color: white; border: 0px; box-sizing: inherit; color: red; font-family: opensans, sans-serif; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 700; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">mensagem</span><br />
<span style="color: red; font-family: opensans, sans-serif;"><span style="font-size: 20px; letter-spacing: -0.6px;"><b><br /></b></span></span>
Basta agora você alterar as áreas que estão de vermelho acima por suas informações, ou seja: O seunumerodetelefone substitua pelo número do Whatsapp desejado contendo o código do país, código de área e o número; e mensagem por uma mensagem que deseja. Porém a mensagem não será enviada em seguida. Será necessário que o internauta clique em enviar.<br />
<br />
<br />
Então como exemplo vou inserir o número <span style="color: red;">5531999999999</span> com uma mensagem "<b><span style="color: red;">Este número é apenas uma demonstração de como inserir um botão de Whatsapp em seu site usando Webacappela. Não é nosso número oficial. Para nos contatar somente pelo w-mail contato@webacappellashow.com.br</span></b><span style="color: red;">"</span> No numero usado estou usando o código do País Brasil e código de área para Belo Horizonte e um número exemplo (<b>este número não é um número de contato oficial do WebAcappella Show</b>) .<br />
<br />
<br />
Então a url ficaria assim:<br />
<br />
<span style="font-family: inherit;"><b><a href="https://api.whatsapp.com/send?phone=seunumerodetelefone&text=sua%20mensagem" style="background-color: white; border: 0px; box-sizing: inherit; color: #2b2b2b; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">https://api.whatsapp.com/send?phone=</a><span style="color: red;">5531999999999</span><a href="https://api.whatsapp.com/send?phone=seunumerodetelefone&text=sua%20mensagem" style="background-color: white; border: 0px; box-sizing: inherit; color: #2b2b2b; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">&text=%20</a><span style="color: red;">Este número é apenas uma demonstração de como inserir um botão de Whatsapp em seu site usando Webacappela. Não é nosso número oficial. Para nos contatar somente pelo w-mail contato@webacappellashow.com.br</span></b></span><br />
<span style="font-family: inherit;"><b><span style="color: red;"><br /></span></b></span>
<span style="font-family: inherit;"><b><span style="color: red;"><br /></span></b></span>
<span style="font-family: inherit;">No exemplo então optei para utilizar em um botão no site de forma ao clicar vai abrir o Whatsapp em uma nova guia pelo computador e por celular ele perguntará se vai querer abrir pelo aplicativo ou pelo browse.</span><br />
<span style="font-family: inherit;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidiuwHylN14-sdJDMSOlCgbtPirTlJY6qoLzK_un041TpF4X_kA77DpWLumhoY1pZlm5_c83b8Rw4U08Hfrm1oupZobLkRvt-Eylt4L0Kf-PdxBQzKcwY5ryJiHt9SSsQSsHFdpvaI3PY/s1600/whataspp+no+site+webacappella.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="833" data-original-width="858" height="620" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidiuwHylN14-sdJDMSOlCgbtPirTlJY6qoLzK_un041TpF4X_kA77DpWLumhoY1pZlm5_c83b8Rw4U08Hfrm1oupZobLkRvt-Eylt4L0Kf-PdxBQzKcwY5ryJiHt9SSsQSsHFdpvaI3PY/s640/whataspp+no+site+webacappella.jpg" width="640" /></a></div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">E ao clicar ficaria assim pelo WhatsApp</span><br />
<span style="font-family: inherit;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCV1btbFuDVEKMoo6Gk45FzKgQrbI_2ic__xWSjrAf4enV-eHfOWDuXf-xcIzYaZdcp35fvXNSi_6jVoNPelAHjASWg36KpGj_ViwNQSVSRiOYGCoM4PFyfx_fMrnOWwtsWbBkhfDwqVE/s1600/mensagem.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="486" data-original-width="1077" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCV1btbFuDVEKMoo6Gk45FzKgQrbI_2ic__xWSjrAf4enV-eHfOWDuXf-xcIzYaZdcp35fvXNSi_6jVoNPelAHjASWg36KpGj_ViwNQSVSRiOYGCoM4PFyfx_fMrnOWwtsWbBkhfDwqVE/s640/mensagem.jpg" width="640" /></a></div>
<span style="font-family: inherit;">Basta agora o internauta clicar em enviar.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Se quiser ver on line <a href="http://www.webacappellashow.com.br/" target="_blank">CLIQUE AQUI</a></span><br />
<br />
Lembrando que não conseguirá adicionar o número pois o mesmo não está adicionado ao WhatsApp. É apenas um exemplo.<br />
<br />
Abração a todos.<br />
<br />
<span style="font-family: inherit;"><b><span style="color: red;"><br /></span></b></span>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: inherit;"><b><span style="color: red;"><br /></span></b></span>
<div>
<span style="background-color: white; border: 0px; box-sizing: inherit; color: red; font-family: opensans, sans-serif; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 700; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<div>
<span style="background-color: white; border: 0px; box-sizing: inherit; color: red; font-family: opensans, sans-serif; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 700; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<div>
<span style="background-color: white; border: 0px; box-sizing: inherit; color: red; font-family: opensans, sans-serif; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 700; letter-spacing: -0.6px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-78873792933898278412018-04-29T21:11:00.001-03:002018-06-11T02:32:39.749-03:00Integrando o Instagram no seu site feito no Webacappella 4 ou no Webacappella RC<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptK_O8WpUTuw1vw-9ebWC2KmqXk6jOOw2Xp_RyHrrCgklRl7vlYnzV7LUM1IO_vMJTtaCCQfwO7rE-oINsaoASSps3eTBBWBUkl58wzUoxHtnhLssunQb_9p_1crbpWcZ17XJsy-oFrg/s1600/lightwidget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptK_O8WpUTuw1vw-9ebWC2KmqXk6jOOw2Xp_RyHrrCgklRl7vlYnzV7LUM1IO_vMJTtaCCQfwO7rE-oINsaoASSps3eTBBWBUkl58wzUoxHtnhLssunQb_9p_1crbpWcZ17XJsy-oFrg/s640/lightwidget.png" width="640" /></a></div>
<br />
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">Redes Sociais</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> <span style="color: orange;"> | WA 4</span></b></span></span><br />
<br />
<br />
Me perguntaram esses dias se eu tinha conhecimento de como intregrar o Instagram em sites feitos pelo Webacappella 4.<br />
<br />
Então eu passei o link direto da API do Instagram <a href="https://www.instagram.com/developer/">https://www.instagram.com/developer/</a>, porém tem que se dedicar um tempinho. Eu particularmente nunca usei.<br />
<br />
Não sei porque a cada dia que passa nosso tempo está cada vez mais curto, então nos obriga a ser o mais prático possível.<br />
<br />
Com base nisso vou mostrar no vídeo um dos recursos que utilizo para incorporar o Instagram nos sites que faço tanto no Webacappella 4, quanto no Webacappella RC (WA5)<br />
<br />
Eu utilizo também <a href="https://lightwidget.com/" target="_blank">Lightwidget</a> pois nele tenho a possibilidade de usar como grade, slide e colunas/linhas, além de aplicar vários estilos e ao clicar na foto ele manda diretamente para o Instagram o qual foi incorporado.<br />
<br />
Caso queira ver o vídeo pelo Youtube <a href="https://www.youtube.com/watch?v=hZrgymhQlqQ&feature=youtu.be" target="_blank">clique aqui</a><br />
<br />
<br />
<br /></div>
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/hZrgymhQlqQ" width="560"></iframe>
<br />
Grande abraço pra Geral</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-29361322744443965852018-03-14T01:37:00.002-03:002018-03-14T09:51:25.936-03:00Otimizando as imagens para seu site de forma fácil<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4J7LjV_D2pHroJaN6z64zR-Ktl02eTY5DP4sTzCTihjQRHMNp45FCCGCKpnwqz-F54FvRaS6Ns6ZbsOnyqR1-D1WwZK_Yv1TLShKU2gn3IfBV_vMQzKZTKHJW27EdpNciyHmTMj2x26k/s1600/OTIMIZAR+IMAGENS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="629" data-original-width="1200" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4J7LjV_D2pHroJaN6z64zR-Ktl02eTY5DP4sTzCTihjQRHMNp45FCCGCKpnwqz-F54FvRaS6Ns6ZbsOnyqR1-D1WwZK_Yv1TLShKU2gn3IfBV_vMQzKZTKHJW27EdpNciyHmTMj2x26k/s640/OTIMIZAR+IMAGENS.png" width="640" /></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Uma das métricas do Google para pontuar seu site e melhorar o ranqueamento do mesmo é ele está bem otimizado. E uma dessas otimizações são a velocidade que ele carrega. Sendo assim é muito importante que as imagens estejam otimizadas e de um tamanho razoável.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Levando então em consideração as imagens, as mesma devem estar de uma boa qualidade porém que seu tamanho em KB seja o menor possível.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Vamos então passar algumas dicas para se otimizar as imagens.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Em primeiro lugar é orientar quem vai tirar as fotos, e ou produzir as mesmas para que sejam incluídas no site para que utilize uma resolução definida por você. Digo pois muitas pessoas tem a ilusão em achar que as imagens devem ter a maior qualidade possível.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Oriente também em procurar usar o padrão de cores RGB que é o utilizado pelos monitores. CYMK são utilizados para impressões o que não é nosso caso.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Já tendo as imagens mostramos no vídeo abaixo métodos utilizando :</span></div>
<div style="text-align: justify;">
<span style="color: orange; font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="color: orange;"><b>TINYPNG</b></span>: Otimizador on line. Neste no modo gratuito é possível otimizar 20 arquivos de no máximo 5 MB por vez. Pode-se baixar todos os arquivos de uma só vez em um arquivo compactado.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><b><span style="color: orange;">EASY-RESIZE</span></b>: Otimizador on line. Serviço on line totalmente gratuito o qual pode-se definir a resolução desejada e o tamanho máximo que deseja o arquivo (aproximado). Este é necessário baixar cada arquivo otimizado separadamente</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><b><span style="color: orange;">FASTSONE</span></b>: Programa gratuito <span style="background-color: white;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">conversor de imagens </span></span></span><span style="background-color: white; vertical-align: inherit;"><span style="vertical-align: inherit;">e uma </span></span><span style="background-color: white;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">ferramenta de renomeação</span></span></span><span style="background-color: white; vertical-align: inherit;"><span style="vertical-align: inherit;"> que pretende permitir aos usuários converter, renomear, redimensionar, cortar, girar, alterar a profundidade de cores, adicionar texto e marcas d'água para imagens em um modo de lote rápido e fácil. </span><span style="vertical-align: inherit;">A operação do mouse arrastar e soltar é bem suportada.</span></span></span></div>
<table border="0" style="background-color: white; text-align: justify; width: 862px;"><tbody>
<tr><td colspan="4" width="854"><ul>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Converta e mude o nome das imagens no modo de lote</span></span></span></li>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Suporte JPEG, BMP, GIF, PNG, TIFF e JPEG2000</span></span></span></li>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Redimensionar, cortar, alterar a profundidade de cor, aplicar efeitos de cor, adicionar texto, marca d'água e efeitos de borda</span></span></span></li>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Renomeie imagens com número </span></span>sequencial</span></li>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Pesquisar e substituir textos nos nomes dos arquivos </span></span></span></li>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Visualização de conversão e renomeação</span></span></span></li>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Estrutura de pasta de suporte / pasta</span></span></span></li>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Carregar e salvar configurações</span></span></span></li>
<li class="MsoNormal"><span style="font-family: "verdana"; font-size: x-small;">E muito mais...</span></li>
</ul>
<div>
<span style="font-family: "verdana"; font-size: x-small;"><br /></span></div>
</td></tr>
</tbody></table>
<div style="text-align: justify;">
Veja o vídeo abaixo e espero ter sido útil. Caso deseje ver o vídeo diretamente no <a href="https://www.youtube.com/watch?v=RBjd2181S6k&feature=youtu.be" target="_blank">Youtube</a> <a href="https://www.youtube.com/watch?v=RBjd2181S6k&feature=youtu.be" target="_blank">clique aqui</a></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/RBjd2181S6k/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/RBjd2181S6k?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-79078318275357158822018-02-02T00:04:00.000-02:002018-06-10T19:38:41.727-03:0002 - Conhecendo o painel do M7admin - Sistema administrativo para Webacappella<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZPuxiJp7A1waivgcWwQghgX0tCbdgoJhBAtGed7IvezkM8c11nTyefrD2L-dajSsBEKiPWr0yVogoPM7NwxN4SPUsL3629C_vXivcQ1pNnMXk_YDl4TVcg8WkInTSk3gnidrARLH9As/s1600/02+-+demonstra%25C3%25A7%25C3%25A3o+do+painel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZPuxiJp7A1waivgcWwQghgX0tCbdgoJhBAtGed7IvezkM8c11nTyefrD2L-dajSsBEKiPWr0yVogoPM7NwxN4SPUsL3629C_vXivcQ1pNnMXk_YDl4TVcg8WkInTSk3gnidrARLH9As/s640/02+-+demonstra%25C3%25A7%25C3%25A3o+do+painel.png" width="640" /></a></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: </b></span></span><span style="font-size: 13px; text-align: left;"><b><span style="color: orange;">Criando um site com M7admin com WA 4 e WA RC</span></b></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> | </b></span></span><b style="font-family: "open sans", arial, sans-serif; font-size: 13px;"><span style="color: orange;">WA 4</span></b></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<b style="font-family: "open sans", arial, sans-serif; font-size: 13px;"><span style="color: orange;"><br /></span></b></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<b style="font-family: "open sans", arial, sans-serif; font-size: 13px;"><span style="color: orange;"><br /></span></b></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
E aí galera do bem! Beleza pura sem mistura? </div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
Pois então, dando continuidade ao tema <span style="color: #888888; font-size: 13px; text-align: left;">Criando um site com M7admin com WA 4 e WA RC </span>ainda não iniciaremos o projeto do site feito tanto em WA4 quanto WA RC utilizando o painel administrativo M7Admin;</div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
Por que? </div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
Simples, pelo fato de gastarmos alguns minutinhos apresentando o painel pra vocês e suas funcionalidades. Tudo sem muita formalidade, como estivéssemos tomando um café.</div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
E veja bem, na demonstração fui pego de surpresa e já estava disponível uma nova atualização do sistema. Foi bom, que pude demostrar a atualização pelo painel. Muitooooo masssaaaaa!!!!</div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
Para quem quer saber sobre o que foi atualizado, segue abaixo: </div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<br /></div>
<div>
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;">-Atualizado pre-requisitos m7admin</span><br />
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;">-Adicionado melhorias na plataforma</span><br />
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;">-Melhoria na integração de módulos, corrige o erro ao utilizar HTTPS/SSL em alguns sites</span><br />
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;">-Melhor organização na estrutura de arquivos carregados na head JS/CSS</span><br />
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;">-Notificação de nova versão disponível na Dashboard do painel</span><br />
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;">-Adicionada uma nova biblioteca para animações futuras nos módulos</span><br />
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;">-Após vários testes/atualizações a Atualização Automática do M7Admin saiu do BETA</span><br />
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;">-Melhoria no carregamento do site</span></div>
<div>
<span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px; text-align: justify;"><br /></span></div>
<div style="text-align: justify;">
<span style="color: #242424; font-family: "titillium web" , sans-serif;"><span style="background-color: white; font-size: 14px;">Aprecio muito o M7admin por isso; está sempre verificando o sistema a procura de bugs e melhorias. E se quiser acompanhar só ir neste link: </span></span><span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><a href="https://www.m7admin.com.br/registro-de-atualizacoes.html">https://www.m7admin.com.br/registro-de-atualizacoes.html</a></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #242424; font-family: "titillium web" , sans-serif;"><span style="background-color: white; font-size: 14px;">Ahhhh.. para aqueles que perderam o post anterior referente ao tema </span></span><span style="background-color: #fff9e7; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px; text-align: left;">Criando um site com M7admin com WA 4 e WA RC </span><span style="background-color: white; color: #242424; font-family: "titillium web" , sans-serif; font-size: 14px;">em que falamos da instalação; o link é este: </span><span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><a href="https://webacappellashow.blogspot.com.br/2018/01/01-instalando-o-sistema-m7admin.html">https://webacappellashow.blogspot.com.br/2018/01/01-instalando-o-sistema-m7admin.html</a></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;">Dá uma olhadinha lá.</span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;">Então mãos a massa. Se quiser ver o vídeo deste post da demonstração do sistema direto no Youtube, basta clicar aqui.</span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;">Se quiser ver o vídeo por aqui mesmo no blog só por o vídeo abaixo pra rodar.</span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/E2W1G6N20z4/0.jpg" frameborder="0" height="315" src="https://www.youtube.com/embed/E2W1G6N20z4?feature=player_embedded" width="560"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Abraçoooooooo !!!!!!!!!!</div>
<div style="text-align: justify;">
<span style="font-size: 14px; text-align: left;"><span style="color: #242424; font-family: "titillium web" , sans-serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #242424; font-family: "titillium web" , sans-serif;"><span style="background-color: white; font-size: 14px;"><br /></span></span></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-37941562307473457352018-01-31T23:50:00.001-02:002018-06-10T19:38:11.846-03:0001 - Instalando o sistema M7admin<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7olMviQhSpyR5Yz3fcikT6CE8bvZIvvb86goGUmeReqsoDeWUQl-ZSacEUptSytSKA1S8FKI2J8x_o8-5j7W5YhnZPCpqwJCIZdoAlQ_nsHM0bbQ3ABJTApbhjzkbkUfz4yug0-mfq4o/s1600/01-imagem.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7olMviQhSpyR5Yz3fcikT6CE8bvZIvvb86goGUmeReqsoDeWUQl-ZSacEUptSytSKA1S8FKI2J8x_o8-5j7W5YhnZPCpqwJCIZdoAlQ_nsHM0bbQ3ABJTApbhjzkbkUfz4yug0-mfq4o/s640/01-imagem.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: </b></span></span><span style="background-color: white; font-size: 13px; text-align: left;"><b><span style="color: orange;">Criando um site com M7admin com WA 4 e WA RC</span></b></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> | </b></span></span><b style="font-family: "open sans", arial, sans-serif; font-size: 13px;"><span style="color: orange;">WA 4</span></b></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="text-align: justify;">
Olá pessoal, para quem não conhece o M7Admin é um sistema de administração de conteúdo para o Webacappella. Ou seja, ele possibilita que se os sites desenvolvidos pelo Webacappella podem ter um painel de controle, onde se podem fazer alterações, inclusões e exclusões de conteúdo on line.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para quem usa o Webacappella como um fonte de renda, ou seja, desenvolve websites para terceiros; com o M7Admin é possível fornecer ao cliente uma forma de manipular conteúdo no website diretamente pelo browser (navegador de internet).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Por ser um dos sistemas pioneiros nesse segmento já possui mais de 30 módulos. Alguns já liberados e outros em processo de atualização para sua mais nova versão. Sem contar os novos que vem por aí. Mas isso é surpresa.. hehehe.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O Webacappella Show é um dos testadores oficiais do M7Admin e trabalhamos duro por dias testando o sistema e seus módulo tanto no Webacappella Rc quanto no Webacappella 4 visando ao serem disponibilizados apresente o mínimo de bugs possíveis.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.Outra grande vantagem do M7Admin é que seu painel é GRÁTIS, de forma você pagar somente pelos módulos que realmente precisa usar. E pode usar o módulo em quantos sites quiser.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Exemplo: Se você precisa somente do módulo notícias em um projeto de website você compra somente o Módulo Notícias. E caso precise em outro novo projeto de website do módulo notícias e o módulo álbum de fotos, você só compra o módulo Álbum de fotos, pois já comprou o Módulo Notícias no projeto anterior e não precisa comprar novamente. Desta forma sai muito mais em conta não é mesmo, e não precisa empatar nenhum dinheiro em algo que não precisa usar de imediato.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Alguns dizem por aí que o Webacappella 4 está defasado, nós discordamos. Apenas a escolha em qual das versões do Webacappella utilizar depende muito do projeto do site a ser desenvolvido. Pois se for feito as versões para mobile com o Webacappella 4 ele passa nos teste do Google perfeitamente sem ser penalizado. E por isso vamos começar essa série de Postagens com o tema "<span style="background-color: #fff9e7; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px; text-align: left;">Criando um site com M7admin com WA 4 e WA RC" </span><span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px; text-align: left;">o qual estaremos criando um projeto de website tanto para WebAcappella RC quanto no Webacappella 4 utilizando o M7admin. E melhor! Comparando ambos pelos testes do Google. </span></div>
<br />
Pensando nisso o M7admin é compatível tanto para o Webacappella Rc quanto para o WebAcappella 4. Assim você pode colocar seus projetos feito em Webacappella 4 com painel administrativo sem ter que refazer todo o site.<br />
<br />
Um fato muito importante que o M7admin é o próprio desenvolvedor do sistema, não necessitando de pagar um programador externo para desenvolvimento. Dessa forma a resolução de bugs é muito mais ágil e o valor dos módulos bem mais barato sem dizer que, se sugeridos melhorias e comprovadas que atenderá a maioria dos clientes são feitas sem nenhum custo. Pois não necessita passar valores a terceiros.<br />
<br />
Resumindo, algumas vantagens em utilizar o M7Admin.<br />
<br />
<div style="text-align: left;">
</div>
<ul>
<li>Fácil instalação</li>
<li>Painel Grátis</li>
<li>Sistema pioneiro já com vários módulos disponíveis</li>
<li>Compatível com Wa4 e WaRc</li>
<li>Suporte que funciona</li>
<li>Melhorias frequentes</li>
<li>Você só compra os módulos que realmente vai precisar.</li>
<li>3 Níveis de usuário (Webmaster, administrador, editor)</li>
<li>Instala na pasta que desejar. Você não é obrigado a utilizar a pasta m7admin</li>
</ul>
<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Reforçando, nós do WebAcappella Show estaremos realizando uma série de postagens com o tema <span style="background-color: #fff9e7; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">Criando um site com M7admin com WA 4 e WA RC </span><span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">em que estaremos disponibilizando vídeos making off mostrando a criação de um website tanto no WA RC quanto no WA4 utilizando o M7Admin. </span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">Por serem vídeos making off, serão vídeos sem cortes e editação. Vocês verão exatamente o processo. Verão até se apresentar erro como contornar.</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">Acompanhe para não ficar de fora e aproveitar e pegar muitas dicas legais para utilizar em seus projetos.</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">Como início a essa série de postagem do tema </span><span style="background-color: #fff9e7; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">Criando um site com M7admin com WA 4 e WA RC</span><span style="background-color: #fff9e7; color: #888888; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"> </span><span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">iremos mostrar a instalação do sistema.</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">Caso deseje ver o vídeo diretamente no Youtube (com maior tamanho) <a href="https://www.youtube.com/watch?v=Cn_vm9h2Qd4" target="_blank">clique aqui</a>.</span><br />
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Cn_vm9h2Qd4/0.jpg" frameborder="0" height="315" src="https://www.youtube.com/embed/Cn_vm9h2Qd4?feature=player_embedded" width="560"></iframe></div>
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">Pois é isso aí turma do bem, no próximo post faremos uma apresentação do painel e suas funcionalidades. Acompanhe e fique por dentro.</span><br />
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span>
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;">Grande abraço a todos!!!!</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px;"><br /></span></div>
<div style="text-align: left;">
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-53490932812678761742018-01-01T01:24:00.000-02:002018-01-01T10:46:02.546-02:00Melhorando o rodapé no Webacappella Responsive<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKrC0Y6AqsdIkTaKxidHaXDIp-BWQK2dKaZ7HfuFKilZ545EsAK-sXtqEwR1R1v5Saab-IjSHBuN0iaC_eUZYwYnyqZqCBQUE61axt-hiNUeAp1RDuW3cGvwdV8-KZ13E4HN79F0RF14/s1600/RODAPE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKrC0Y6AqsdIkTaKxidHaXDIp-BWQK2dKaZ7HfuFKilZ545EsAK-sXtqEwR1R1v5Saab-IjSHBuN0iaC_eUZYwYnyqZqCBQUE61axt-hiNUeAp1RDuW3cGvwdV8-KZ13E4HN79F0RF14/s640/RODAPE.png" width="640" /></a></div>
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">WA RC </span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> </b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>É isso aí galera, mais uma lembrancinha quando estiver trabalhando com o WebAcappella Responsive. </b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>Acontece que apesar que o WA facilita muito nossa vida, não podemos esquecer de alguns ajustes que devemos fazer no intuito de melhorar o website quando acessado por aparelhos celulares.</b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>No vídeo abaixo mostra que com pouco trabalho poderemos melhorar muito o rodapé melhorando tanto o carregamento quanto a aparência. Afinal, queremos sempre fazer o melhor trabalho possível não é mesmo?</b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>Vai a dica!</b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/HDsDkW6Al9Q/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/HDsDkW6Al9Q?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Veja você mesmo em <a href="http://webacappellashow.com.br/">http://webacappellashow.com.br/</a></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-20059353902110469752017-12-19T01:54:00.001-02:002018-01-15T15:16:42.439-02:00Qual o primeiro passo ao iniciar o projeto no Web Acappella RC?<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5Z2JdVtUb99RjGtnUmfdJKUAAlTcBcWEtK_wsnIvz1l9HeoTsl3NXILI3Ck5hAddDrJeKeSCB-iSda7-zxyv6rIRGnnWCKVxVwuvS8KknVhX3mx0IJdi2vgecD-dAdwg58hhLwcYh30/s1600/meta+tag+idioma.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5Z2JdVtUb99RjGtnUmfdJKUAAlTcBcWEtK_wsnIvz1l9HeoTsl3NXILI3Ck5hAddDrJeKeSCB-iSda7-zxyv6rIRGnnWCKVxVwuvS8KknVhX3mx0IJdi2vgecD-dAdwg58hhLwcYh30/s640/meta+tag+idioma.jpg" width="640" /></a></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">WA RC | SEO</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> </b></span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">É isso aê galera!! Hoje vou fazer uma lembrança muito importante, inclusive para melhorar o SEO no seu site. </span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">O procedimento que vou falar aqui é super simples porém de muita importância, e deve ser o primeiro passo a fazer antes de qualquer coisa ao iniciar um projeto no WebAcappella Responsive.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Todos sabem que as met tags para SEO no site é uma ferramenta importante de comunicação entre o o site e os mecanismos de busca tais como o Google. </span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">São várias meta tags que podem ser inseridas, porém o Webacappella disponibiliza apenas 3 que podem sem personalizadas através das configurações pelo Webmaster. Algumas ele não disponibiliza e outras ele já insere automaticamente. Entre elas, não sei se poderia considerar como exatamente uma tag, mas é informar o idioma. </span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">E é disso que estou falando, o "<b>idioma</b>". Que é o atribudo HTML Lang. Este o Webacappella Responsive insere automaticamente no site. </span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Você pode ver após publicar o seu site e na hospedagem editar o arquivo index.html por exemplo. Está logo nas primeiras linhas.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; box-sizing: inherit; vertical-align: inherit;">O atributo HTML lang pode ser usado para declarar o idioma de uma página da Web ou uma parte de uma página da Web. </span><span style="background-color: white; box-sizing: inherit; vertical-align: inherit;">Isso é destinado a ajudar motores de busca e navegadores.</span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; box-sizing: inherit; font-family: inherit; vertical-align: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;">Os desenvolvedores do mundo inteiro juntamente com os desenvolvedores de browsers e outros , procuram ter a certeza que os navegadores, robôs de busca, leitores de tela e outros sistemas detectem da forma ideal o idioma correto.</span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;">Nós precisamos definir o idioma por alguns motivos:</span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;"><br /></span></span></div>
<ul style="box-sizing: border-box; margin: 0px 0px 40px 20px; padding: 0px;">
<li style="box-sizing: border-box; font-stretch: normal; line-height: 1.5; margin: 0px 0px 10px; padding: 0px; text-align: justify;"><span style="font-family: inherit;">Melhor pronunciação do texto em leitores de tela.</span></li>
<li style="box-sizing: border-box; font-stretch: normal; line-height: 1.5; margin: 0px 0px 10px; padding: 0px; text-align: justify;"><span style="font-family: inherit;">Para que os buscadores possam indexar o website no buscador do respectivo idioma. Por exemplo: não tem sentido o Google ranqueear muito bem um site em português no Google americano.</span></li>
<li style="box-sizing: border-box; font-stretch: normal; line-height: 1.5; margin: 0px 0px 10px; padding: 0px; text-align: justify;"><span style="font-family: inherit;">Selecionar as fonts corretas para mostrar na tela. Nesse caso para idiomas como Chinês.</span></li>
<li style="box-sizing: border-box; font-stretch: normal; line-height: 1.5; margin: 0px 0px 10px; padding: 0px; text-align: justify;"><span style="font-family: inherit;">Para que os browsers escolham o dicionário correto para a correção gramatical nativa em textos e formulários.</span></li>
<li style="box-sizing: border-box; font-stretch: normal; line-height: 1.5; margin: 0px 0px 10px; padding: 0px; text-align: justify;"><span style="font-family: inherit;">Renderizar a página rapidamente – o browser carrega o documento mais rápido quando o browser sabe qual o idioma nativo.</span></li>
</ul>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;">Pode-se definir de várias maneiras o idioma padrão no documento exibido ou em partes do texto para aqueles termos em idiomas diferentes.</span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;"><br /></span></span></div>
<div style="text-align: justify;">
<ul>
<li>Podemos definir diretamente via metatag nativa.</li>
<li>Pela Metatag podemos definir vários valores no atributo content.</li>
<li><span style="color: #494949; font-family: inherit; letter-spacing: -0.47px;">Via </span><strong style="box-sizing: border-box; color: #494949; font-family: inherit; letter-spacing: -0.47px; margin: 0px; padding: 0px;">HTTP Header.</strong></li>
<li><span style="color: #494949; font-family: inherit; letter-spacing: -0.47px;">Via atributo </span><strong style="box-sizing: border-box; color: #494949; font-family: inherit; letter-spacing: -0.47px; margin: 0px; padding: 0px;">lang</strong><span style="color: #494949; font-family: inherit; letter-spacing: -0.47px;"> nos elementos do HTML. (<b> e este que o Webacappella Responsive utiliza e é esse que estamos orientando a mudança) </b></span></li>
</ul>
</div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="color: #494949; letter-spacing: -0.47px;">Declarações de idioma baseados nestes atributos são importantes para a maioria das aplicações web hoje, que vão desde as </span>corretores ortográficos<span style="color: #494949; letter-spacing: -0.47px;"> embutidos diretamente nos browsers até leitores de telas que interpretam as páginas web.</span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;">E onde fazer esta configuração no Web Acappella Responsive?</span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><span style="font-family: inherit;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; letter-spacing: -0.47px;"><b><span style="font-family: inherit;">Muito simples, mas é de extrema importância em fazer antes de iniciar o seu projeto, pois caso quiser alterar depois do projeto pronto você tera´que ir depois em cada campo onde foram digitados os textos, inclusive botões , menu e tags e digitar o texto todo novamente. </span></b></span></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif; font-size: 17.6px; letter-spacing: -0.47px;"><br /></span></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 17.6px; letter-spacing: -0.47px;">Então vamos o que interessa:</span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 17.6px; letter-spacing: -0.47px;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 17.6px; letter-spacing: -0.47px;">Assim que criar o nome do projeto vá em Website settings na tela inicial:</span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 17.6px; letter-spacing: -0.47px;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2y7A3HOq0TSErdAtrSCcccMP2TFidcHfzmS_rkIwALpIAEsXfv9E3q3eBdVZsc-p_LUSnPFqWeu-CADUn11d281VQOpKaqSw6Onh_qeHwrN3J58meWHpBwVnloX-E6AUN_77sQR8VAag/s1600/idioma+correto+no+webaappella+rc.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="970" data-original-width="1272" height="488" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2y7A3HOq0TSErdAtrSCcccMP2TFidcHfzmS_rkIwALpIAEsXfv9E3q3eBdVZsc-p_LUSnPFqWeu-CADUn11d281VQOpKaqSw6Onh_qeHwrN3J58meWHpBwVnloX-E6AUN_77sQR8VAag/s640/idioma+correto+no+webaappella+rc.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 17.6px; letter-spacing: -0.47px;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 17.6px; letter-spacing: -0.47px;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif; font-size: 17.6px; letter-spacing: -0.47px;">Caso seu idioma não apareça na lista clique em +.</span></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif; font-size: 17.6px; letter-spacing: -0.47px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ZvzDWHd8rvNdUiCwsdmT9lI_QW2gyCyROS9e-yV5brjiNh1UAqTtWbuIYMIOF7WnLSfGP2UGk2O18hyC14nCgTjaFbvAVCMhGovSpIDb1KTjNDs_maSxXMw4Bgt5mq_0mJrq1dORZuM/s1600/idioma+clique+em+mais.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="312" data-original-width="848" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ZvzDWHd8rvNdUiCwsdmT9lI_QW2gyCyROS9e-yV5brjiNh1UAqTtWbuIYMIOF7WnLSfGP2UGk2O18hyC14nCgTjaFbvAVCMhGovSpIDb1KTjNDs_maSxXMw4Bgt5mq_0mJrq1dORZuM/s640/idioma+clique+em+mais.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<span style="color: #494949; font-family: "roboto" , "arial" , "helvetica" , sans-serif; font-size: 17.6px; letter-spacing: -0.47px;"><br /></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
No caso aqui estou supondo que o site será no idioma Português Brasil, então selecione na lista que aparecer.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGXRzNME_syl4-qXimglHCSVCanyEIJqOTQgEwY9rEnGHsuYxmGkK6dMgruMyBSIyOGdxIvZCtIRa2lDO5oIvTMFN6Cs4iOkxOYRFoy5w5KEdgKiBsMvuoDiJm6GeWGOOoNBGzWwb5pq0/s1600/idiomar+portugues.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="501" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGXRzNME_syl4-qXimglHCSVCanyEIJqOTQgEwY9rEnGHsuYxmGkK6dMgruMyBSIyOGdxIvZCtIRa2lDO5oIvTMFN6Cs4iOkxOYRFoy5w5KEdgKiBsMvuoDiJm6GeWGOOoNBGzWwb5pq0/s640/idiomar+portugues.jpg" width="510" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Logo em seguida aparecerá uma caixa para selecionar a linguagem que deseja nas mensagens e aplicações. Selecione então a desejada, No caso de nossa explicação será para sites do Brasil, então Português Brasil.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfkxnRLzWZjMTuMliA4DFcMDlUeEc1avjYY7X_68ESBvIF1q0UvQ5hsniaX52UbyuN4eO0aCtF34EbyA-bJN7EQVMUF2Rj2JXK1WkG5NiPdqLog8WvYu8tlte8TEbCVAmgOa7tNzy3z1c/s1600/idioma+selecao.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="176" data-original-width="556" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfkxnRLzWZjMTuMliA4DFcMDlUeEc1avjYY7X_68ESBvIF1q0UvQ5hsniaX52UbyuN4eO0aCtF34EbyA-bJN7EQVMUF2Rj2JXK1WkG5NiPdqLog8WvYu8tlte8TEbCVAmgOa7tNzy3z1c/s640/idioma+selecao.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Agora clique em cima do idioma desejado e logo após clicando na seta para cima o posicione na primeira posição</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimBmvXk7p-kZ8GkWNGEj4J3BmR4n_SnhXs-F_k5kbgtIme_rpXdqsCqO7Cf844Fm3ylNQtKTtMOFAzP7OSCFM25ec_1PWSSEk9oA724yeXMtAesS8QuQQERW0zPoeEG7svYdS-e0_PItA/s1600/idiomar+primeira+posi%25C3%25A7%25C3%25A3o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="355" data-original-width="848" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimBmvXk7p-kZ8GkWNGEj4J3BmR4n_SnhXs-F_k5kbgtIme_rpXdqsCqO7Cf844Fm3ylNQtKTtMOFAzP7OSCFM25ec_1PWSSEk9oA724yeXMtAesS8QuQQERW0zPoeEG7svYdS-e0_PItA/s640/idiomar+primeira+posi%25C3%25A7%25C3%25A3o.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Clique para Salvar e prontinho. Observe agora após publicar que no inicio do código foi definido o idioma escolhido por você.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbn0rYa3L-X1-cMVuvVqgzaO87h0cZjb0_n_-ms32Tx0x02LH3GVL3FKpryWxPa4qciqQo3OQzBQu6Lr0hXZcLVz1V0poSE_0kxvU2m3pZOeYN-zrGKs7ENXnby3iqfu5TkctHLuPZAA4/s1600/idioma+salva.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="188" data-original-width="1253" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbn0rYa3L-X1-cMVuvVqgzaO87h0cZjb0_n_-ms32Tx0x02LH3GVL3FKpryWxPa4qciqQo3OQzBQu6Lr0hXZcLVz1V0poSE_0kxvU2m3pZOeYN-zrGKs7ENXnby3iqfu5TkctHLuPZAA4/s640/idioma+salva.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Outra grande vantagem de fazer essas configurações é que as mensagens do WA como por exemplo de formulários estarão no idioma correto e também por exemplo; se for usar a barra de busca no menu aparecerá Pesquisa em vez de Seach </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXkum2OHWYjCigwVV90QtblHLAnXQ3bKsudczQmOjp8IkyN7vSWH5MZqgQM3MckIud9NLNjU8jXFV1sYKIyQZML8V30iIdO7ke1yO8UHuxyPtaTLv5NHgqSO_WbuLn3uPOl3y5kwdBfL0/s1600/idioma+pesquisa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="97" data-original-width="1174" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXkum2OHWYjCigwVV90QtblHLAnXQ3bKsudczQmOjp8IkyN7vSWH5MZqgQM3MckIud9NLNjU8jXFV1sYKIyQZML8V30iIdO7ke1yO8UHuxyPtaTLv5NHgqSO_WbuLn3uPOl3y5kwdBfL0/s640/idioma+pesquisa.jpg" width="640" /></a></div>
<div style="text-align: justify;">
. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pois é isso aí galera, se a lembrança foi boa.. sinta-se a vontade de compartilhar. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Um grande abraço.</div>
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-14357961787059017512017-11-12T20:49:00.000-02:002017-11-12T20:49:26.123-02:00Configure o envio de e-mails por SMTP e garanta a entrega <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s1600/PRESTASHOP+1.6.png" style="color: #3058aa; margin-left: 1em; margin-right: 1em; outline: none; text-decoration-line: none;"><img border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s640/PRESTASHOP+1.6.png" style="background: transparent; border: none; padding: 0px;" width="640" /></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;"><br /></span></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;">O envio de mensagens padrão do Prestashop é via PHP mail(), o qual produz mensagens de baixa qualidade, visto que o email do remetente não é autenticado antes do envio da mensagem.</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;"><br /></span></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;">Esta função do PHP é muito usada por SPAMMERS para envio de propaganda em massa com remetentes falsos. Apesar de você poder usar esta opção no Prestashop, recomendamos o uso do SMTP, pois o envio do email é autenticado, ou seja, sabe-se que o remente é quem diz ser, e os provedores de e-mail têm uma aceitação melhor para mensagens autenticadas.</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;"><br /></span></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;">Mensagens enviadas pela função mail() do PHP normalmente acabam indo para 'lixeira', 'pasta de spam' e muitas vezes <b>nem são entregues</b>.</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;"><br /></span></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;">Para a configuração correta de seu Prestashop para usar emails autenticados por SMTP, siga os passos abaixo:</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;"><br /></span></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px;"><br /></span></span>
<div style="background-color: #f4f4f5; border: 0px; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.6; margin-bottom: 0in; padding: 0px; vertical-align: baseline;">
1 - Logue no painel de administração do PrestaShop:</div>
<div style="background-color: #f4f4f5; border: 0px; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.6; margin-bottom: 0in; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: #f4f4f5; border: 0px; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.6; margin-bottom: 0in; padding: 0px; vertical-align: baseline;">
2 – Vá a “Parametros Avançados“ → “Email”:</div>
<div style="background-color: #f4f4f5; border: 0px; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.6; margin-bottom: 0in; padding: 0px; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZ0ijTz8xtWezgPjn1Oe3RGfCentFKYXNdewZyhoH9sqbMtwMcDffNj-Hpze9GPytiM9mrgjy2XTWTB77oq-JNkxgmT2pCKbi_Mu0Fxd-fVDwNEKensGi4mCzdGtujML9VB9dw7MYn54/s1600/paramnetros+avan%25C3%25A7ados+de+email+prestashop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="181" data-original-width="373" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZ0ijTz8xtWezgPjn1Oe3RGfCentFKYXNdewZyhoH9sqbMtwMcDffNj-Hpze9GPytiM9mrgjy2XTWTB77oq-JNkxgmT2pCKbi_Mu0Fxd-fVDwNEKensGi4mCzdGtujML9VB9dw7MYn54/s400/paramnetros+avan%25C3%25A7ados+de+email+prestashop.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;">3 – Localiza na página a área "Email"</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvLhbBnwmVXfltzkjPbOR_pmlwwvbPwxmla0mD6pNMp6x1yb6eqH0FRDX7pA_XF7BN7uV4RWq6WJL6cZG23W-dfg9QaA1yJRW-Tok2qx5VMT_KL6QA9TCh_rjyfcHENiEOjVSSXdKWb4/s1600/email.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="373" data-original-width="1064" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvLhbBnwmVXfltzkjPbOR_pmlwwvbPwxmla0mD6pNMp6x1yb6eqH0FRDX7pA_XF7BN7uV4RWq6WJL6cZG23W-dfg9QaA1yJRW-Tok2qx5VMT_KL6QA9TCh_rjyfcHENiEOjVSSXdKWb4/s640/email.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;">Assinale as opções </span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #555555; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 12px;">Definir meus próprios parâmetros de SMTP (Ex: smtp.seudominio.com)</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #555555; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 12px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #555555; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 12px;">Clique em Salvar</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #555555; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 12px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;">4 – Logo abaixo existe outro quadro para configurações de SMTP</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9NPqdrX_gBPSJ3WxxCjMnVvwtWXK4-j-i4noZkL6XAXxEbWQWUMQPrNm4FRXyXBR9zBXicZ8KX8sNJ3AAsVm1R2Ev5ycezWtxRHZxK7JlkK-EFp6kx73Cc1P8_PU-0-miXpW5qtyYHVU/s1600/CONFIG+SMTP.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="340" data-original-width="1057" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9NPqdrX_gBPSJ3WxxCjMnVvwtWXK4-j-i4noZkL6XAXxEbWQWUMQPrNm4FRXyXBR9zBXicZ8KX8sNJ3AAsVm1R2Ev5ycezWtxRHZxK7JlkK-EFp6kx73Cc1P8_PU-0-miXpW5qtyYHVU/s640/CONFIG+SMTP.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;">Preencha os campos conforme as configurações fornecidas pela sua hospedagem.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;">Clique em Salvar</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;">5 – Execute um envio de teste. Caso falhe, verifique as configurações :</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKRU8vUXuvVZsA6WwnStsQpcW_VW85d0amcq1wdW-X7F_2T5B8V3M65Qaj6VKLQRZjUnhJE6gaWE2S-4pEygpFiLGSrIvHr8Nw7gIiGRtWvQ41J1NE1aryimuTnmvCuFR6Usr5MZjB8QU/s1600/teste+smtp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="240" data-original-width="1061" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKRU8vUXuvVZsA6WwnStsQpcW_VW85d0amcq1wdW-X7F_2T5B8V3M65Qaj6VKLQRZjUnhJE6gaWE2S-4pEygpFiLGSrIvHr8Nw7gIiGRtWvQ41J1NE1aryimuTnmvCuFR6Usr5MZjB8QU/s640/teste+smtp.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #555555; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 12px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;">Pronto, agora seu Prestashop envia e-mails autenticados.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4f4f5; color: #4c5156; font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif; font-size: 15px;"><br /></span></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-34829601024361461082017-11-12T17:40:00.001-02:002017-11-14T16:41:20.657-02:00Inserindo efeito neve no site Webacappella<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ-DtMa-MeBy0-8_xGx5GyfnFOOxTqGPUc8sVNhorNHDYqkzmGit93waxkCR2M_OWBRHIe5wnLrkC321-7jn8uor94E4famdBINyRxza_oKNzS1mT5qLrC3fIliWyOCYYnRqzdHMuO95c/s1600/plugin+neve.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="632" data-original-width="1204" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ-DtMa-MeBy0-8_xGx5GyfnFOOxTqGPUc8sVNhorNHDYqkzmGit93waxkCR2M_OWBRHIe5wnLrkC321-7jn8uor94E4famdBINyRxza_oKNzS1mT5qLrC3fIliWyOCYYnRqzdHMuO95c/s640/plugin+neve.png" width="640" /></a></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">Plugins e códigos</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> <span style="color: orange;"> </span></b></span></span><br />
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b><span style="color: orange;"><br /></span></b></span></span>
<span style="background-color: white; color: #444444; font-family: "open sans" , serif; font-size: 15px; text-align: justify;">Está chegando o Natal, e muitos gostam de inserir alguns "flus flus" no webiste. </span><br />
<span style="background-color: white; color: #444444; font-family: "open sans" , serif; font-size: 15px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #444444; font-family: "open sans" , serif; font-size: 15px; text-align: justify;">E um ótimo e sugerido efeito é inserir um efeito de neve caindo sobre o website.</span><br />
<span style="background-color: white; color: #444444; font-family: "open sans" , serif; font-size: 15px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #444444; font-family: "open sans" , serif; font-size: 15px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #444444; font-family: "open sans" , serif; font-size: 15px; text-align: justify;">Pois é muito simples, veja só:</span><br />
<span style="background-color: white; color: #444444; font-family: "open sans" , serif; font-size: 15px; text-align: justify;"><br /></span>
<br />
<div style="text-align: justify;">
<span style="color: #444444; font-family: "open sans" , serif;"><span style="background-color: white; font-size: 15px;">A primeira coisa a fazer é baixar um arquivo js neste link: </span></span><span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><a href="https://webacappellashow.com.br/loja/home/20-efeito-neve-site-webacppella.html">https://webacappellashow.com.br/loja/home/20-efeito-neve-site-webacppella.html</a></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><br /></span></div>
<div style="text-align: left;">
<span style="font-size: 15px;">Depois faça upload para um local na hospedagem do site o qual vai inserir o efeito</span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;">Agora basta incluir o código abaixo no HEAD do website (caso deseje que apareça no site todo) ou apenas no Head da página que deseja o efeito.</span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><b>CÓDIGO</b></span></div>
<script src="<span style="color: #cc0000;">URL DO LOCAL DO ARQUIVO"</span>><br />
<div style="text-align: justify;">
</div>
</script><br />
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;">Substitua o texto em vermelho pela url onde foi inserido o código.</span></span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><br /></span></span>
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;">Exemplo: </span></span><br />
<br /></div>
<div style="text-align: justify;">
<script src="http://www.webacappellashow.com.br/neve/CodigoNeve.js"><br />
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;">
</span></span>
</script></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><br /></span></span>
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;">Para ver on line clique <a href="https://www.natalfeliz.com.br/">aqui</a></span></span><br />
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><br /></span></span>
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;">Muito simples não é mesmo?</span></span><br />
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><br /></span></span>
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;"><br /></span></span>
<span style="font-size: 15px; text-align: left;"><span style="color: #444444; font-family: "open sans" , serif;">Os créditos desta postagem vai para Maiochristopher</span></span></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-86269216307861061562017-09-17T19:14:00.002-03:002018-06-11T01:00:26.318-03:00Google + Botão Share (botão para compartilhamento) <div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2iQeKmmMNAmRzUvRuN55Kh-31LsNs0zD_CnAO1jFMaogMH1ZWFeonA5bSXEc1OAUh2Mlp19zhcupDuZMMPFt0JUTty3DufQq8d9sN4bAp47iYNWsTqJYctoObPaaSWh7bGxghTQA0gls/s1600/capa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2iQeKmmMNAmRzUvRuN55Kh-31LsNs0zD_CnAO1jFMaogMH1ZWFeonA5bSXEc1OAUh2Mlp19zhcupDuZMMPFt0JUTty3DufQq8d9sN4bAp47iYNWsTqJYctoObPaaSWh7bGxghTQA0gls/s640/capa.jpg" width="640" /></a></div>
<br />
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">Redes Sociais</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> <span style="color: orange;"> | WA 4</span></b></span></span><br />
<br />
<br />
<br />
<div style="background-color: white; border: 0px; color: #444444; font-family: "Open Sans", serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.6; margin-bottom: 15px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
O Google Plus possui um botão de partilha que permite aos seus visitantes compartilhar todo o conteúdo que achem interessante do seu Site .</div>
<div style="background-color: white; border: 0px; color: #444444; font-family: "Open Sans", serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.6; margin-bottom: 15px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
O botão partilhar não é igual ao botão Google +1 (tal como acontece no Facebook, em que o botão Compartilhar é diferente do botão Curtir).</div>
Para inserir o Botão Share do Google no seu site Webacappella é muito simples.<br />
<br />
O primeiro passo é configurar o botão e para isso <a href="https://developers.google.com/+/web/share/#quick-look" target="_blank">clique aqui</a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jXEXciKXywGF_cD9HUmq8mXS9T6fFWLze1928piWLv2ChdtLMBuUWEaTCYX8cAZ5WoWP6MoHm1u-Uhf-ndNc5ro1hf5DlCgxmsJeu9EBiiwzC3HgKlX7De_YEU1CaQtXwFjB9EA99ds/s1600/botao+google+shared+01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="703" data-original-width="773" height="582" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jXEXciKXywGF_cD9HUmq8mXS9T6fFWLze1928piWLv2ChdtLMBuUWEaTCYX8cAZ5WoWP6MoHm1u-Uhf-ndNc5ro1hf5DlCgxmsJeu9EBiiwzC3HgKlX7De_YEU1CaQtXwFjB9EA99ds/s640/botao+google+shared+01.jpg" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Agora basta configurar a seu gosto como gostaria que fosse mostrado o botão. A esquerda das opções de configuração é exibido uma prévia do botão.<br />
<br />
Sugerimos:<br />
<br />
Em <b>Nota</b> deixe marcado como Em Linha<br />
Em <b>Tamanho</b> deixe marcado Médio<br />
Em <b>Idioma</b> selecione o seu.<br />
Em<b> Dinâmico</b>. marque se for utilizar no WA RC e não marque se for usar no WA4<br />
Em <b>Analisar</b> tags marque como Padrão (ao carregar)<br />
Em <b>URL para compartilhar insira a </b>url que deseja que o internauta seja direcionado quando clicar no resultado. Ou seja na imagem que foi compartilhada no Google Plus. Exemplo abaixo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_tmiZ5NAanx9JFo8zCatSvKf7aBuK5aB8MDzq4OloaY_QpnBoQaQwqRgC20LM_SbtH75T14njQ4dgzPNp4LJOA_mNaTgrfYuijU8hrYlGuw-JjjeVX6W_GbmBguuB_vaioAR35Ou6L0/s1600/botao+google+shared+02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="456" data-original-width="397" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_tmiZ5NAanx9JFo8zCatSvKf7aBuK5aB8MDzq4OloaY_QpnBoQaQwqRgC20LM_SbtH75T14njQ4dgzPNp4LJOA_mNaTgrfYuijU8hrYlGuw-JjjeVX6W_GbmBguuB_vaioAR35Ou6L0/s640/botao+google+shared+02.jpg" width="552" /></a></div>
<br />
A imagem que será representada será a que o Google encontrar na página que mais se ao ambiente do post. Ou você pode configurar a imagem escolhida utilizando o mesmo código do Open Graph Facebook. Para saber mais <a href="https://webacappellashow.blogspot.com.br/2015/07/facebook-open-graph-imagem-compartilhar.html" target="_blank">clique aqui</a><br />
<br />
<br />
<br />
<br />
Após configurar copie o código que é disponibilizado no quadro abaixo da prévia<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_5lfDx32Tb0zAf7OohPGs6d6rxz8FuvvXeid1oio7raUB5ZV_uTfZzzu9Y28A1f5Z468BLtKhTvedCdF0XeTTaAq0IyZVjjYGAIQxYdcUnHQ46rJx3xVscrYIyGH2dt5IcXd5epWfozs/s1600/botao+google+shared+03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="671" data-original-width="768" height="554" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_5lfDx32Tb0zAf7OohPGs6d6rxz8FuvvXeid1oio7raUB5ZV_uTfZzzu9Y28A1f5Z468BLtKhTvedCdF0XeTTaAq0IyZVjjYGAIQxYdcUnHQ46rJx3xVscrYIyGH2dt5IcXd5epWfozs/s640/botao+google+shared+03.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
O nosso exemplo ficou como abaixo:<br />
<br />
<br />
<br />
<br />
<!-- Posicione esta tag onde você deseja que o botão compartilhar apareça. -->
<br />
<div class="g-plus" data-action="share" data-href="http://www.webacappellashow.com.br/website/botao-compartilhar-do-google-plus-no-site-webacappella.html">
</div>
<!-- Posicione esta tag depois da última tag do compartilhar. -->
<script type="text/javascript">
window.___gcfg = {lang: 'pt-BR'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<br />
<b><span style="color: orange;">IMPLEMENTANDO NO WEBACAPPELLA 4</span></b><br />
<b><span style="color: orange;"><br /></span></b>Para implantar no <b>Web Acappella 4</b> nas configurações acima citadas <b>NÃO</b> marque Dinâmico em configurações avançadas conforme dito acima. Deixe sem marcar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBMY4Q0mVlU4V-TwXXw6xr6TD7pXgMURQDVH51VgcxA1IrQw2UhlslatiGubhBnXF67oQgCsBjVq5qYovJbqTDwUFpKTUIuWSuQhaBYzaw-JxjoEaGJP989lGw_swF1Owbc_oRBu-DMI/s1600/botao+google+shared+04.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="275" data-original-width="335" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBMY4Q0mVlU4V-TwXXw6xr6TD7pXgMURQDVH51VgcxA1IrQw2UhlslatiGubhBnXF67oQgCsBjVq5qYovJbqTDwUFpKTUIuWSuQhaBYzaw-JxjoEaGJP989lGw_swF1Owbc_oRBu-DMI/s320/botao+google+shared+04.jpg" width="320" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Agora insira um elemento <b>código HTM</b>L no local que deseja que o Google Shared apareça<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTsk__4NKozCC72dzE-ztNRhxZbRUA1OudyrVxY_y5XHoDeZNRGRzfWJzja7WxD94m4_pj8Z9o_OZSwl8mdBP21kVphOWwXgduRCBxGZKo6LDyRPR_LmeY_TlUI5Nq6yW-bvN6Ua2HzAs/s1600/botao+google+shared+05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="571" data-original-width="588" height="622" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTsk__4NKozCC72dzE-ztNRhxZbRUA1OudyrVxY_y5XHoDeZNRGRzfWJzja7WxD94m4_pj8Z9o_OZSwl8mdBP21kVphOWwXgduRCBxGZKo6LDyRPR_LmeY_TlUI5Nq6yW-bvN6Ua2HzAs/s640/botao+google+shared+05.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
Cole o código no campo de código no elemento. Dê um nome para o elemento e <b>não</b> marque Ativar pré-visualização, pois a mesma não irá funcionar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaB_anp1b4DyChFgGbCJxhVccMFbMqF-C3aIaFk0qZZmQxUp1zA79LpaM0b8fC-YL3u3_9HfzBxTSXpbtfKwTrjwuJSlQTc1FLlheeiduIMDNgMaEIHJEr6RA_iR42ahJjnIEsJkAKvE/s1600/botao+google+shared+06.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="721" data-original-width="909" height="508" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaB_anp1b4DyChFgGbCJxhVccMFbMqF-C3aIaFk0qZZmQxUp1zA79LpaM0b8fC-YL3u3_9HfzBxTSXpbtfKwTrjwuJSlQTc1FLlheeiduIMDNgMaEIHJEr6RA_iR42ahJjnIEsJkAKvE/s640/botao+google+shared+06.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Na mesma janela do eleamento Código html clica na aba da régua. e defina altura e largura de acordo de como configurou na página do Google. No caso da configuração sugerida por nós a largura é 90px e altura 20 px.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHae99Ac-F4fSwb_MkhVRnRBEFv-VJppC3vmroED-LHSZlYHARc6_xD53g6tqx9EhUeSFcp7r8A0yLHCdyirzkJ9hOmAYLqj5ZOMc0y7_gBIvXh_fMZ_pDDMZuP8JmzDTLSn6_aIIi5E/s1600/botao+google+shared+07.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="270" data-original-width="545" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHae99Ac-F4fSwb_MkhVRnRBEFv-VJppC3vmroED-LHSZlYHARc6_xD53g6tqx9EhUeSFcp7r8A0yLHCdyirzkJ9hOmAYLqj5ZOMc0y7_gBIvXh_fMZ_pDDMZuP8JmzDTLSn6_aIIi5E/s640/botao+google+shared+07.jpg" width="640" /></a></div>
<br />
<br />
Infelizmente na página das configurações não fornecem estes dados, então o truque é publicar o site, printar a tela, igualar os elementos do print aos do projeto e depois encontrar o tamanho a ser usado.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjBG3G_TesiSfn1YohbrikoACNJl9CEgVwreH1H4FKHSyQxmHymWPE-TjFjzslxWs4kVU9Ew_y51nh9Fbyhu-yGhPuuEEFq_b4Ej5TFM9LRa-PtNAXd4YzGFCxbPBVaI5la2lokVO3-l0/s1600/botao+google+shared+08.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="619" data-original-width="1045" height="374" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjBG3G_TesiSfn1YohbrikoACNJl9CEgVwreH1H4FKHSyQxmHymWPE-TjFjzslxWs4kVU9Ew_y51nh9Fbyhu-yGhPuuEEFq_b4Ej5TFM9LRa-PtNAXd4YzGFCxbPBVaI5la2lokVO3-l0/s640/botao+google+shared+08.jpg" width="640" /></a></div>
<br />
<br />
Publique e pronto.<br />
<br />
Para ver on line no Webacappella 4 <a href="http://www.webacappellashow.com.br/wasevents/wa4//site-exemplo-wasevents-d.html" target="_blank">clique aqui</a>.<br />
<br />
<br />
<br />
<b><span style="color: orange;">IMPLEMENTANDO NO WEBACAPPELLA RC (WA5)</span></b><br />
<b><span style="color: orange;"><br /></span></b><b><span style="color: orange;"><br /></span></b>Já no <b>Wa Responsive</b> é necessário que nas configurações para gerar o código seja marcado como dinâmico.<br />
<br />
No seu projeto insira um box e um subbox, dentro do subbox insira um elemento <b>HTML</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78jjYbzBz0-o0HEKhuQWDTut5zN6pB8OdezkT5rQcMLi-sc-QgCAvoXXLQ6e5q4-hGp-N7f5rYT6jc4Pi1e4MvykwjdCCX_wm_SFGFXcQ8Uacu52LmwSgwTmISopudnVG-PfGLqIqLOA/s1600/botao+google+shared+09.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="766" data-original-width="1253" height="390" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78jjYbzBz0-o0HEKhuQWDTut5zN6pB8OdezkT5rQcMLi-sc-QgCAvoXXLQ6e5q4-hGp-N7f5rYT6jc4Pi1e4MvykwjdCCX_wm_SFGFXcQ8Uacu52LmwSgwTmISopudnVG-PfGLqIqLOA/s640/botao+google+shared+09.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Clique duas vezes no elemento para incluir o código, e insira acima de todo código a expressão <b><center></b>. Desta forma a visualização nos dispositivos móveis será centralizada<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bLZteTSWEtitHFbRNb7-Xf7WRN4UiTNhql87HCEDZDKE6puUU7khleJNgbCpHqC5o5Kz4syxMXGU5sYAqHJJsNvd9FFuUCFvwnLISvZJJ1vr0BigrvGjpS5oLXFP2M0yHznN0Dghz9s/s1600/botao+google+shared+10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="953" data-original-width="1215" height="500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bLZteTSWEtitHFbRNb7-Xf7WRN4UiTNhql87HCEDZDKE6puUU7khleJNgbCpHqC5o5Kz4syxMXGU5sYAqHJJsNvd9FFuUCFvwnLISvZJJ1vr0BigrvGjpS5oLXFP2M0yHznN0Dghz9s/s640/botao+google+shared+10.jpg" width="640" /></a></div>
.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Publique o site.<br />
<br />
Para ver on line no Webacappella Responsive <a href="http://www.webacappellashow.com.br/wasevents/warc/" target="_blank">clique aqui</a>.<br />
<br />
<b>.. ABRAÇOS</b><br />
<div>
<b><br /></b></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-14192349655047018412017-09-11T01:06:00.000-03:002017-09-11T01:08:47.329-03:00Google+ Badge<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcdBXJkynGp86GU0oJ_wmxbLvh8obc1QiIn2xx08HcbHDLV57ebuq6Mo8D9ZTHmb2dzgRijpZuxvZ4O0_0BnfP8VKhGp1dQgsfA_bJWXrGiUXSM5o1-ca7kcvZLCYH9a9JwLWfpTwOqQ/s1600/google+badge.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="624" data-original-width="1200" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcdBXJkynGp86GU0oJ_wmxbLvh8obc1QiIn2xx08HcbHDLV57ebuq6Mo8D9ZTHmb2dzgRijpZuxvZ4O0_0BnfP8VKhGp1dQgsfA_bJWXrGiUXSM5o1-ca7kcvZLCYH9a9JwLWfpTwOqQ/s640/google+badge.jpg" width="640" /></a></div>
<br />
<br />
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">Redes Sociais e SEO </span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<span style="background-color: white; font-family: "open sans" , "arial" , sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> <span style="color: orange;"> | WA 4</span></b></span></span><br />
<br />
<br />
<br />
O Google Badge é seu crachá do Google+ e é uma ótima maneria de aumentar o seu público no Google+ e obter mais recomendações para o seu site na busca do Google.<br />
<br />
Você não só terá beneficiando seu site como também seus usuários finais.<br />
<br />
O único fator contra é que eles nem sempre combinam bem com o que o site representa.<br />
<br />
Em sites de profissionais liberais, freelances e pessoas públicas tais como fotógrafo, cantor, candidato político e afins é uma ótima opção.<br />
<br />
Para implantar o Gaoogle Badge é necessário que tenha uma conta de perfil no Google +.<br />
<br />
Então o primeiro passo é fazer login em sua conta.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbt_GfaEtYysAiPBj9oABNpxiNTegIz-afSiwwpm_1Se7G7_XqB87HVimhELbpk5oAU_WmCKPY_sjlinrk256ZpfUYY6E4d9VaL0bq_BZ9xwu59_Q2ruUzXMMkzs3ITY-YUKGcZt1nC0/s1600/google-badge-01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="538" data-original-width="1270" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbt_GfaEtYysAiPBj9oABNpxiNTegIz-afSiwwpm_1Se7G7_XqB87HVimhELbpk5oAU_WmCKPY_sjlinrk256ZpfUYY6E4d9VaL0bq_BZ9xwu59_Q2ruUzXMMkzs3ITY-YUKGcZt1nC0/s640/google-badge-01.jpg" width="640" /></a></div>
<br />
Após logado vá para o seguinte link:<br />
<br />
<a href="https://developers.google.com/+/web/badge/">https://developers.google.com/+/web/badge/</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7St-FMpac5MT70zmxKg-sO3UTLh-GvQyugXJN8zAPkJ6gvM2Q-6u6UNP6RxZXjpOsflkIl9M-XTjrF5SVk5rxoMASt6TEAO0rY318dWlKT4YuRDzm0U3G5wk6X1GykOwEM_yyvOnB8i8/s1600/google-badge-02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="775" data-original-width="796" height="619" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7St-FMpac5MT70zmxKg-sO3UTLh-GvQyugXJN8zAPkJ6gvM2Q-6u6UNP6RxZXjpOsflkIl9M-XTjrF5SVk5rxoMASt6TEAO0rY318dWlKT4YuRDzm0U3G5wk6X1GykOwEM_yyvOnB8i8/s640/google-badge-02.jpg" width="640" /></a></div>
<br />
<br />
Agora basta configurar a seu gosto como gostaria que fosse mostrado o seu crachá do Google +.<br />
<br />
Sugerimos:<br />
<br />
Em <b>Recursos</b> deixe marcado como Emblema<br />
Em <b>Layout</b> deixe marcado com Retrato<br />
Em <b>largura</b> deixe no máximo como 320 (garantindo boa apresentação em dispositivo móveis)<br />
Em <b>tema</b> de cores vai depender das cores utilizadas nos seu site e o design (gosto muito do escuro)<br />
Foto da capa deixe assinalado se queira que a imagem da capa do seu google+ apareça em fundo, se não deixe como desativado.<br />
Em <b>frase</b> sugerimos deixar como Desativado.<br />
Em <b>Idioma</b> selecione o seu.<br />
<br />
Nas <b>opções avançadas</b> assinale a caixa de verificação em<b> Dinâmico</b>.<br />
Nas <b>opções avançadas</b> em Analisar tags marque como <b>Explícito</b><br />
<br />
Após configurar copie o código que é disponibilizado no quadro abaixo do crachá.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4mTeestPpz2BheGS0fgL6mX0MyOOH9ds8066l9RbYe8BXRIThnt3p5HqDRRg_bKB_FdJCn9VrIggeMyU1egAM4rw0DpvZpoUbFw1WH-ddM-Y8pXZZn-CmFdzwbXN50OFKIhjenR4CXY/s1600/google-badge-03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="700" data-original-width="775" height="572" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4mTeestPpz2BheGS0fgL6mX0MyOOH9ds8066l9RbYe8BXRIThnt3p5HqDRRg_bKB_FdJCn9VrIggeMyU1egAM4rw0DpvZpoUbFw1WH-ddM-Y8pXZZn-CmFdzwbXN50OFKIhjenR4CXY/s640/google-badge-03.jpg" width="640" /></a></div>
<br />
O nosso exemplo ficou como abaixo:<br />
<br />
<br />
<br />
<!-- Posicione esta tag no cabeçalho ou imediatamente antes da tag de fechamento do corpo. -->
<script async="" defer="" src="https://apis.google.com/js/platform.js">
{lang: 'pt-BR', parsetags: 'explicit'}
</script>
<!-- Posicione esta tag onde você deseja que o widget apareça. -->
<br />
<div class="g-person" data-href="//plus.google.com/u/0/112476079442151626269" data-rel="author" data-showtagline="false" data-theme="dark" data-width="320">
</div>
<!-- Posicione este retorno de chamada onde achar necessário. -->
<script type="text/javascript">gapi.person.go();</script>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<b><span style="color: orange;">IMPLEMENTANDO NO WEBACAPPELLA 4</span></b><br />
<b><span style="color: orange;"><br /></span></b>
Para implantar no <b>Web Acappella 4</b> nas configurações acima citadas <b>NÃO</b> marque Dinâmico em configurações avançadas conforme dito acima. Deixe sem marcar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhami0mDCwGhaaFVihOUl641SsClBvqCd2k-JUpQb8ie_eGH7uqKcy1BDTjOYqxdb0xaIdbxPi6weetQqXOJvWR0AvsLnq9jBRtZPzdwiRD-qOHcv2-go_LqHs4rCrb5viBPXizD5VbEK4/s1600/GOOGLE+BADGE+WA4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="189" data-original-width="366" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhami0mDCwGhaaFVihOUl641SsClBvqCd2k-JUpQb8ie_eGH7uqKcy1BDTjOYqxdb0xaIdbxPi6weetQqXOJvWR0AvsLnq9jBRtZPzdwiRD-qOHcv2-go_LqHs4rCrb5viBPXizD5VbEK4/s320/GOOGLE+BADGE+WA4.jpg" width="320" /></a></div>
Agora insira um elemento <b>código HTM</b>L no local que deseja que o Google Badge apareça<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv6LGwFxpgbTg4OsS1ts89YG7dlqmdSyCfK9HZhhuMeP_Q0NVX2E5XLNjB-bUCYSop8u77-FvnRtMs24CItzCCfR-JY1PZkGZoDZlXLMmxRPo3Dwzot5Pz44ZY4ux0w2N1uVMJtEWQiXg/s1600/google-badge-05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="623" data-original-width="935" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv6LGwFxpgbTg4OsS1ts89YG7dlqmdSyCfK9HZhhuMeP_Q0NVX2E5XLNjB-bUCYSop8u77-FvnRtMs24CItzCCfR-JY1PZkGZoDZlXLMmxRPo3Dwzot5Pz44ZY4ux0w2N1uVMJtEWQiXg/s640/google-badge-05.jpg" width="640" /></a></div>
<br />
<br />
<br />
Cole o código no campo de código no elemento. Dê um nome para o elemento e <b>não</b> marque Ativar pré-visualização, pois a mesma não irá funcionar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzCwwadM2yovhcxugeO6YM2vByTP7GphsSmppiEJqhiUvc0cqhJKN1xpS4O5iiSrBSwVMSl6dAXi54GDJekaBGhyphenhyphenxr6PlYOfVEwKFnmk7WCALmpnFpOeMgsxQFKaejQB40usDSORa2Zw/s1600/GOOGLE+BADGE+WA4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="949" data-original-width="1170" height="514" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzCwwadM2yovhcxugeO6YM2vByTP7GphsSmppiEJqhiUvc0cqhJKN1xpS4O5iiSrBSwVMSl6dAXi54GDJekaBGhyphenhyphenxr6PlYOfVEwKFnmk7WCALmpnFpOeMgsxQFKaejQB40usDSORa2Zw/s640/GOOGLE+BADGE+WA4.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Na mesma janela do eleamento Código html clica na aba da régua. e defina altura e largura com o mesmo valor que definiu nas configurações ao criar o Google Badge.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir78WTV8ECr0ymLX75P9G1k0TUK9CAVYDLLu4CxSMIL2kqb-5lTH5kjDkFCsAz00goe3smUJkoX_jmnx5F31IVrH1NdPDHTY9kpNwTPru4aKG9ecsyOI_DkLRmZQ4fo8-jn8pPG2P7rQ8/s1600/medidas+google+badge.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="320" data-original-width="504" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir78WTV8ECr0ymLX75P9G1k0TUK9CAVYDLLu4CxSMIL2kqb-5lTH5kjDkFCsAz00goe3smUJkoX_jmnx5F31IVrH1NdPDHTY9kpNwTPru4aKG9ecsyOI_DkLRmZQ4fo8-jn8pPG2P7rQ8/s640/medidas+google+badge.jpg" width="640" /></a></div>
Publique e pronto.<br />
<br />
Para ver on line no Webacappella 4 <a href="http://www.webacappellashow.com.br/inserindo-cracha-google-badge.html" target="_blank">clique aqui</a>.<br />
<br />
<br />
<br />
<b><span style="color: orange;">IMPLEMENTANDO NO WEBACAPPELLA RC (WA5)</span></b><br />
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b>
Já no <b>Wa Responsive</b> é necessário que nas configurações para gerar o código seja marcado como dinâmico.<br />
<br />
No seu projeto insira um box e um subbox, dentro do subbox insira um elemento <b>HTML</b><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1xdiho8HFBvXTj4l6BJiaS0THDFA7SFT1ORIlEyj0hHN0_P0a2mSaASVXsITSfuj67NqYMvYbh74Cxw4Ap3OLb36uCC4nbaOkKzu00Mh2BGc4WwtdREvp_Iw6RP-Wibu9x_y7DvEgzQ/s1600/google-badge-wa-rc.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="652" data-original-width="1228" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1xdiho8HFBvXTj4l6BJiaS0THDFA7SFT1ORIlEyj0hHN0_P0a2mSaASVXsITSfuj67NqYMvYbh74Cxw4Ap3OLb36uCC4nbaOkKzu00Mh2BGc4WwtdREvp_Iw6RP-Wibu9x_y7DvEgzQ/s640/google-badge-wa-rc.jpg" width="640" /></a></div>
<br />
<br />
Clique duas vezes no elemento para incluir o código, e insira acima de todo código a expressão <b><center></b>. Desta forma a visualização nos dispositivos móveis será centralizada.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwl1EyZ3tHXW1NfooRYL1wjOgKkahD8k5EDZkzO0GUELXmXDQkP0PMq3C9mPVsKFs8ZVT50T4YROWIVS3oFJD8c7RduQ9WIJKgI5cUCcb1EvOMebF3IHvZv9_3beWmvQXYswGLwipFUfg/s1600/google-badge-wa-responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="960" data-original-width="1244" height="490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwl1EyZ3tHXW1NfooRYL1wjOgKkahD8k5EDZkzO0GUELXmXDQkP0PMq3C9mPVsKFs8ZVT50T4YROWIVS3oFJD8c7RduQ9WIJKgI5cUCcb1EvOMebF3IHvZv9_3beWmvQXYswGLwipFUfg/s640/google-badge-wa-responsive.jpg" width="640" /></a></div>
<br />
Publique o site.<br />
<br />
Para ver on line no Webacappella Responsive <a href="http://www.webacappellashow.com.br/website/inserindo-cracha-google-no-website-webacappella.html" target="_blank">clique aqui</a>.<br />
<br />
<b>É ISSO AÍ GALERA. FICA A DICA.. ABRAÇOS</b><br />
<br />
<br />
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-46451596284583267272017-06-18T16:57:00.000-03:002017-06-18T23:51:41.713-03:00FACEBOOK | Page Plugin | Modo fácil e rápido<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7pSYVPMDVcEJpcvuVqBDtIvEIx77FJfUShslbEM6yhYCIBHxXR-hZL8wTZ0aWWIflisl5M2QVH9ic6Wbn_poxseVAoyAaS7cZbHUfKMAMouYX0L2ZI7MCIadJDkjbidNG-rTY6NEssY/s1600/plguinpagefacebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7pSYVPMDVcEJpcvuVqBDtIvEIx77FJfUShslbEM6yhYCIBHxXR-hZL8wTZ0aWWIflisl5M2QVH9ic6Wbn_poxseVAoyAaS7cZbHUfKMAMouYX0L2ZI7MCIadJDkjbidNG-rTY6NEssY/s640/plguinpagefacebook.png" width="640" /></a></div>
<br />
<br />
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans", arial, sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">Redes Sociais</span></b></span></span></div>
<div style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans", arial, sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Revisado e Melhorado</span></b></span></span></div>
<span style="background-color: white; font-family: "open sans", arial, sans-serif; font-size: 12px; line-height: 20px;"><span style="font-size: 13px;"><b>VERSÃO:<span style="color: orange;"> WA RC</span> <span style="color: orange;"> | WA 4</span></b></span></span><br />
<br />
<br />
Como muitos já sabem o Facebook disponibiliza vários plugins para implementar em seu site através do Facebook Developers.<br />
<br />
<a href="https://developers.facebook.com/">https://developers.facebook.com/</a><br />
<br />
<br />
Hoje iremos falar do Page Plugin (Plugin de Página) . Algo semelhante a isto:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70JMsAWjdk_MfpF1qbziVOlqGrVAvo0_XTu0-Lw-Dvgf3AxK1IZyGj9Ex3_-QdTyDVBUwOA28GPL7-t8y_vM2YjTjB2ib1rxDnYaZmk2FwZ10G-Od1UGV0QZdXOR6C7QHK102QeoDc2g/s1600/-a03.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70JMsAWjdk_MfpF1qbziVOlqGrVAvo0_XTu0-Lw-Dvgf3AxK1IZyGj9Ex3_-QdTyDVBUwOA28GPL7-t8y_vM2YjTjB2ib1rxDnYaZmk2FwZ10G-Od1UGV0QZdXOR6C7QHK102QeoDc2g/s400/-a03.JPG" width="400" /></a></div>
<br />
<br />
<br />
Para configurar seu Plugin Page acesse este link: <a href="https://developers.facebook.com/docs/plugins/page-plugin">https://developers.facebook.com/docs/plugins/page-plugin</a> , configurar a seu gosto e gerar o código e aplicar no WebAcappella<br />
<br />
Apesar de você pode a configurar a seu gosto, vou falar neste post a maneira mais usada em websites.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIygNc9qMsnbzkMqZ7m260ZZHoJk4aWX7LRJOsJE5YJ7VgqPrIbmH3GC8XptesJj4SJaECpbgb7JVbyIKAP_dIf35FCQ996-niWbwMadIV-84rNaQCvnyqxBlDLjjB-i_6QwCkgatWt8/s1600/pageplugin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="621" data-original-width="723" height="548" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIygNc9qMsnbzkMqZ7m260ZZHoJk4aWX7LRJOsJE5YJ7VgqPrIbmH3GC8XptesJj4SJaECpbgb7JVbyIKAP_dIf35FCQ996-niWbwMadIV-84rNaQCvnyqxBlDLjjB-i_6QwCkgatWt8/s640/pageplugin.jpg" width="640" /></a></div>
<br />
<br />
<br />
<br />
Acima a imagem mostra os campos os quais iremos personalizar . Vamos comentar campo a campo.<br />
<br />
<b>URL DA PÁGINA DO FACEBOOK</b>: Neste campo você vai inserir a URL da FANPAGE<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKB4vZLKZQ_aouErSbGoLGelDuwMbz3SSUKO0KIsTmBhBTgTVQHsgLgnRkNOCzF0KHpxteFyjW3u5Kr2OcUcPeJKh0LB5bPcUpDrLIw3g2iMA9xJjW_t95kj5RrjZEHip5-UXsDadvq6Q/s1600/urlfanpage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="410" data-original-width="1179" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKB4vZLKZQ_aouErSbGoLGelDuwMbz3SSUKO0KIsTmBhBTgTVQHsgLgnRkNOCzF0KHpxteFyjW3u5Kr2OcUcPeJKh0LB5bPcUpDrLIw3g2iMA9xJjW_t95kj5RrjZEHip5-UXsDadvq6Q/s640/urlfanpage.jpg" width="640" /></a></div>
<br />
<br />
<b>GUIA</b>: Neste campo se deixar como timeline, serão mostrados as postagens realizados na linha do tempo da página. As postagens vão aparecer dentro da altura determinada<br />
<br />
Você pode usar para ser mostrado a linha do tempo, eventos e ou mensagens.<br />
<br />
Portanto não fica uma visualização muito legal no website. E se você tem intenção de usar este plugin no rodapé, usando o timeline , eventos ou mensagens fica pior ainda.<br />
<br />
Aconselho limpar esse campo deixando-o em branco.<br />
<br />
Observe na imagem abaixo que removendo a visualização ficou bem mais agradável<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBKKK1ECCPXKsaWM9T-rlJNA5Fub1ylmGA-y0aHbJBI1sfea4zMe4kqAgYhSazD_S6l1wSeh3Kej8tOtzqBFptqJISDvBHQtV83-MKvrhuan6ofzrhwIuD6Ua6-LpdPTmMncRNnLRTjaw/s1600/semtimeline.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="543" data-original-width="708" height="490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBKKK1ECCPXKsaWM9T-rlJNA5Fub1ylmGA-y0aHbJBI1sfea4zMe4kqAgYhSazD_S6l1wSeh3Kej8tOtzqBFptqJISDvBHQtV83-MKvrhuan6ofzrhwIuD6Ua6-LpdPTmMncRNnLRTjaw/s640/semtimeline.jpg" width="640" /></a></div>
<br />
<b>LARGURA:</b> Neste campo você informa a largura que deseja para o plugin page. Mínimo de 180 e máximo de 500 px. Eu gosto muito de utilizar 500 px<br />
<br />
<b>ALTURA:</b> Neste campo você informa a altura que deseja para o plugin page. Minimo de 70 px<br />
Caso você queira que os rostos de amigos apareçam sem que mostre uma barra de rolagem no plugin, procure utilizar 300 px na altura<br />
<br />
<br />
<b>USAR CABEÇALHO PEQUENO: </b> Caso você assinale esta opção será cortado ao meio a altura da imagem da capa da sua fanpage.<br />
<br />
<b>OCULTAR FOTO DA CAPA</b>: Se assinalar esta opção não será mostrado a imagem da capa da fanpage; o que não fica muito bonito.<br />
<br />
<b>ADAPTAR À LARGURA DO CONTÊINER DO PLUGIN: </b>Deixe esta opção assinalada pois assim será forçado o ajuste na sua área de implementação do código no seu site.<br />
<br />
<b>MOSTRAR ROSTOS DOS AMIGOS: </b>Caso queira que seja mostrado o rosto dos amigos deixe esta opção marcada. Esta opção é interessante pois por exemplo: Se você está logado no Facebook e visita um website onde tem o plugin page do Facebook implantado. Ali serão mostrados a quantidade e o rostos de alguns amigos seu que já curtiram a Fanpage. Dependendo dos amigos abre até uma curiosidade de se visitar a fanpage.<br />
<br />
Após tudo configurado clique em <b>Obter código</b><br />
<b><br /></b>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhF7-7K2Uf0T0NENl56Ch2bardWFH0Zy5EFHGtsh-cgiWRGugxJMIAnywtryLjA3H-dN-89tea87oet_xFCosclHv_xbQ0m3KHZDENHDJq-GaLHZv5X2tLo7hi-BtVoU_z-dew_hLkU3s/s1600/obter+codigo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="507" data-original-width="725" height="446" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhF7-7K2Uf0T0NENl56Ch2bardWFH0Zy5EFHGtsh-cgiWRGugxJMIAnywtryLjA3H-dN-89tea87oet_xFCosclHv_xbQ0m3KHZDENHDJq-GaLHZv5X2tLo7hi-BtVoU_z-dew_hLkU3s/s640/obter+codigo.jpg" width="640" /></a></div>
<b><br /></b>
Você pode usar o código fornecido em SDK do JavaScript ou o código de implantar como iFrame.<br />
Aconselho a primeira opção.<br />
<br />
Serão mostrado dois códigos.<br />
<br />
O 1º seria para ser inserido no head do website ou da página do seu website a qual seria implantado o plugin<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-gqWs_ummXt70piw855oBzWWHca8xIUaPYYmiinsNfsWo6ulZeS_JqWnvj__IZqcU3zD0xOAqw_XMVrfEYvwwzU8CYKxzh6q-7WU0q0vOGcbVbvcAVfTfsK8w8drsksfJ_RWJ5IxX64/s1600/codigo1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="677" data-original-width="721" height="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-gqWs_ummXt70piw855oBzWWHca8xIUaPYYmiinsNfsWo6ulZeS_JqWnvj__IZqcU3zD0xOAqw_XMVrfEYvwwzU8CYKxzh6q-7WU0q0vOGcbVbvcAVfTfsK8w8drsksfJ_RWJ5IxX64/s640/codigo1.jpg" width="640" /></a></div>
<br />
<br />
<br />
E o 2º seria para ser inserido no local da página do seu website onde é para aparecer o plugin page finalizado.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmo8vTTfcnAcYmRD5W4a1PYrkAJBgvX3rM2gnQ5TMt2NT9fjLTETud7cR1hnkM3-4QC6xlDHY8-lojFkey538b__0SQy0xCvCHjYOmsPYsERsCsdrvU1o4pEi060nIhrfCZvw69QxpmWk/s1600/codigo2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="672" data-original-width="718" height="594" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmo8vTTfcnAcYmRD5W4a1PYrkAJBgvX3rM2gnQ5TMt2NT9fjLTETud7cR1hnkM3-4QC6xlDHY8-lojFkey538b__0SQy0xCvCHjYOmsPYsERsCsdrvU1o4pEi060nIhrfCZvw69QxpmWk/s640/codigo2.jpg" width="640" /></a></div>
<br />
<br />
Portanto você pode simplesmente utilizar os dois código juntos na área a qual deseja que o plugin page apareça. Inserindo o primeiro código e o segundo logo em seguida na área de implementação.<br />
<br />
Então irei mostrar desta forma como implementar tanto no Webacappella RC como no Webacappella 4<br />
<br />
<br />
Então no caso usaremos como exemplo os códigos para implementar o plugin page da Fanpage do Webacappella Show o qual juntando os dois códigos, o código a implementar fiaria assim:<br />
<br />
<br />
<br />
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.9&appId=1438711606356463";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-page" data-href="https://www.facebook.com/webacappellashow/" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/webacappellashow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/webacappellashow/">WebacappellaShow</a></blockquote></div><br />
<br />
<br />
<h2 style="text-align: left;">
<b><span style="color: orange;">IMPLEMENTANDO NO WA 4</span></b></h2>
<b><span style="color: orange;"><br /></span></b>
Na página do site em que deseja que o plugin page aparece acione a opção: INSERIR >> CÓDIGO HTML<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3lgaXCmNSaEkh0emcXrAvMzwwFt4vp2ySY7P3Kq3q0ggy0ZZMYzy4AUoO-VgvOLP9NPMYjdRPf8-fd1YIJbXBfgtvCR8PprG8iTr6-c1n5GuFjZRZVh2N3BcBK-IHOGDV4tRIX8TwTSc/s1600/inserirhtmlwa4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="613" data-original-width="808" height="486" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3lgaXCmNSaEkh0emcXrAvMzwwFt4vp2ySY7P3Kq3q0ggy0ZZMYzy4AUoO-VgvOLP9NPMYjdRPf8-fd1YIJbXBfgtvCR8PprG8iTr6-c1n5GuFjZRZVh2N3BcBK-IHOGDV4tRIX8TwTSc/s640/inserirhtmlwa4.jpg" width="640" /></a></div>
<br />
<br />
E cole o código na área conforme imagem<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWxhC3AMZYEKucKZfGejy0cytxY4V8FTuMcy6-oLGJHMnZufHKQ7tbP508oTEyt-8-KnH4S4lUhJASsVOh44fT_rl5mb1Z-m7xVzPuwv1h3npvLvQRhr9XTftQYBWfW6n0odaXNzCRDg/s1600/codigohtmlwa4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="562" data-original-width="522" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWxhC3AMZYEKucKZfGejy0cytxY4V8FTuMcy6-oLGJHMnZufHKQ7tbP508oTEyt-8-KnH4S4lUhJASsVOh44fT_rl5mb1Z-m7xVzPuwv1h3npvLvQRhr9XTftQYBWfW6n0odaXNzCRDg/s640/codigohtmlwa4.jpg" width="590" /></a></div>
<br />
Depois clique na guia da régua e configure a largura e altura com os mesmos valores utilizados na criação do plugin.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJACMz8vXlnBapbu5pxZjVMacMzxPEfvjs7p3_hqFTitOdYVM8iKBh2aNAryU3dJ5aYNpL_V9QKiWaCXO-8q3L-u2D2gKfFwcs8AzwD8W8cviy71ItuCFCVnWxV8vMh_-1CGF-LRrNNYc/s1600/regua.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="270" data-original-width="530" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJACMz8vXlnBapbu5pxZjVMacMzxPEfvjs7p3_hqFTitOdYVM8iKBh2aNAryU3dJ5aYNpL_V9QKiWaCXO-8q3L-u2D2gKfFwcs8AzwD8W8cviy71ItuCFCVnWxV8vMh_-1CGF-LRrNNYc/s640/regua.jpg" width="640" /></a></div>
<br />
Depois só arrastar a área do código para o local desejado na página do seu site<br />
<br />
Para ver o exemplo on line <a href="http://www.webacappellashow.com.br/templates/lavanderia/index.html" target="_blank">clique aqui</a>.<br />
<br />
<h2>
<b><span style="color: orange;">IMPLEMENTANDO NO WA RC</span></b></h2>
<b><span style="color: orange;"><br /></span></b>
Na página do site em que deseja que o plugin page aparece insira um subbox dentro do box onde será implementado o código<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouGVT_THoRDLje8CsbrvpAqFbY59z89X3L5PF71CyWLEAk5af79Ur0zKAKmnCiL1jLfzP2-mZSG0QzZZYHuQBDpiU6F83XZ7ZgaVGUc3QaBJiHJD3CsXpe0wjgtvd3KMV5MMfcz12Dh4/s1600/box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="454" data-original-width="574" height="504" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouGVT_THoRDLje8CsbrvpAqFbY59z89X3L5PF71CyWLEAk5af79Ur0zKAKmnCiL1jLfzP2-mZSG0QzZZYHuQBDpiU6F83XZ7ZgaVGUc3QaBJiHJD3CsXpe0wjgtvd3KMV5MMfcz12Dh4/s640/box.jpg" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Depois insira o pelo menu a área de html<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM88XQK_DVZteHEWnsYv5wDd8IduUuj4T1MPYA2PqyCSDPdo7gEWQmEM-sDG2btARCfx3pGHbkf-vz9ssy5cLZFhpPzVcq1Sxo7oahwaBu9LMhN-dnSXBre41OgueWEtu5gyVswb_xHJk/s1600/html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="874" data-original-width="1168" height="474" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM88XQK_DVZteHEWnsYv5wDd8IduUuj4T1MPYA2PqyCSDPdo7gEWQmEM-sDG2btARCfx3pGHbkf-vz9ssy5cLZFhpPzVcq1Sxo7oahwaBu9LMhN-dnSXBre41OgueWEtu5gyVswb_xHJk/s640/html.jpg" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Porém iremos fazer uma pequena alteração no código para ficar melhor no WARC.<br />
<br />
<br />
Como pode observar abaixo, inserimos <center> no início para que o plugin page centralize dentro da área onde foi inserido o código.<br />
<br />
<br />
<b><span style="color: red;"><center></span></b><br />
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.9&appId=1438711606356463";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-page" data-href="https://www.facebook.com/webacappellashow/" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/webacappellashow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/webacappellashow/">WebacappellaShow</a></blockquote></div><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
E colamos o código na área de implementação HTML a qual definimos na página do website.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXew35ohekKJwAiTKZQjcdS591TaCzqbI2zWWouvg9RApEZiUyaQIwvkmAA0_b1b6f1Mtcd8apNKyUgE_XcnrExcgnfaD9q5LCF-hmRtw8ukUWFxJV5rJEnoOLHVFtDE8WGr6DZweTZ90/s1600/implantado.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="784" data-original-width="823" height="608" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXew35ohekKJwAiTKZQjcdS591TaCzqbI2zWWouvg9RApEZiUyaQIwvkmAA0_b1b6f1Mtcd8apNKyUgE_XcnrExcgnfaD9q5LCF-hmRtw8ukUWFxJV5rJEnoOLHVFtDE8WGr6DZweTZ90/s640/implantado.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<br />
Para ver on line nosso exemplo <a href="http://www.webacappellashow.com.br/templates/wassistemas/faleconosco.html" target="_blank">clique aqui</a>.<br />
<br />
<br />
Um detalhe importante é que dependendo dos scripts utilizado em seu site possa ser que em vez de usar os dois códigos fornecidos pelo Facebook Developers somente na área html; tenha que separar e utilizar o primeiro no head da página ou até mesmo do website.<br />
<br />
<br />
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-55998684885864372992017-05-29T00:24:00.002-03:002017-05-29T00:24:59.861-03:00Baixando vídeo diretamente do Facebook<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbMpsw3i9rQ2MV-VMNPd7mpjkqgSzpxMycLMO76O5UUAApmjAunj2rsa9HSEjkWrZUn6npSGIobIsRai97D_SpobSfYbGJ14kNEV6LeGf_m5YbXuBvFo1XHTB278zSzQsqZpnj7aGdb4/s1600/facebookvideo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbMpsw3i9rQ2MV-VMNPd7mpjkqgSzpxMycLMO76O5UUAApmjAunj2rsa9HSEjkWrZUn6npSGIobIsRai97D_SpobSfYbGJ14kNEV6LeGf_m5YbXuBvFo1XHTB278zSzQsqZpnj7aGdb4/s640/facebookvideo.jpg" width="640" /></a></div>
<br />
<br />
<br />
A maioria das áreas administrativas para Webacappella, para utilizar vídeos necessita que o vídeo esteja postado no Youtube.<br />
<br />
Então os vídeos que estão no Facebook tem que ser baixados para o computador e postados no Youtube.<br />
<br />
Existem vários programas e sites externos que informando a url do vídeo fazem esta tarefa.<br />
<br />
Mas para aqueles que não saibam existe uma forma super simples de se baixar os vídeos diretamente do Facebook.<br />
<br />
Então vai a dica.<br />
<br />
Vamos como exemplo baixar um dos vídeos desta página:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMiof_PxhyphenhyphenOV0lIGubDgJ1zeqAJKlQPYU6Ar46i77c3MEbPBk3PsLnxngSqwDPJ8E5Gzl0TIQV6Xr7C-7UEFiLYBHzld3TeJLse4aYKjtPjTF3DBYMKnc77WK0CmwXnCqCIs1izt8uZc/s1600/paginavideo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="794" data-original-width="1048" height="484" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMiof_PxhyphenhyphenOV0lIGubDgJ1zeqAJKlQPYU6Ar46i77c3MEbPBk3PsLnxngSqwDPJ8E5Gzl0TIQV6Xr7C-7UEFiLYBHzld3TeJLse4aYKjtPjTF3DBYMKnc77WK0CmwXnCqCIs1izt8uZc/s640/paginavideo.jpg" width="640" /></a></div>
<br />
Agora vem o truque super simples.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS15uzTr-0PhbPGXjZj0Wi-z5Pw9V-9fO4tEzhaJ9VS_8zudiDo3r8q8eqhmrA0pc0uURjuBM29eu3PeZmsPPQVh4Rl4dQGTV03m32z3TRXCRKhOxucdWVsbd2qL8cU7F2IpMPcSRoyWg/s1600/m.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="343" data-original-width="577" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS15uzTr-0PhbPGXjZj0Wi-z5Pw9V-9fO4tEzhaJ9VS_8zudiDo3r8q8eqhmrA0pc0uURjuBM29eu3PeZmsPPQVh4Rl4dQGTV03m32z3TRXCRKhOxucdWVsbd2qL8cU7F2IpMPcSRoyWg/s640/m.jpg" width="640" /></a></div>
<br />
<br />
<br />
Na url substitua https://www pela letra "m".<br />
<br />
Pois o Facebook não é um site responsivo, mais possui uma versão mobile. E na versão mobile é disponibilizado o botão para download.<br />
<br />
No caso da página exemplo, ficou assim:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZ6dh5tselhW5e969wslrZ88-IRS4aJMXWhK4ZwBy8TVdDFU_C3c0utJFMKwfw_eKdBE-zhUKMJtrd5RUgPrdFAb8kzjlACpbaHWzzE1kj41gSdKA-3goopn_Zpiyo9ztMpKyu_ovy58/s1600/ficou+assim.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="959" data-original-width="1261" height="486" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZ6dh5tselhW5e969wslrZ88-IRS4aJMXWhK4ZwBy8TVdDFU_C3c0utJFMKwfw_eKdBE-zhUKMJtrd5RUgPrdFAb8kzjlACpbaHWzzE1kj41gSdKA-3goopn_Zpiyo9ztMpKyu_ovy58/s640/ficou+assim.jpg" width="640" /></a></div>
<br />
<br />
Agora basta eu clicar no vídeo desejado e lá está a opção de fazer download.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglN5MyjYfxAsNkCTE8WTBu88LBBMgz8Oxoh15KagXNQmUg6Gzx0HuesBhZ1EbQ0E6S2AZ_iM_nAEEheEU2tS09936J_PN7hdzqNw0TDE0iuAsHijuGffq0reGT7KfJ6bN8vnp9EHlnOHU/s1600/baixando.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="815" data-original-width="858" height="606" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglN5MyjYfxAsNkCTE8WTBu88LBBMgz8Oxoh15KagXNQmUg6Gzx0HuesBhZ1EbQ0E6S2AZ_iM_nAEEheEU2tS09936J_PN7hdzqNw0TDE0iuAsHijuGffq0reGT7KfJ6bN8vnp9EHlnOHU/s640/baixando.jpg" width="640" /></a></div>
<br />
<br />
Ou se for um vídeo de uma postagem na linha do tempo,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUaNacPjFfcKEMyBMPbqXKqb9zA5exX1aE8vjicukynx1jbwEe7Zytf1Yh7MqdfnvJAqUTwkuda_oIFD004h0YsL-sW2tM-UpFmDX5CzsX7d2fXI9SmmxvdZluGe3rlWgjLx0XQRYF6c/s1600/linha+do+tempo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="777" data-original-width="1006" height="490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUaNacPjFfcKEMyBMPbqXKqb9zA5exX1aE8vjicukynx1jbwEe7Zytf1Yh7MqdfnvJAqUTwkuda_oIFD004h0YsL-sW2tM-UpFmDX5CzsX7d2fXI9SmmxvdZluGe3rlWgjLx0XQRYF6c/s640/linha+do+tempo.jpg" width="640" /></a></div>
<br />
<br />
Faça a mesma alteração informada acima e clique para iniciar o vídeo que a opção de download aparece.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWkxRiGMNo8Ge1gy2GZzdHXVoYj_gFjyHt5jIYrN3WvKjTr4xs9NGEyg5Phno2TJ3VmKZt6Dhkgfv_wNKDpJUiXmfnXcWk2ApDG28lLpBkCGKw1dfjFiE6ivDdDXHzIwj4SWQb4EdGoSs/s1600/Screenshot_5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="795" data-original-width="1263" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWkxRiGMNo8Ge1gy2GZzdHXVoYj_gFjyHt5jIYrN3WvKjTr4xs9NGEyg5Phno2TJ3VmKZt6Dhkgfv_wNKDpJUiXmfnXcWk2ApDG28lLpBkCGKw1dfjFiE6ivDdDXHzIwj4SWQb4EdGoSs/s640/Screenshot_5.jpg" width="640" /></a></div>
<br />
<br />
Bem facil.<br />
<br />
<br /></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-7369101560631545692017-05-17T01:52:00.002-03:002017-05-17T01:52:41.294-03:00URL personalizada<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZZ1gdc7K7j6kstYfz7Dw_lpYAvqF1OOWnth2Aa5_sszD5gkwzxs7uhO35lTLgKDWa3_uhYjFSN_ICpqcF4bjoVRzylK4WBWQUT0PAYr8nlaBqp-IT4pT21eqNsQfEKTraUCBfHe7Jho/s1600/seo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZZ1gdc7K7j6kstYfz7Dw_lpYAvqF1OOWnth2Aa5_sszD5gkwzxs7uhO35lTLgKDWa3_uhYjFSN_ICpqcF4bjoVRzylK4WBWQUT0PAYr8nlaBqp-IT4pT21eqNsQfEKTraUCBfHe7Jho/s640/seo.jpg" width="640" /></a><br />
<br />
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>TEMA: <span style="color: orange;">SEO</span></b></span></span></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>ARTIGO: <span style="color: orange;">Novo</span></b></span></span></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b>VERSÃO: <span style="color: orange;">WA4 | WARC</span></b></span></span></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b><span style="color: orange;"><br /></span></b></span></span></div>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><span style="color: orange;"><br /></span></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Como todos sabem o posicionamento do seu site nos mecanismos de busca dependem de várias diretrizes. </span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Muitos se preocupam com meta tags tipo título, descrição e palavras chaves e esquecem das URLS. Há os que dizem que as URLs não influenciam em nada. Se enganam. Uma URL bem definida pode ajudar e muito o posicionamento nos mecanismos de pesquisa.</span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Vamos por exemplo tirar como base as próprias url's criadas em nosso blog do WebacappellaShow. O WebAcappellaShow é feito pela tecnologia do " Blogger" que pertence ao Google. </span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Peguei o link:</span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"> </span></span><span style="background-color: transparent; font-size: 13px; text-align: left;"><span style="font-family: "open sans" , "arial" , sans-serif;">https://webacappellashow.blogspot.com.br/2016/10/google-analytics-no-site-webappella.html</span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="background-color: transparent; font-size: 13px; text-align: left;"><span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnLhcwBM7DGLcckqxqaW6Ze5KwyWXq5YvhrdJ7EVC_7fz5QltGTLy2fv_qXvyr38uj9y7-YkrMc9jqA5WIQKCoX-ecadtHpSNFgEDZPvcumk3-t10_z_E49ebZXS4nR1xlmWt27mVQrRw/s1600/urlblogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnLhcwBM7DGLcckqxqaW6Ze5KwyWXq5YvhrdJ7EVC_7fz5QltGTLy2fv_qXvyr38uj9y7-YkrMc9jqA5WIQKCoX-ecadtHpSNFgEDZPvcumk3-t10_z_E49ebZXS4nR1xlmWt27mVQrRw/s640/urlblogger.jpg" width="640" /></a></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="background-color: transparent; font-size: 13px; text-align: left;"><span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="background-color: transparent; font-size: 13px; text-align: left;"><span style="font-family: "open sans" , "arial" , sans-serif;"><b><br /></b></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="background-color: transparent; font-size: 13px; text-align: left;"><span style="font-family: "open sans" , "arial" , sans-serif;">Repare que se eu não defini uma url personalizada o próprio Blogger criou a url personalizada baseado no título da postagem. Poderia ser </span></span><span style="font-family: "open sans" , "arial" , sans-serif; font-size: 13px; text-align: left;">https://webacappellashow.blogspot.com.br/2016/10/<b>post200.html.</b></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 13px; text-align: left;"><b>Mas não!! Ele criou baseado no que se trata, pois no título já informei o assunto.</b></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 13px; text-align: left;"><b><br /></b></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="text-align: left;"><b><span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">E os hifens? </span></span></b></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 13px; text-align: left;"><b><br /></b></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Apesar que o Google por exemplo possui uma tecnologia para reconhecer a separações de palavras, o hífen é de grande importância pois eles ajudam o Google entender do que se trata. Lembre que existem palavras formadas de mais de uma palavra. </span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Por exemplo:</span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Dentro da palavra legalmente se encontra <b>legal </b>e <b>mente</b></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Dentro da palavra contador se encontra <b>conta</b> e <b>dor</b></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">E para quem não sabe o hífen é um dos coringas do Google. </span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Caso queira saber mais sobre estes coringas do google você encontra mais informações <a href="http://help-desk-pc.blogspot.in/2013/05/melhore-suas-pesquisas-no-google.html" target="_blank">clicando aqui</a></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Outro erro que se comentem muito por aí é definir as url somente como a opção usada no menu do website. </span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Por exemplo:</span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Supomos que no site webacappellashow.com.br tem a página contato.</span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">O que não é uma boa prática é definir a url tipo <b>webacappellashow.com.br/contato.html</b></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">O que eu sugiro é uma url mais personalizada ficando mais ou menos assim: <b>webacappellashow.com.br/fale-com-quem-tem-conhecimento-em-webacappella.html</b></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">ou até mesmo<b> www.webacappellashow.com.br/contatar-profissional-web-acappella.html</b></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">No caso acima eu usei no link a palavra <b>Webacappella </b>pois o domínio é webacappellashow.com.br . Sendo que estão duas palavras juntas: webacappella+show. Desta forma eu ajudei ao Google a entender do que se trata.</span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Pois se o seu domínio já for exatamente o nome ou marca no seu site, não seria necessário repetir na url personalizada.</span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Agora por exemplo se uma empresa chamar Garden Jardins, e seu domínio for gjpaisagismo.com.br é interessante citar garden-jardins na url. Na página de contato poderia ficar por exemplo assim: www.gjpaisagismo.com.br/fale-com-empresa-jardinagem-garden-jardins.html</span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Eu tenho um amigo que é dono do site pertoaqui.com.br, que é um script em php. O Perto Aqui é um site de anúncios. </span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">No exemplo abaixo onde na imagem está assinalado de vermelho ele tinha cadastrado o anunciante como Fernandes Clean. </span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6OpNKnhNdJ8j1kQQMMWswtVXUK1PMMxCNTO1zQwEHl_HHfOLX2fK2kxvWaOF2uo1T6s2TpksVVS-wHmWXRt5DYM96sgNlHn6vWGIBFcEJ-24TmcY5iWLfocu2erp_dSgA5nTKvYvF4E/s1600/pertoaqui.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="530" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6OpNKnhNdJ8j1kQQMMWswtVXUK1PMMxCNTO1zQwEHl_HHfOLX2fK2kxvWaOF2uo1T6s2TpksVVS-wHmWXRt5DYM96sgNlHn6vWGIBFcEJ-24TmcY5iWLfocu2erp_dSgA5nTKvYvF4E/s640/pertoaqui.jpg" width="640" /></a></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Ou seja, ele cadastrava apenas o nome do cliente. Porém quem procura Fernandes Clean nos mecanismos de busca é somente quem já conhece a empresa, e na maioria das vezes já até sabe o site dela. Depois que ele mudou os cadastros como mostra a imagem acima. O site começou ter muito mais visitas. Ele ainda poderia ter posto melhor. Posto por exemplo: Fernandes Clean, empresa de limpeza no Bairro Betãnia. </span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Para vocês verem a importância de uma boa definição para a url.</span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Veremos agora como personalizar as url no Webacappella </span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="color: orange; font-family: "open sans" , "arial" , sans-serif; font-size: large;"><b>No WA 4</b></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Para cada página clique na opção Páginas/Matrizes>>Propriedades da Página, na tela que aparecer você clica em SEO e no primeiro campo você digita a url que deseja, conforme imagem abaixo:</span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5bukIcqjH-5tAs7E9Y34bBSPm0Fxznvg3UXuP7Z4pR6w19pNrpo-bSPYsiKV5GvUlWHfvqx-R3Gp74CQp_CJYm3ICBpoArxygxTVRkOrbENw-V7JnWeF1ZYg8CceyJsXYremWihZS7w4/s1600/urlwa4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5bukIcqjH-5tAs7E9Y34bBSPm0Fxznvg3UXuP7Z4pR6w19pNrpo-bSPYsiKV5GvUlWHfvqx-R3Gp74CQp_CJYm3ICBpoArxygxTVRkOrbENw-V7JnWeF1ZYg8CceyJsXYremWihZS7w4/s640/urlwa4.jpg" width="370" /></a></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;">Depois clique em Ok</span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><b><br /></b></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="color: orange; font-family: "open sans" , "arial" , sans-serif; font-size: large;"><b>PARA O WA RC (WA5)</b></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><br /></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Para cada página clique em Page Properties (Propriedades da página)</span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OB_Rk7prpqDi-C-oyTSx67S4gzGnm216WzF9lfwTAsAplhlboPLE_an6xdnYAaZvtVx-AADkRA1Sh52Xw7vAP9zyCLS9ngnVr8EgkbuX9SQ1iTe4zJTmqmXrCqWdBEEj32calX5DfYk/s1600/urlwa5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OB_Rk7prpqDi-C-oyTSx67S4gzGnm216WzF9lfwTAsAplhlboPLE_an6xdnYAaZvtVx-AADkRA1Sh52Xw7vAP9zyCLS9ngnVr8EgkbuX9SQ1iTe4zJTmqmXrCqWdBEEj32calX5DfYk/s640/urlwa5.jpg" width="640" /></a></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">E no primeiro campo você digita sua url personalizada. </span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: left;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VBt9469j46WsB_qypu3pIbiZD2kILFySGyjFguaYcls1FVlXPfY3lGJ5fHcrpt0cWd0Oo42OloLmA1xHyjpg_mKCPShQ8-fKCjErERokPL3gdt2nLHGVGlOBnGbtuK3BnoO0_Ejaugc/s1600/urlwarc.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VBt9469j46WsB_qypu3pIbiZD2kILFySGyjFguaYcls1FVlXPfY3lGJ5fHcrpt0cWd0Oo42OloLmA1xHyjpg_mKCPShQ8-fKCjErERokPL3gdt2nLHGVGlOBnGbtuK3BnoO0_Ejaugc/s640/urlwarc.jpg" width="640" /></a></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 13px; text-align: left;"><b><br /></b></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif; font-size: 13px; text-align: left;"><b><br /></b></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Depois Salve </span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Finalizando, é importante lembrar que esta é apenas uma das técnicas utilizadas. Muita outras são necessária para que seu site fique cada vez melhor posicionado nos mecanismos de busca.</span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><br /></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;">Em breve mais posts sobre S.E.O.</span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<span style="font-family: "open sans" , "arial" , sans-serif;"><span style="font-size: 13px;"><b><br /></b></span></span></div>
<div style="background-color: white; line-height: 20px; text-align: justify;">
<br /></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-6780904018578842351.post-22675351753912049832017-05-11T21:16:00.001-03:002017-05-11T21:16:06.256-03:00PRESTASHOP 1.6 - Termos e condições de uso<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s1600/PRESTASHOP+1.6.png" style="color: #3058aa; margin-left: 1em; margin-right: 1em; outline: none;"><img border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARTgwOZrUwxTBsOo2NkvwoRHllwUQAhcr7cwWwfGLF5EdTYgDat3Vl_wOALvJkoHG1QsZOhvkTsx1yggSW2NuNeoy8IxifZGgmAkgBLLRsQsWNIdN9wqRDbfdA5GNtXNGWyUOWz0Zgsk/s640/PRESTASHOP+1.6.png" style="background: transparent; border: none; padding: 0px;" width="640" /></a></div>
<br style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" /><span style="background-color: white;"><span style="font-family: Trebuchet MS, sans-serif;">Hoje iremos configurar os Termos e condições de nossa loja. </span></span><br />
<span style="background-color: white;"><span style="font-family: Trebuchet MS, sans-serif;"><br /></span></span>
<span style="background-color: white;"><span style="font-family: Trebuchet MS, sans-serif;">É importante frisar que este artigo não se trata das obrigações legais que regem o comércio eletrônico.</span></span><br />
<span style="background-color: white;"><span style="font-family: Trebuchet MS, sans-serif;"><br /></span></span>
<span style="background-color: white;"><span style="font-family: Trebuchet MS, sans-serif;">Caso deseja saber sobre as questões legais que regem o e-comerce procure por Decreto Federal 7.962/13 de 14/05/2013 (decreto brasileiro) .</span></span><br />
<span style="background-color: white;"><span style="font-family: Trebuchet MS, sans-serif;"><br /></span></span>
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white;">Para as ações feitas no Brasil é importante também estar por dentro da Lei Marco Civil da Internet sancionada em junho de 2014 e também o código do consumidor </span><span style="color: #047c8b;"><span style="background-color: white; border-bottom: 1px solid rgb(4, 124, 139); border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; cursor: pointer; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; transition: all 0.1s;">(Lei Federal n. 8.078, de 11 de setembro de 1990)</span></span>.</span><br />
<span style="background-color: white;"><span style="font-family: Trebuchet MS, sans-serif;"><br /></span></span>
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; color: #4d555b;">O não cumprimento da lei para lojas online prevê multa, apreensão de produtos e intervenções de cunho administrativo, podendo culminar no </span><span style="background-color: white; box-sizing: border-box; color: #4d555b; font-weight: 700;">fechamento definitivo da empresa</span><span style="background-color: white; color: #4d555b;">. Por isso, recomenda-se que você procure uma assessoria especalizada para adequar seu site à lei, evitando correr o risco de sofrer sanções.</span></span><br />
<span style="background-color: white; color: #4d555b;"><span style="font-family: Trebuchet MS, sans-serif;"><br /></span></span>
<span style="background-color: white; color: #4d555b;"><span style="font-family: Trebuchet MS, sans-serif;">Mas como já dito, este artigo se trata apenas comentar e sugerir os termos e condições que estarão disponíveis em sua loja, quanto configurar na sua loja Prestashop 1.6</span></span><br />
<span style="background-color: white; color: #4d555b;"><span style="font-family: Trebuchet MS, sans-serif;"><br /></span></span>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Por meio de seus<span style="color: #131418; font-weight: 700;"> termos e condições gerais de uso e/ou de venda</span>, uma loja explica aos usuários quais são as condições de utilização do serviço disponibilizado a, seja ele <span style="color: #131418; font-weight: 700;">gratuito ou pago</span>. Além de informar o usuário sobre a necessidade de <span style="color: #131418; font-weight: 700;">cadastro</span> ou sobre os elementos protegidos por <span style="color: #131418; font-weight: 700;">direitos autorais</span>, este instrumento determina, ainda, as <span style="color: #131418; font-weight: 700;">responsabilidades</span> de cada uma das partes - editor (pessoa que mantém a loja) e usuário -, em relação ao uso do serviço.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">A cláusula mais importante dos termos e condições gerais de uso é aquela que define a <span style="color: #131418; font-weight: 700;">política de privacidade</span> da loja. Nela, o editor comunica claramente ao usuário como serão protegidas ou utilizadas as informações que este fornece a loja, sejam elas <span style="color: #131418; font-weight: 700;">dados pessoais</span> ou <span style="color: #131418; font-weight: 700;">dados de navegação</span>.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Nos casos em que a loja colocar à venda produtos ou serviços, este documento virá, também, complementado pelas <span style="color: #131418; font-weight: 700;">condições gerais de venda</span>, que regularão os detalhes desta transação, tais como as <span style="color: #131418; font-weight: 700;">formas de pagamento</span>, a <span style="color: #131418; font-weight: 700;">entrega</span> e a <span style="color: #131418; font-weight: 700;">política de trocas e devoluções</span>.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Vamos agora adicionar nossos termos e condições em nossa loja Prestashop.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Acontece que no conteúdo de nosso Termos e condições de uso existem links que redirecionam para outras informações importantes; como por exemplo Política de Entrega e Política de pagamento. </span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Por este motivo vamos preparar antes do nosso Termos e condições os demais links os quais terão referencia.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Em nossa loja exemplo, iremos começar com a Política de Entrega de Produtos. </span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Baixe um modelo exemplo <a href="https://webacappellashow.com.br/loja/home/16-modelo-de-politica-de-entrega-de-produtos.html" target="_blank">clicando aqui</a>.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Então logue na sua área administrativa da loja e vá para PREFERÊNCIAS>>CMS</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNISKcv_sbdudML5eBWX8C0paSdOv8L3OsKGDMFoJQsOC0QiyIUPA9wLENPD9OWwVrmhyphenhyphenV3JdgwogsSsUD0n5vFzD4HnjT0MOa05WHFCymhThJ7hKsR0-Xhai-NfJUFwulK6EHFqBBh8/s1600/MENUCMS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Trebuchet MS, sans-serif;"><img border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNISKcv_sbdudML5eBWX8C0paSdOv8L3OsKGDMFoJQsOC0QiyIUPA9wLENPD9OWwVrmhyphenhyphenV3JdgwogsSsUD0n5vFzD4HnjT0MOa05WHFCymhThJ7hKsR0-Xhai-NfJUFwulK6EHFqBBh8/s320/MENUCMS.jpg" width="320" /></span></a></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Agora edite o ítem correspondente a Política de Entrega de produtos. Em nossa loja exemplo:</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHpqzIisT3cU5SzW7ggf7yCxR7WKKYSdDqEz_KSHAxeblGuXcL_UyB3dsiVFscknBgBxSqOKa5AjmKytaodq9op2UrBIhqZN7xadxb8LnLsUEfo6bbutK0ESyyJ-cH7Q8E0bwkbm923Es/s1600/editarpoliticaentrega.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Trebuchet MS, sans-serif;"><img border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHpqzIisT3cU5SzW7ggf7yCxR7WKKYSdDqEz_KSHAxeblGuXcL_UyB3dsiVFscknBgBxSqOKa5AjmKytaodq9op2UrBIhqZN7xadxb8LnLsUEfo6bbutK0ESyyJ-cH7Q8E0bwkbm923Es/s640/editarpoliticaentrega.jpg" width="640" /></span></a></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Preencha o campo Conteúdo com o termos definidos para a política de entrega de sua loja.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg87hctcf43-V6fJ8ojfaNevI6e6I5UVWKzKVIa77wg2lOCWC0Bya_gKCK2oRWVW0qPdJPPPlVajljf78t05YabWBsQ_84WDHcuOezKGnB-G1Xkh9jwZjOKzsRi9Wo0v0kALb0A6ytKtNU/s1600/CONTEUDO.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Trebuchet MS, sans-serif;"><img border="0" height="470" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg87hctcf43-V6fJ8ojfaNevI6e6I5UVWKzKVIa77wg2lOCWC0Bya_gKCK2oRWVW0qPdJPPPlVajljf78t05YabWBsQ_84WDHcuOezKGnB-G1Xkh9jwZjOKzsRi9Wo0v0kALb0A6ytKtNU/s640/CONTEUDO.jpg" width="640" /></span></a></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Salve.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Como nos Termos e Condições de uso de nossa loja exemplo cita tanto a Política de Entrega e a Política de Pagamento vamos agora inserir no site a Política de Pagamento fazendo da mesma forma que a Política de Entrega.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Baixe um modelo exemplo <a href="https://webacappellashow.com.br/loja/home/18-modelo-politica-pagamento.html" target="_blank">clicando aqui</a>.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Após feito e salvo, vamos agora inserir os Termos e condições de Uso.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Baixe um modelo exemplo <a href="https://webacappellashow.com.br/loja/home/17-modelo-de-termos-condicoes-uso.html" target="_blank">clicando aqui</a>.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;">Da mesma forma que feito para as políticas acima comentadas faremos para os Termos e condições de uso, portanto nos trechos do termos e condições de uso que se refere as Políticas citadas, lembre de inserir um link redirecionando.</span></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiRSduDUGqhB4pDVuMeN2usUEITwSzTFB6vYG6zsaZ1ahTaM80Xkz1HShEvTvRCLyhCPX83hSHfzePWbVInDHLlBsrfpvwSutgFST-H96vGSG9G8nmYzfOzmU46joPL6zp7cPp6ypgm-w/s1600/plicita.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiRSduDUGqhB4pDVuMeN2usUEITwSzTFB6vYG6zsaZ1ahTaM80Xkz1HShEvTvRCLyhCPX83hSHfzePWbVInDHLlBsrfpvwSutgFST-H96vGSG9G8nmYzfOzmU46joPL6zp7cPp6ypgm-w/s640/plicita.jpg" width="640" /></a></div>
<div style="background-color: white; border: 0px; color: #343843; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; font-size: 12px;">Caso queira ver on line <a href="https://webacappellashow.com.br/loja/content/3-termos-e-condicoes-de-uso-loja-webacappella-show-shop" target="_blank">clique aqui</a></span></span><br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; font-size: 12px;"><br /></span></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; font-size: 12px;"><br /></span></span></div>
Unknownnoreply@blogger.com