Fazendo Blogspot: Imagens

Mostrando postagens com marcador Imagens. Mostrar todas as postagens

Como alinhar imagens lado a lado na postagem do Blogger

Realmente é muito difícil alinhar três imagens lado a lado na postagem do Blogger. Mas, nossos problemas de arrastar imagens acabaram.

Não precisa hospedar as imagens. Faça upload direto do arquivo do seu computador.

1. Escreva o seu texto e quando for inserir as imagens, clique em "HTML" da postagem, dê um "enter" ao final dos textos e cole o seguinte:

<center>
<div style="float:left; width:33%">sua imagem aqui</div>
<div style="float:left; width:33%">sua imagem aqui</div>
<div style="float:left; width:33%">sua imagem aqui</div>
</center>

Onde está escrito "sua imagem aqui", apague este trecho e deixe o cursor do mouse no lugar. Clique no ícone para adicionar imagens e faça o upload. Uma por vez.

O script completo na postagem vai ficar assim:

Agora clique em "Escrever"

Ficará assim:

Clique em "Atualizar" e pronto.

Não deixe de ler a nova postagem neste link: O Blogger e a crise de 2017

Quer ser um Influencer no Instagram e ganhar muito dinheiro com os seus posts ? Saiba como acessando o link abaixo.

Influencer no Instagram

Abraço,

Antonio Sardenberg

Como centralizar imagens no sidebar do Blogger

Sempre que salvamos imagens no sidebar do seu Blogger, ela fica colada à esquerda ou à direita, dependendo da posição da sidebar.

Quando colocamos por exemplo um Slideshow, (clique neste link e veja como criar um slideshow em gif.) que deverá estar abaixo das guias das páginas, nunca fica centralizado.

Mas, nossos problemas acabaram ! Siga os passos abaixo e centralize imagens ou slideshows utilizando os gadgets da sidebar.

Veja como ficou centralizado o slideshow que fiz neste Blogger: Trilha do Pão de Açúcar.

Em primeiro lugar, para adicionar uma imagem que deverá ser centralizada na sidebar, não utilize a opção "Imagem" quando clicar em "Adicionar um gadget".

Escolhida a imagem que poderá ser em qualquer formato, inclusive em gif., clique em "Adicionar um gadget" e em seguida em "HTML/JavaScript".

Agora, configure o script abaixo conforme desejar, copie-o e cole-o na janela do "HTML/JavaScript":

Caso não queira dar um título à sua imagem, apague o que está em vermelho, mas deixe as "aspas".

Salve, visualize e arraste o gadget da imagem para onde desejar que apareça no seu Blogger.

Quer ser um Influencer no Instagram e ganhar muito dinheiro com os seus posts ? Saiba como acessando o link abaixo.

Influencer no Instagram

Instagram no Blogger / Blogspot

Vamos inserir um gadget com suas fotos do Instagram no Blogger. Para tanto, use um dos seguintes sites:

SnapWidget ou BadgePlz

Quer ser um Influencer no Instagram e ganhar muito dinheiro com os seus posts ? Saiba como acessando o link abaixo.

Influencer no Instagram

Configure e customize à partir do seu nome de usuário do Instagram. Clique em "Get Code" no SnapWideget ou "Generate" no BadgePlz, vá em "Layout", "Adicionar um gadget", "HTML/Java Script", cole o código gerado, salve e arrasta para onde desejar.

SnapWidget

BadgePlz

Plano de fundo que muda sozinho no Blogger

Esta é uma novidade ! Faça um plano de fundo para o seu Blogger, com três ou mais imagens que se alternam.

Vamos lá:

Em primeiro lugar, escolha três imagens para o seu plano de fundo. Deverão ter 1.800 por 1.600 pixels. Você poderá procurá-los no Google Imagens digitando " blogger background". Escolha as imagens e salve-as no seu computador.

Baixe o programa PhotoScape e siga os passos abaixo:

Abra o PhotoScape e clique em "Animação Gif".

Agora procure o arquivo onde estão as imagens. Procure no lado esquerdo da página do PhotoScape.

Achando o arquivo e as imagens, arraste-as uma a uma para a parte superior do programa.

Configure a velocidade de mudança das imagens e o tamanho.

Com tudo configurado, salve a animação gif.

Neste próximo passo você irá hospedar sua animação gif no TinyPic. Procure este programa de armazenamento de imagens online no Google.

Feito o carregamento da imagem, clique em "Upload now" e em seguida copie o quarto link.

Salve o link no Bloco de Notas do Windows.

Agora vamos ao Blogger para configurar o seu plano de fundo em gif.

Vá em "Modelo", "HTML", "Prosseguir", dê um "Ctrl + f" no seu teclado e na janela que se abriu, cole

body } conforme imagem abaixo.

Agora todo o cuidado e atenção ! Como no quadro abaixo, você irá inserir o link da imagem no html do seu Blogger. No código, insira somente as linhas em negrito. Lembre-se que este link é o das minhas imagens. Substitua pelo link das suas.

