Como criar um blog animado para referência de link - Template para apresentação animado
Blog animado
Muitos blogueiros tem curiosidade em saber como criar uma página animada com css, javascript e outros recursos para ocultar elementos etc... Porém, essas páginas ficam hospedadas no próprio blog em que o trabalho está sendo feito, e a ideia deste post é ensinar como criar um blog com endereço único sem ter outros recursos dentro do blog, apenas um link para redirecionar para outro local e criar uma apresentação digna de um trabalho profissional.Não adianta deletar todo o código fonte do blog no Blogger, criar sua animação na página e colocar o link de redirecionamento, pois o Blogger não aceita apenas uma estrutura de html, css e javascript. Para o trabalho ser feito, você precisa obedecer uma ordem de códigos. Só assim você conseguirá deletar toda a estrutura do Blogger e colocar o estilo que você quiser.
Iniciando o Tutorial
Para começarmos, sugerimos que você crie um blog de testes, dê qualquer nome a ele e escolha qualquer modelo de template padrão.Feito isso, vá até o menu do Blogger que acabou de criar e clique em modelo. Você verá uma pequena imagem do blog com a opção editar html. Clique nesta opção e abrirá a caixa do código fonte do seu template. É aí que vamos trabalhar..
Antes de começarmos, clique em visualizar blog e deixe a página do seu blog novo aberta ao lado da página do Blogger onde você irá trabalhar com os códigos. Feito isso, você irá clicar com o lado direito do mouse dentro da caixa com os códigos e selecionar a opção selecionar tudo:
Delete tudo! Isso mesmo, esvazie a caixa mas não salve. Você pode até tentar salvar o blog, mas o Blogger não vai permitir. Agora que você deletou todo o código, você vai colocar o código a seguir:
<html> <head> <title> aqui é o título que vai aparecer na aba do navegador </title> <b:skin><![CDATA[ aqui é o estilo css ]]></b:skin> aqui é o script </head> <body> aqui é o html <b:section class='nbtbottomsec' id='nbtbottomsec' preferred='yes'/> </body> </html>
Copie todo o código, acima, delete as tags <br /> coloque em seu blog e salve. Vá na aba ao lado que está o seu blog, atualize a página e você notará que seu blog está todo branco, somente com o que está escrito no código. Se está assim, ok! Até esta etapa você concluiu com sucesso!
O template está todo limpo (vazio, fundo branco) somente com a estrutura padrão.
Bom, agora vamos criar nossa animação e dar vida a página para fazer algo digno de um profissional!
Para começarmos, você precisa entender a estrutura do código, acima, no template.
Repetindo o código, abaixo, vamos fazer a descrição:
<html>
<head>
<title>
aqui é o título que vai aparecer na aba do navegador
</title>
<b:skin>
<![CDATA[
aqui é o estilo css
]]></b:skin>
aqui é o script
</head>
<body>
aqui é o html
<b:section class='nbtbottomsec' id='nbtbottomsec' preferred='yes'/></body></html>
O título descrito acima é o que vai aparecer na aba do navegador, não dentro da página ou no endereço, então, nesta parte, sugiro colocar algo referente ao trabalho que pretende preparar.
O estilo css tem que ficar exatamente dentro das tags:
]]><b:skin><![CDATA[ e ]]><b:skin> aplica-se a qualquer código de estilo ou style
Seguindo o padrão de cores acima da explicação, os scripts ou .js ou javascript devem ser aplicados sempre antes da tag </head> aplica-se também links de referência de script e estilo, exemplo:
<script type="text/javascript" src="http://www.arteugarte.com/ElasticSlideshow/js/jquery.eislideshow.js"></script>
Este exemplo acima mostra um arquivo javascript hospedado numa página da web e dentro das tags script. Caso seja esse o seu caso, coloque o endereço dentro das aspas, logo após src= caso não seja um link, apenas coloque o código de script antes da tag </head>
Se você tem o código e quer hospedá-lo para usar o link e deixar o código fonte da página mais curto e com um carregamento mais rápido, leia este artigo.
Os links de estilos ou css também tem que ficar nesta parte do código fonte, ou seja, antes da tag </head> não importa se é acima ou abaixo do script que você já tem ou quer adicionar.
Para colocar os links de scripts, tem que ser desta maneira:
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/SplashComingSoonPageEffects/css/demo.css" />
O exemplo acima é o link de uma sequência de estilo css que deveria estar logo acima da tag ]]><b:skin> Para aumentar a velocidade do carregamento da página e encurtar o código fonte da página, o estilo foi hospedado na web e o link foi posto no código acima. Para aplicar, deve ser seguido o mesmo processo descrito no javascript.
O html basicamente é a estrutura da página onde você irá criar todo o seu trabalho.
Você irá colocar as divs de chamada dos estilos e scripts adicionados acima. Aqui você vai colocar o que quiser: um menu, slide, uma imagem em tela inteira ou criar uma animação chamando os estilos e funcionalidades dos css e javascript.
As possibilidades são muitas, e você não precisa ficar limitado a obedecer as regras padrão do seu template. É ótimo para criar um trabalho de chamada, exemplo: serviços.com ou conheça nosso trabalho, etc..
É algo realmente profissional e se torna mais profissional ainda quando se aplica css e javascript. Só lembro que é um blog de chamada para redirecionar para outro local, não é um blog para inserir Gadgets ou Widgets ou postagens ou páginas estáticas.
Fazia tempo que queríamos publicar este artigo para ajudar os amigos blogueiros que desejam fazer um trabalho de apresentação com um endereço específico, apenas para mostrar algo e fazer com que o leitor seja induzido a clicar e ir para onde o blogueiro quer sem dar outra opção a ele, a não ser o clique naquele determinado link da página de apresentação, seja um botão ou um balão ou um círculo ou o que você criar, e a estrutura do blog só permite fazer esse tipo de trabalho seguindo o padrão descrito acima.
Para apimentar esta postagem vamos ensinar a criar uma ótima página de apresentação para colocar no seu blog!
Lembramos a você que não precisa, necessariamente, ser uma animação, pode até ser uma imagem com um link, bastando redimensioná-la para ficar com a altura e a largura do seu template.
<head>
<title>Serviços Blog Gerenciado</title>
<b:skin><![CDATA[
aqui é o estilo css
]]></b:skin>
<link href='http://tympanus.net/Tutorials/SplashComingSoonPageEffects/css/demo.css' rel='stylesheet' type='text/css'/>
<link href='http://tympanus.net/Tutorials/SplashComingSoonPageEffects/css/style3.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class='container'>
<div class='header'>
</div>
<h1 class='main'>SERVIÇOS BLOG GERENCIADO</h1>
<div class='sp-container'>
<div class='sp-content'>
<div class='sp-wrap sp-left'>
<h2>
<span class='sp-top'>Se você está aqui é porque precisa </span>
<span class='sp-mid'>serviço</span>
<span class='sp-bottom'>para seu blog?</span>
</h2>
</div>
<div class='sp-wrap sp-right'>
<h2>
<span class='sp-top'>não perca tempo, nós do</span>
<span class='sp-mid'>b g<i>!</i><i>?</i></span>
<span class='sp-bottom'>temos a solução!</span>
</h2>
</div>
</div>
<div class='sp-full'>
<h2>Aqui você cria, edita, configura tudo para seu blog</h2>
<a href='http://www.bloggerenciado.com/p/arrumando-o-blog-servico-de-edicao.html'>veja como</a>
</div>
</div>
<b:section class='nbtbottomsec' id='nbtbottomsec' preferred='yes'/>
</body>
</html>
Finalizando a página
Os estilos e scripts estão hospedados na web e os links dessas hospedagens foram inseridos antes da tag </head>O local ao qual deveria ser colocados os css's está vazio pois o link de estilo que foi aplicado antes da tag </head> já esta sendo puxado para dentro do código fonte através dos links.
Logo abaixo da tag </head> e do <body> foi aplicado o html, ou seja, a estrutura da página fica junto à estrutura de suas respectivas divs de chamada onde estão chamando os estilos css hospedados na web que vão dar a funcionalidade de todo o conteúdo da estrutura html.
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.