Mostrando postagens com marcador programação. Mostrar todas as postagens

Adicionando mais gadgets - Coluna de gadgets no cabeçalho

7 comentários
cabeçalho

Coluna de Gadgets no cabeçalho

Neste artigo, vamos ensinar como adicionar uma coluna de Gadgets no cabeçalho do seu blog.

Por padrão de muitos Templates, o blogueiro ou webmaster não consegue adicionar espaço para Gadgets em seu blog. Por padrão, existe apenas um que normalmente é usado para publicidades, porém, muitas vezes, o modelo do template é, justamente, o que o blogueiro está buscando, mas o espaço não se adapta ao trabalho que irá ser aplicado.

Visando sanar esta dificuldade, resolvemos criar este artigo, para que, assim, você possa adquirir mais espaço em seu blog. Neste artigo, em específico, iremos explicar como inserir o Gadget no cabeçalho do blog.

Tutorial - Inserindo coluna de Gadgets

Vá no menu do Blogger, navegue até modelo, em seguida, editar HTML. Aperte ctrl+f e procure pela linha <div id='content-wrapper'> e logo abaixo dela, cole o código a seguir. Caso não encontre, procure pela linha <head> e insira o código abaixo:


O efeito será como este:

cabeçalho

Agora vá em layout e veja a coluna de gadgets na parte superior da área. Basta adicionar os gadgets que quiser, salvar e visualizar seu blog.

Simples, não? Comente!

Criar movimentos em seus textos e imagens

6 comentários
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 style="border-bottom: #ff4500 2px solid; border-left: #ff4500 2px solid; border-right: #ff4500 2px solid; border-top: #ff4500 2px solid;">Texto em movimento no BLOG GERENCIADO</marquee>

<marquee style="background: #6495ED;">Texto em movimento em fundo colorido</marquee>



<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>

<marquee direction="DOWN" 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:

textos e imagens
<marquee direction="UP" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5"><font face="Times New Roman" color="#0080c0" size="3"><strong><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTqqCbrl327wUgoOVu2poXxzYSV9NCwDLngI2yHJhYG9ErCLXTxdA"/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7WFvfQViJhBxVdeGOvPCnNE-qz9BH9VlXl3yVbTok__MFXDhw1wg4kUZq-HGpseSG2kfOSTxtLM4sLeHAxFUGFGbySYMDzY7E7bMtUt0OWG3bsFUaeaHCQEfPfL-W6-QdCKHsDRRoWGA/s1600/Video+Aula.png"/><img src="https://lh3.googleusercontent.com/-EzH-fPEeJfg/UXdmnZsRLfI/AAAAAAAAAMk/n-8O8yq2CK4/w200-h150/photo.jpg"/></strong></font></marquee>

É 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:

textos e imagens


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:

textos e imagens
Como explicamos, os mesmos efeitos aplicados nos textos em movimento valem para as imagens, basta inserir os códigos mencionados abaixo de cada efeito e substituir os textos por imagens.

Veja, mais uma vez, os exemplos que preparamos:


O que achou? Comente!