body {

font: $(body.font);
color: $(body.text.color);
background: $(body.background);
background: url(http://i48.tinypic.com/15ow080.gif) no-repeat;
background-attachment: fixed;
}

Visualize e publique.

Quer ser um Influencer no Instagram e ganhar muito dinheiro com os seus posts ? Saiba como acessando o link abaixo.

Influencer no Instagram

Imagem gif no cabeçalho do Blogger/Blogspot

Vamos colocar uma imagem .gif no cabeçalho do Blogspot / Blogger.

Esta imagem .gif, pode ser criada para uma animação de uma logomarca ou mesmo um efeito diferente no título do seu Blogspot / Blogger.

Em primeiro lugar, você vai precisar criar a sua imagem .gif. Pode criá-la no Paint do Windows ou equivalente.

Como é uma imagem .gif você precisará criar várias delas até você conseguir o efeito final. Será como um filme. Vários quadros sobrepostos que você vai escolher a velocidade de exibição.

Para o teste, criei estas três:

Veja como ficou no meu Blogger de testes.

Ferramenta de Testes

Feito isto, abra o PhotoScape. Se não tiver este programa, baixe-o. É gratuito e muito bom para edição de imagens.

Com o PhotoScape aberto clique em "Animação .gif ".

Clique no nome do arquivo do seu computador onde estão as imagens. Localizando-as, com o botão esquerdo do mouse, arraste-as até o espaço em branco acima do grande retângulo central.

Feito isto, é o momento de configurá-la. Você já estará vendo a imagem no retângulo central. No lado direito, há os controles de configuração.

São eles:

"Mudar efeito" - Neste, você deverá testar todos, até encontrar um que melhor demonstre o efeito desejado.

"Alterar velocidade" - Altera para mais ou para menos. Vá testando.

"Tamanho" - Escolha geralmente o da primeira foto. Ou altere como precisar.

No menu direito do programa, clique em "Salvar".

Hospedar a imagem .gif

No Google, digite TinyPic. Acesse o site clique em "Escolher arquivo" e em seguida faça upload da sua imagem .gif . Após carragada, copie o 4° link ( Direct link for layouts ) e cole-o no Bloco de Notas do Windows.

No Blogger

Antes de começar esta parte, vá em "Layout" e clique no gadget do cabeçalho do seu Blogger e veja se há opção de excluí-lo. Caso haja, faça a exclusão.

Vá em "Modelo", "HTML", "Prosseguir", "Ctrl+f" no seu teclado, cole o seguinte código:

.<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Localizando-o no código Html do seu Blogger, mude "1" por "5" e 'no' por 'yes' . Clique em "Visualizar" e dando tudo certo, "Atualize".

Agora, cole o próximo na janela do "Ctrl+f" . Localizando-o no Html do seu Blogger, mude 'true' por 'false'

<b:widget id='Header1' locked='true' title='Título do seu Blogger (Cabaçalho)' type='Header'/>

</b:section>

Clique em "Visualizar" e dando tudo certo, "Atualize".

Vá em "Layout" e na parte onde estava o cabeçalho, clique em "Adicionar um gadget" e na janela que se abriu, clique em "Html/JavaScript" . Fazendo as modificações conforme abaixo, cole o código.

Salve e pronto.

Quer ser um Influencer no Instagram e ganhar muito dinheiro com os seus posts ? Saiba como acessando o link abaixo.

Influencer no Instagram

Como inserir fotos no Blogspot

Vamos aprender a inserir imagens, fotos nas postagens ou páginas do seu Blogspot.

Conheça a apostila "Como Fazer um Blog Comercial ou Transforme o seu em Site"

Em primeiro, faça login na sua conta do Blogger. Adicione fotos nas postagens ou nas páginas da mesma maneira.

Editar Postagem

Na próxima, escolha a postagem ou a página que quer inserir as fotos. Se for em uma página, clique em "Páginas", escolha a que você irá inserir a foto clicando em "Editar" no menu abaixo dela.

Editar Páginas

No ícone quadrado com uma pequena imagem, clique nele. Em seguida dê um clique com o "mouse" dentro da área da postagem onde irá inserir a foto. Se for abaixo de uma frase, dê espaço e clique logo abaixo.

Ícone Quadrado

Vai abrir a seguinte janela:

Clique em Escolher arquivos

Vai se abrir agora uma nova aba onde você irá buscar sua foto. Lembre-se que é uma de cada vez.

Carregue sua foto

É só clicar em "Adicionar Selecionadas", e pronto. Sua foto já está na página ou na postagem escolhida.

Clique em "Visualizar" e depois em "Publicar Postagem".

Clique sobre a imagem já inserida na postagem ou página e escolha a posição e o tamanho dela. Ou também pode escrever no rodapé o nome ou algo que queira.

Clique em "Visualizar", saindo tudo certo, volte a página e clique em "Publicar Postagem".

Slide Show no Blogspot

O Slide que eu havia postado não funciona mais no Blogspot. Mas, abaixo segue o link de uma nova postagem que ensina um muito melhor e mais fácil.

Slideshow simples e perfeito para o Blogspot

Abraço, e sucesso sempre !

Para saber mais, adquira a nossa Apostila.

Ampliar imagens no Blogspot 2

Vá em "Design", "Editar Html", "Ctrl + F" no teclado. Na janela que se abriu, colar:

Antes desta tag, cole o próximo código:

Feito isto, é hora de você hospedar sua imagem na web. Para isto utilize o site IMAGESHACK . Abra sua conta gratuita no site, vá ao seu email e clique no link para ativar a conta e faça upload da imagem.

O link que você irá usar é o "LINK DIRETO". Copie o link e cole no espaço indicado no código abaixo. Este código você irá inserir na sua postagem da seguinte forma:

Na postagem, clique em "Editar HTML" insira o código já com o link da imagem. Clique agora em "Escrever", ajuste o local onde quer que a imagem apareça, se a esquerda, centralizada ou a direita, visualize a postagem. Estando tudo certo, publique.

Veja o efeito na imagem abaixo:

Para saber mais, adquira a nossa Apostila.

Ampliar imagens na postagem do blogspot

Para fazer este efeito, vá em nova postagem, clique em "Editar HTML" na postagem, copie e cole o seguinte código:

Onde está escrito "AQUI O ENDEREÇO DA IMAGEM", cole o link da sua imagem que poderá ser hospedada no Picasa ou o ImagemShack.