Mostrando postagens com marcador animação. Mostrar todas as postagens
Como criar Gifs Animadas para blog
O que acha de criar gifs animadas apenas com captura de tela?
Hoje vamos apresentar um programa que cria gifs animadas para você inserir em seu blog.É o LICEcap. Muitos Webmasters utilizam o Fireworks para criar suas gifs animadas, e o que vamos mostrar aqui é um pequeno software da empresa Cockos, que está no mercado desde 2004 e desenvolve softwares sustentáveis.
O LICEcap é gratuito e pode ser usado por qualquer pessoa sem o mínimo conhecimento em programação. Para fazer o download do software, clique aqui e baixe a versão de acordo com seu sistema operacional.
O LICEcape trabalha com captura de tela, portanto, você poderá criar gifs animadas de vídeos, movimentos em tela, ou qualquer outra coisa.
Veja, abaixo, como proceder passo a passo para criar suas gifs animadas:
Tutorial - criando gifs
Para começarmos, dê um clique duplo no ícone do LICEcap na sua área de trabalho, e uma tela com uma espécie de borda irá se abrir. É, justamente, dentro desta tela que sua gif animada será criada:
O próximo passo é clicar no botão "record..." e uma tela irá se abrir para você escolher o nome da sua gif animada e o local onde será armazenada:
Você pode alterar o tamanho, reduzindo ou ampliando, apenas alterando a borda a qual sua gif animada será criada, com o mouse:
Agora, você poderá criar facilmente suas gifs animadas e inseri-las em seu blog.
O que achou? Deixe seu comentário!
Criar movimentos em seus textos e imagens
Vamos adicionar movimento em seu blog?
Nesse tutorial, vamos ensinar como colocar movimento em seus textos e imagens. O código é simples e você pode fazer várias implementações nele. Abaixo, os movimentos com seus respectivos códigos:
<marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="10"><font face="Times New Roman" color="#0080c0" size="10"><strong>APRENDENDO COM O BLOG GERENCIADO</strong></font></marquee>
<marquee direction="UP" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5"><font face="Times New Roman" color="#0080c0" size="3"><strong>Que tal criar textos que se movem na tela?</strong></font></marquee>
Inserindo imagens no lugar de textos
Também é possível inserir imagens no lugar dos textos para ganhar movimentos.Os mesmos efeitos aplicados acima podem ser aplicados em imagens. Veja, abaixo, alguns exemplos de como podemos criar movimentos em imagens no lugar de textos:
É possível inserir quantas imagens você quiser, basta procurar pelo comando <img src=" " /> e inserir quantos comandos quiser com os respectivos endereços das imagens dentro das aspas.
É importante dizer que as imagens irão se agrupar até atingir a largura da área onde o código será exibido. Ao atingir essa largura, acontece uma quebra de linha automática, desta forma, aparecerá o próximo conjunto de imagens, e assim por diante...
Você deve ter notado que as imagens aparecem de duas em duas, de baixo para cima. Isso acontece porque as duas imagens atingem o limite da largura da área da postagem. Se a área deste post fosse maior, provavelmente apareceriam 3 ou mais imagens, uma ao lado da outra.
Você deve estar se perguntando como fazer para aparecer uma imagem de cada vez.
Isto é simples de resolver! Basta "avisarmos" ao html que queremos uma quebra de linha apás cada imagem.
Para isto, basta inserir a tag <br /> entre os comandos <img src=" " />
Veja o mesmo efeito de cima com as tags <br /> dentro do código:
Você deve ter notado que no código das imagens, explicado acima, existe um comando chamado UP destacado. Esse comando "diz" qual a direção que as imagens devem percorrer. O mesmo vale para a esquerda, a direita, e para baixo.
Para isso, basta você substituir o UP por down, right ou left.
Nos casos da direita para esquerda e da esquerda para direita não há necessidade de se colocar a tag <br /> entre as tags <img src=" " /> bastando dar um espaço para afastar uma da outra, caso ache melhor.
Veja um exemplo prático do mesmo código acima, só que com o right no lugar do UP:
Veja, mais uma vez, os exemplos que preparamos:
O que achou? Comente!
Como criar uma página estática ou postagem animada em 3D com puro css - Animação nas páginas
3D com css
Neste artigo, vou explicar como criar uma página estática ou postagem animada em 3D com puro css.A animação nas páginas é um artifício bacana para dar um destaque especial àquele artigo que é importante para você. No blog, somos limitados a muito artifícios, porém, com um pouco de criatividade e conhecimento, podemos criar animações bem interessantes.
Antes de ir para o tutorial, leia este artigo, como ocultar elementos somente de uma página especifica no blog
Se você leu o artigo acima e já sabe como ocultar os elementos da página que pretende animar, vamos ao tutorial:
Agora prepare uma postagem ou uma página estática em branco, mude para o modo html.
Primeiro, copie o código a seguir:
Este código é o css que vai dar animação à sua página! Cole-o dentro da sua página estática ou postagem no modo html.
Ainda dentro da sua página recém criada, vamos colocar o html.
É onde irá chamar o css acima e inserir os textos para sua página ficar animada com um efeito 3D.
Copie o código a seguir:
E cole logo abaixo de </style>.
Altere os textos de acordo com o que você quer mostrar, divulgar, promover, etc...
Ainda no último comando da caixa acima colado em sua página, como este</h2><a class="sp-circle-link" href="http://www.bloggerenciado.com/p/arrumando-o-blog-servico-de-edicao.html">Veja aqui</a><br /> você irá colocar a url que você quer redirecionar seu leitor, e a descrição do link nas áreas destacas em azul.
Edite e coloque o que você achar melhor!
Agora, você acabou de criar uma página animada em 3D com puro css! A animação pode ser feita em qualquer página que você quiser e não afetará o template, nem o funcionamento do blog.
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.
Como colocar efeito nas imagens do blog - Efeito css nas imagens
animação
,
blog
,
css
,
efeito
12 comentários
Animação com CSS
Neste artigo, vamos explicar como colocar efeito nas imagens que você insere em seu blog.Mas, antes de começarmos o artigo, veja o outro post similar a este com mais algumas animações:
Um artifício bastante usado para chamar a atenção do leitor para seus posts são os efeitos aplicados nas imagens. O blog por padrão usa o lightbox, que pode ser aplicado no próprio menu do Blogger em preferências de pesquisas, porém, o efeito de abrir a imagem em PopUp já é bem comum e a estratégia é chamar a atenção do leitor para o artigo ao passar o cursor do mouse.
Primeiro, veja o código dos dois efeitos e suas respectivas demostrações, e no final dos códigos e das demostrações, o tutorial de como aplicá-las.
Efeito LED css
Efeito rotatório elástico css
Agora, vamos ao tutorial de como aplicar o efeito em seu blog:
Primeiro, copie o respectivo código referente ao efeito que deseja aplicar. Logo em seguida, vá ao menu do Blogger, clique em modelo e depois clique em personalizar, como na imagem abaixo:
Ao clicar em personalizar, você verá uma tela como esta abaixo. É o design de modelo:
Logo em seguida, clique na última opção em avançado e abrirá uma tela como esta:
Em seguida, clique em adicionar css. Caso use o modelo padrão do Blogger, haverá mais opções, mas selecione somente adicionar css. Logo após selecionar esta opção, caso tenha mais códigos dentro da caixa, cole o código copiado na demostração acima, abaixo da ultima linha na caixa de códigos.
Se a caixa estiver vazia, aplique do mesmo modo, e logo em seguida, clique em aplicar ao blog no botão vermelho acima. Feito isso, está salvo.
O segundo método é inserir direto no código fonte do blog. Ainda na opção Modelo do menu clique em editar HTML ao abrir o código fonte do seu blog dentro da caixa aperte o ctrl+f e na caixa de pesquisa procure pelo comando ]]></b:skin> ao localiza-la cole o código do efeito escolhido logo acima deste comando para inserir o efeito desejado.
Clique em salvar modelo, atualize a página do seu blog, e você verá o efeito do código nas imagens!
Assinar:
Postagens
(
Atom
)
