Todo mundo sabe que o Blogger é mais utilizado para blogs pessoais, e mais do pessoal tem toneladas de fotos. Este será um muito rápido tutorial sobre como adicionar legendas às fotos para melhorar a usabilidade do seu blog e ajudar os visitantes a identificar a descrição de cada foto você tem em suas mensagens.
Este tutorial é inspirada em um screencast muito rápidos feitos por @ mads que pode ser visto aqui. Eu só achei muito útil e decidiu adaptá-lo para os usuários do Blogger.
O resultado final
Se você quiser vê-lo trabalhar por favor verifique a demonstração ao vivo.
Explicando o método
O pequeno script que vamos utilizar aqui é muito simples, ele irá adicionar legendas de todas as imagens que têm a classe addCaption, eo texto em suas legendas será o atributo "title" de sua imagem.
Passo 1 - Instalar Biblioteca jQuery
Você só precisa fazer este passo se você não tiver instalado ainda jQuery, se você já tem, você pode pular para o passo 2. Para instalar o jQuery basta colar o seguinte código imediatamente antes do tag </ head>:
<! - JQuery ->
<Script src = 'Tipo http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' = 'text / javascript' />
<! - End of jQuery ->
Passo 2 - Instalando o Script
Agora que você tem a certeza que você tem jQuery instalado, você precisa instalar o script addCaption, para isso basta colar o seguinte código imediatamente antes do tag </ head>:
<! - AddCaption ->
<Script src = 'Tipo http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' = 'text / javascript' />
<! - End of addCaption ->
Passo 3 - Adicionando algum estilo
Let's make it look beautiful, cole o código abaixo, à direita antes do seu ]]></: Linha de pele b>:
/ * Image Captions
-------------------------------------------------- - * /
div. addCaption (
margin - bottom: 1.5em;
padding: 10px;
text-align: center;
background: # f0f0f0;
border: 1px solid # ccc;
color: # 565656;
display: inline-block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
)
div img addCaption. (
display: block;
)
Usando o Script
Quando terminar a instalação, basta salvar as alterações e você estará pronto para ir. Para usar o script, sempre que você precisa para adicionar legendas a uma imagem, basta dar-lhe addCaption classe e escrever o texto da legenda no título do atributo. Verifique a imagem mostrada acima, explicando o método.
Adicionando legendas às imagens enviadas pelo Blogger
Para adicionar sua legenda para imagens enviadas através Blogger é a mesma coisa:
Clique para inserir sua imagem e defini-la como faz normalmente.
Agora vá para o modo Editar HTML, adicione a classe addCaption e definir o título que você quer ser mostrado na legenda para a marca <img>.
Palavras finais
Como você deve saber que há muitas maneiras de adicionar legendas às imagens ao redor ... Incluindo algumas alternativas de fantasia e animação. Eu encontrei este muito simples, mas eficaz, e decidi publicá-la aqui.
2 comentários:
Muito legal o artigo.
Mas para mim que ainda engatinho em HTML é um terreno em que me sinto inseguro.
Mas vou repassar o seu artigo para a minha comunidade no twitter, pois lá tem gente que poderá aproveitar isto muito melhor do que eu.
Se quiser conferir a indicação é so me visitar. ok?
http://twitter.com/fernandolessarj.
Abraços
olá Fernandolessa já é um bom começo engatinhar eu como construtor civil não fazia a menor idéia de códigos fontes também, comecei assim como você mais se precisar de uma força estamo ai ok um forte abraço e uma ótima semana.
Postar um comentário