Estilizando página de erro 404 - Aplique estilosas páginas de erro em seu blog.
404
,
blog
,
erro
,
estilizar
Nenhum comentário
Estilizar página de erro 404
Nesse artigo, vamos expor alguns estilos de páginas de erro 404 para você inserir em seu blog. Uma página de erro 404 estilizada melhora a taxa de rejeição em seu blog.No artigo Ocultar e redimensionar elementos e criar página de erro 404 explicamos com detalhes o que é este erro e como lidar com ele.
Muitos blogueiros procuram uma maneira de colocar uma página estilosa com um design moderno e interessante para que quando apareça o erro 404, abra uma determinada animação, layout ou mesmo uma mensagem dizendo para o leitor não abandonar o site, voltar para algum local em especifico e explicando os motivos de ter aparecido aquele erro.
Antes de aplicar qualquer estilo de página de erro descrito neste tutorial, você deve ler o artigo mencionado acima para aprender a ocultar elementos em sua futura página de erro.
Agora que você sabe ocultar os elementos e redimensionar sua página de erro, vamos criá-la:
Abaixo, seguem alguns estilos e seus respectivos códigos, bastando alterar nas áreas mencionadas referentes a cada estilo de página de erro.
Tutorial - estilos de páginas de erro 404
Para criar a página de erro no Blogger, basta seguir a explicação do link no começo deste artigo.Para aqueles que usam outras plataformas, é necessário ver a compatibilidade de scripts e, também, conhecer o local onde está situada a página de erro para fazer as devidas modificações.
Vamos começar com uma página de erro 404 animada com efeito hover.
Para inserir esta página em seu blog é necessário trabalhar em duas etapas. Primeiro, copie o código abaixo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'/> <script src='http://tympanus.net/Tutorials/TypographyStyles/js/jquery.lettering.js' type='text/javascript'/> <script> $(document).ready(function() { $(".cs-text-cut").lettering('words'); }); </script> <script src='http://tympanus.net/Tutorials/TypographyStyles/js/modernizr.custom.79639.js' type='text/javascript'/>
Vá até o painel do blog, no caso do Blogger, em modelo e, em seguida, editar html. Dentro do código fonte do seu blog, aperte ctrl+f e procure pela linha </head> Acima desta tag, insira o código acima e salve.
Agora, va até o painel da página de erro do seu blog, no caso do Blogger, em configurações, preferência de pesquisas, erros e redirecionamentos, página não encontrada personalizada.
Neste, você irá clicar em editar e, em seguida, inserir o código abaixo:
Altere os textos e o endereço do link como você achar mais adequado. Feitas as edições, basta clicar em salvar. Agora, insira o /404 na frente da url do seu blog no navegador para ver o efeito.
Página de erro 404 em 3DM
Para você inserir esta página de erro em seu blog, basta seguir os mesmo passos, acima, com os seguintes comandos:
Procure pela tag </head> dentro do código fonte do seu blog, em modelo, e insira os comandos abaixo:
<script src='http://tympanus.net/Tutorials/TypographyStyles/js/modernizr.custom.79639.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'/>
<script src='http://tympanus.net/Tutorials/TypographyStyles/js/jquery.lettering.js' type='text/javascript'/>
<script>
$(document).ready(function() {
$("#cs-text").lettering().children('span').wrap('<span/>');
});
</script>
Agora, vá até a área da edição da página de erro 404, como especificado no tutorial, acima, e insira os comando abaixo:
Faça as devidas alterações nos textos e no link, salve e visualize o seu blog com o /404 na frente.
Página de erro 404 em blocos
Para aplicar este modelo de página de erro, siga o mesmo esquema dos dois modelos anteriores.
Vá ate o painel do seu blog, na aba modelo, editar html, em seguida dê ctrl+f e procure pelo comando </head> e insira os scripts abaixo:
<script src='http://tympanus.net/Tutorials/TypographyStyles/js/modernizr.custom.79639.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'/>
<script src='http://tympanus.net/Tutorials/TypographyStyles/js/jquery.lettering.js' type='text/javascript'/>
<script>
$(document).ready(function() {
$(".cs-text").lettering('words').children('span').lettering()
});
</script>
Feita esta etapa, ainda no painel do seu blog, vá até a área onde está localizada a edição da página de erro, em configurações, preferências de pesquisas, página não encontrada personalizada, e insira os comandos abaixo:
Veja aqui como ocultar os elementos da página de erro e outro estilo de página de erro 404 para você aplicar em seu blog.
Em breve, mais estilos de página de erro 404! Alguma vai combinar com seu blog!
E então, o que achou dos modelos? Dê sua opinião!
Assinar:
Postar comentários
(
Atom
)
Nenhum comentário :
Postar um comentário
O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.