Dicas Blogger: Botões/Banners

Home » Categories: Botões/Banners

Mostrando postagens com marcador Botões/Banners. Mostrar todas as postagens

Como criar botões com CSS

<img width="112" alt="css3" align="right" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBYS3Uc1tXaSc6bnA6ql8ADK9ois1H158Vphk-DRr_EJA_sNAbTfG5l0wE7XjLwCdgUQfLwRf31CYZ1mLJg3S-Clt8Jgou7V-I7_liyaL80D9s5QEN3mlBoM5fRLmdL_3su0rdGYMhGMrj/=3fimgmax=3d800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" height="112" border="0" title />Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das páginas da web. Eu <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/search/label/HTML=252FCSS">já ensinei</a> algumas técnicas legais pra deixar seu blog do Blogger mais bonito e profissional e hoje vou explicar como criar botões (buttons) usando apenas CSS. Entre no site <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/css-tricks.com/examples/ButtonMaker/">Button Maker</a> e utilize o painel da direita para personalizar o botão: <img width="502" alt="css-button-maker" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKDq8n8RnKGaIHGRL90YV4Cvxtox9dwMPVzVy32GVRBp2mKG0u7Nx9-acKmJ2Jpqo0Kq0ia155atHUWi7AYJprD5-hkAGOCrvX5m5JatMGjUswU1DFF_t969rzW2lmPxb3tFEfM2sJey5j/=3fimgmax=3d800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" height="297" border="0" title /> Use os 3 controles deslizantes para escolher o tamanho e profundidade do botão. Embaixo, escolha as cores da seguinte maneira: <ul><li>Top Gradient Color: cor do topo em gradiente </li><li>Bottom gradiente color: cor de baixo em gradiente </li><li>Top Border Color: cor da borda do topo </li><li>Hover background color: cor do fundo ao passar o mouse </li><li>Text Color: cor do texto </li><li>Hover Text Color: cor do texto ao passar o mouse </li><li>Active background color: cor de fundo ao clicar no botão</li></ul>Depois que o botão estiver pronto, clique sobre ele e copie o código. <img width="502" alt="css-button-maker" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WRBZbo_fvSgqU9wJ92vGutqEfQXbdsS3zspS9U1DDk_bOQErdQ8Hd8ZjI5aCyJxMma9vBpUIWp8XqSlepF63-Ylv9_aWHCca4QeJfG7Sz63YfgdZKtBJBqL8EfMcqSupuWntSKnfyGrq/=3fimgmax=3d800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" height="292" border="0" title /> Entre no painel do Blogger, clique em design>editar HTML. Faça um <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup do template</a> e cole o código antes da tag ]]></b:skin> (use o Crtl+F do teclado para encontrá-la). Substitua o ponto (.) que está antes de cada palavra “button” por jogo da velha (#). Ficará assim: #button. Visualize e salve. Em “elementos de página”, clique em adicionar gadget HTML/javascript. Cole este código: <blockquote><div id="button>ESCREVA AQUI O TEXTO</div></blockquote>Escreva, no local indicado, o texto que deverá aparecer no botão. Se quiser colocar um link, use este outro código: <blockquote><div id="button"><a href=”LINK”>TEXTO</a></div></blockquote>Pronto! Agora seu blog já tem um botão feito apenas com CSS ;) Veja, na imagem abaixo, um botão que criei para o DB ( é o azul): <img width="502" alt="css-button-maker" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1krCPoDDXars6POENJ4ccvLX6svOz_Qmfx_N7outYD3FC-Uo7t2P6A8f-AGcEoCZP1EMZ6zadTijtYs7QvnY9r7tTdeuE-FyIiIrKysTaJbzJEyvAlF7Y1b4C-GTke2XJKzolb1XauoM/=3fimgmax=3d800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" height="233" border="0" title /> Existem outros sites para criar botões personalizados em CSS: <ul><li><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.cssbuttongenerator.com/">CSS Button Generator</a> </li><li><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/css3buttongenerator.com/">CSS3 Button Generator</a> </li><li><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.1pagedesign.com/css_button_maker.php">CSS Button Maker</a></li></ul>

Como criar botões com CSS

Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das pá...

Continue Lendo >>

09:49

Como criar banner simples com o Photoshop

Já que vocês gostaram tanto do <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2010/07/banner-animado-photoshop-cs4.html">post anterior</a>, resolvi fazer uma pequena série de tutoriais sobre o Adobe Photoshop. Antes de mais nada, quero dizer que não sou nenhuma expert no assunto, mas me viro bem com ele :) Em 2008, eu fiz uma vídeo-aula ensinando a criar o banner estático no Photoshop, mas, sinceramente, eu não tenho muita paciência para assistir tutoriais em vídeo – prefiro em texto e imagens. Pensando nos impacientes como eu, resolvi fazer um tutorial semelhante, porém escrito e já com o Photoshop CS4. A ABRAWEB – Associação Brasileira de Web Designers e Desenvolvedores – padronizou os tamanhos e tipos de banner para uso na web e vocês podem escolher entre os vários modelos disponíveis - <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.abraweb.com.br/site/banners.php" title="http://www.abraweb.com.br/site/banners.php">Padrões de Banner Abraweb</a>. Vou utilizar o modelo que é mais usado em blogs – 120 x 60px - mas eu penso que cada um pode criar um banner do tamanho que for melhor para o seu blog. Para ampliar as imagens utilizadas neste post, basta clicar sobre elas. Abra o Photoshop, clique em arquivo e em novo. Escolha o tamanho 120 x 60px, com fundo transparente (figura 1). Como o tamanho do banner é muito pequeno, iremos aumentá-lo para termos melhor visualização. Clique em imagem e tamanho da imagem (figura 2). Aumente para 600 x 300 px <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidU0es19eejT2PQyIA6LtZKsTZ346_bUQeSz79yJV5d4NgbVVdNmnh47zdbQ_Y4Tc0nTpght9qEsfI6R61gFI-3aEIiY36T54hHlDxi47MLt_aShUtTc_lOxkyCmV9aWyTy1PxujJaIILn/s1600-h/image=255B53=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQ4rj_qZ15HGIVf6JXfS3tydVN7i_pukrcaHdi7aOKJ3Omp7XiV_hpGz8TReLdMc0P0zn2kcRVenT8ZrSzSqPWGZR7f-zyJ7TUZabUpe4JRbpg1Rd5YCeIdNHt4xV_COVvvEkqw4duCZ0/=3fimgmax=3d800" style="border-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" height="126" border="0" title /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvK_f1tjnnfi2aeN9P-g0MDXOilu6V9FNeSyJIoNQtZe83rcb63sm6TJDXbRJm-0Oe8c49T85UDlaeI8rszBrzY8lU0icGMCi1N6nOnbjMSkzQ45Nr99Eo1Kp6yDXGOmNSZ3vOxrW_6lE/s1600-h/image=255B56=255D.png"><img width="240" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2j6b9uvZEZR0bFryIok8Nj0ZBNcOrfeDz2VB2OLF-bA3mLYbFXhz8oUK2wG6OfeKjOJrQtHHEQaRI07B_6-rwx6BTtv6qUpZAg9KvA19LB2bjPINc05kaxLGnYkDQjRy7cuaWUccPw0Oj/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> </tr> </tbody></table> Agora vamos colocar uma cor de fundo. No Photoshop podemos usar uma cor sólida ou um degradê (figura 3). Vamos escolher degradê pra ficar mais emocionante. Escolha as cores que farão parte do plano de fundo, clicando no local indicado pela seta 1 da figura 4. Escolha as 2 cores separadamente. <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMp2GH9JY22QH8xGAcWP9kraMvk9n1hlqVoZOh7VHiQqrHAH2xYLOPv6uPWT6ItvQAzu8g_UAxjoCSlwGLRIXOL1qaQUirLyJL4GG4wbluOvkqbU8G6vE7xr81KVpYpiJDSEzeG4ECcg-Q/s1600-h/image=255B57=255D.png"><img width="239" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj198BJLOyQvjNRV33OhnLL-ZuwH_2BcQckG-1lmaA0hC-nbFm-edc34-L085JfFxvuf_3bqnyxKx78t0hGSYojRwwFxWumlIynJPKji_7ArCC3bJeAoVFG5pp72VUX2iwsBAYj84rrSqwp/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ1m50qk4U53iGizyFlAuYKPczkez3s3xKHf8uy1wCbviUdZzaDCoNsHvjmMF8jwuAATUtg0ne7lrWkZXI1Gnbc04igMUgyFJba7UNlW638Wh16fj2frCIxrt9SNji7X9dxCut19MrhHIb/s1600-h/photoshop_degrade=255B9=255D.jpg"><img width="239" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4-6EgggZBoxU6vF10f-WxCGji3hwTSSz8BjS08JneTKNQst45CKmzX_YA13l4x2xeDnzL2hXZ5jwgUxiDZXYhAY8EMK-EIX8haLTD3g66bt-PynsFxofWakz4QJmXgqWEvR-6cj6cfd8/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> </tr> </tbody></table> Selecione a ferramenta degradê (figura 3) e passe a seta do mouse dentro da imagem e de uma ponta a outra ( figura 5) Repita até encontrar a cor ideal (figura 6) <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj36zJMKW9OVyjk4vskGwg57IXrRpCT1Weq0aRefXhLqv7teA9Ylp280p4iKgom5288NUCO_k8pVskhARQzo3Z7DVhf6awwEsqDfcDvPxPmMpJpUMw2kcaX4Ua29Nj5KVN7WZEkcxVNneFZ/s1600-h/image=255B64=255D.png"><img width="246" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kB9Xc3bwmhwFKfFcQMwTsPD9A7qB6GWJEc-LNj4018A5YNAAkPygM6iLly-FTnIrwRK9RmtOiN5lRK1GlC-wYRXLyi3kFxneiAeyPiUhRKvVxIDj00bDqhlk1Xc7FxgVkD_4o07qFUP9/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicdlTeyKZsHBCmU8LJwsmLaZ0NkHn8KfB3igQW0bAsFa2Oom7qRhWSCp1oDQqr-taoTGOLXy2cqXfEoz1kBVkrzaFcrW8HBBO3VMXh4zp-Qui5UnWZGj7Pqe1JHwf8Bf4vxY8khe2HXiTb/s1600-h/image=255B65=255D.png"><img width="248" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKxIjk7PpoKDMj2bRKkAl1tih4-mZDCeqNrQvbLawr7t37QWevQLo1BIm8afVngq8l1PIISNq6QQnFk85unh-BIDShU2hoer6BX5tD8kCFtCTziZMEQzdTvQO0D83QkWIO3pGEit3AmZN/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> </tr> </tbody></table> Selecione a ferramenta caixa de texto ( figura 7) para escrever dentro do banner. Escolha o tipo e o tamanho da fonte (figura 8) e as cores (figura 4) <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YvpN0MV0EZYvTwZ3Qx1jpqe385sp37eofQO6BIENWxxdWEYJP5o22-CDU7lOMh3ZN8GO0OsZjjeupW3OYXeNFhCymqwWKYLjvsx9PUlnL2Pp3_vvfN3Z1zXgms56D0A3VuVSkVqFU5pe/s1600-h/image=255B66=255D.png"><img width="244" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz124ny02xA-fTRNmAnWsIuK8nebfdYPbJcO636MLxcHyWkxMnhjB7JFspBMT0Xf4sdtQgeYAoN7rbkgOY9JObK2PdvmKxfZH7LAlFvWteHBhZcA5BUs2ACgNZWU5EhaBYoAREg33OsTYD/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwLU0kcSMu4oKn90NRpiT6Yxr_jP7aGwAE7gfrdxvuJ9PrVn5V2uNbO3v1wY3aeAY1mMBILH_99k8fmGJArWgI60RWv2oxqAEAHosbadS-j0zEDFw0SYd9DtE_1uEJCKvDQEQCL3yHBLH/s1600-h/image=255B67=255D.png"><img width="238" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQKJFTQcgPIsfZMHqvCjTRwGIkknyvaAqyw8musoq66kb4YGfD9ruJStcMCxbBPkFqdaB7lo3jR4SSXsJy_kr6rI4cri1_6Xjhusne-YuGn1qClgrzAlyNUYQ01_fYIY-QC5SUddEOg3c/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> </tr> </tbody></table> Escreva o que desejar e, se quiser incrementar, passe o mouse sobre o texto todo, clique em camadas, estilo de camadas e opções de masclagem (figura 9). Faça vários testes, pois é bem divertido. No nosso banner de exemplo, eu usei apenas a sombra projetada ( figura 8), mas existem várias opções de mesclagem. <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD88dm-A1D5iwqgjBLwMEOUqatux4grn9krTM9oaidSIt7f3BK8l7SslmVXxNI0JiSYoqoC5lF0CLtDApztWbd_zOpqfgXeaZ6NwrB6d0ragbZXlYTGx9GGA10aHNGjgE7LG2TP81bWkvo/s1600-h/image=255B68=255D.png"><img width="224" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0_1o_2pk2_4YiVqQcWBoX6BKtZQutuLV-aIMpG5eaPZzrDmYsnq8933aJwiP6Hex_LfyjcluzM-pGgIwa9l9EVScfAvQaaRiWeMkptYKoKFg9a_rT8im9EmvP4xhfA44Z1uT93SjZTRl/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_dTVLMI4KSaZoo8UVyRfgXEE83uPMTLXhTVm9OeiTp2M3TCri0pnCwDtX0m6BsKXY_6TvMwxawBxXqpm9uYKL-m9Q7tuuXCwGH_2XktrUJwONT8IkzsMU2HHISl9hs7UYZCsliPWNUEd/s1600-h/image=255B69=255D.png"><img width="229" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24Snv-kcJCzT0VKfLJmJ2LgSMSpAWQzvgMVI0s0Q4_O4jfi9rF3y5hJqwBR5jKbUzv_nL1uDISofABvOsoVUrPMFYJixYktXqrMVufqdU_nMS2QC4I59mkuosUthcwRDo3Os3BRd9YddP/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a></td> </tr> </tbody></table> Agora vamos voltar em imagem, tamanho da imagem e reverter o tamanho para 120 x 60px. O banner está pronto! Salve no formato .png e caso queira colocar em seu blog para divulgação, acesse - <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2008/12/caixinhas-para-divulgar-banner.html">Caixinhas para divulgar os banners do seu blog</a>

Como criar banner simples com o Photoshop

Já que vocês gostaram tanto do post anterior , resolvi fazer uma pequena série de tutoriais sobre o Adobe Photoshop . Antes de mais nada, qu...

Continue Lendo >>

20:34

Como criar banner animado com o Photoshop CS4

Há muito tempo atrás, fiz uma vídeo-aula ensinando como criar banner animado usando o software Fireworks. Hoje “cismei” que queria aprender a fazer o mesmo, mas usando o magnífico Adobe Photoshop. E não é que deu certo? Primeiramente, é preciso criar uma sequência de imagens estáticas que farão parte dos quadros do banner animado - <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2008/01/srievideo-aula-criando-banner-no.html">Video-Aula:Criando Banner no Photoshop</a>. Como o tutorial ia ficar muito grande, resolvi colocar a maior parte das imagens em tamanho reduzido. Para ampliá-las, basta clicar em cada uma delas. Como exemplo, vou usar 4 imagens que criei previamente. Vamos considerar a primeira imagem como o primeiro quadro do futuro banner animado. Copie (Crtl+A/Crt+C) a segunda imagem e cole (Crtl+C) em cima da primeira, formando assim uma nova camada. Repita esse procedimento com as demais imagens. Clique em janela e procure por camadas. Você vai ver todas as camadas que acabou de criar. Agora clique em janela e depois em animação. Na figura 1 vemos as quatro camadas, numeradas de 0 a 3 e, logo abaixo, temos a janela de animações. Vamos desmarcar as camadas 1, 2 e 3 clicando, no ícone correspondente, que parece um pequeno olho ( seta 1). <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/"><img width="452" alt="Tutorial Dicas Blogger" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqbOSZJBJS7k7d2MuWz_8nndLiZWQZEzwaNr4tZdsOviOFrI059PGsZPcUz-zcOXSuuldTcYFQE-niEAVOKCA_eFcW7Fas9eNqiv1HZCY7tdQwlB1dX6kU2YPT-wwlVmiirmx210k-TYe/=3fimgmax=3d800" style="border: 0px none; display: block; float: none; margin-left: auto; margin-right: auto;" height="251" border="0" title="Tutorial Dicas Blogger" /></a> Clique agora onde está a seta 2 para abrir um novo quadro. Desmarque a camada 0 e marque a camada 1. Repita o procedimento para as demais camadas (figuras 2 e 3) <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLGD3AS-nvt59uzAuWHLb-G4stON5dewgevP-bkKSRXfR8MDzVnCsQgfMiyDYDagAFLsHnOuBaCo9PNZxUmPNmkUEGWdmwSdfblUAV9DKXspLs-ZwfKNy1B6haX9lNFrT43vprhAwGt5r/s1600-h/tuto2=255B14=255D.jpg"><img width="242" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnmNS0WUV3A3LVVTZEWnZtfdaBHK_pOE_yn87M5oKwWgFogxlHrbWVtwa-JX0tmlPjJA0UngT3fu60GefnZtxvizsY8qWQi0MGyj_hvhfJrre66yadKw6bSzEWmfZlkl-Ze-NaHwoxQOaq/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="125" border="0" title /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiO7bWUjxTdrJey4-POR4fyCEDJjkdELnB4bnhV_KRXVHBniaT_pmAaTLd5Cf9_-gpNOhE0bHyQ0bf9IlbFeZwyI-67GSmnjerbp_KhfR8HbJ-L_Yx27N-BrAqpEGUSfMIfpPF2tVqM6kv/s1600-h/tuto3=255B12=255D.jpg"><img width="242" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKu3TmWvjfgWghegnHBbafiE6opfOo_BtwcsC5s37KezxSGfx_P7_4UKgTqoulWtxXRUNE0C4KfJdnF2NGKmJ0L_30W8ojm0-UB-IFzHL1MYe6En2YJ7ERuRYdcZ4M8_GHia5vkor5Fjog/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="122" border="0" title /></a> </td> </tr> </tbody></table> Agora, vamos escolher por quantos segundos será exibido cada quadro. Clique logo abaixo do quadro, onde está escrito 0 seg (figura 4) e escolha o tempo (sugestão 2,0 seg). A seguir, visualize a animação, clicando no local indicado na figura 5. <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadKE3udmBowQzKDVN46jwbeO5W7IBwKzVENfUGFFWd1NFfUeNEInGQ99egzlQ_LlYlBgldJ7KZQzv72Rh_iLcguZ4phMTwey058aMC5X6QmQ2di5Y1dzcRpJzTJt_wifeCjp3Q5xsuDQy/s1600-h/tuto4=255B6=255D.jpg"><img width="242" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbauQPVqH4b5UHDfqFob6b4DRayRro8LP9zNhSUPTl7I1mb0S8Ybp9APPJECsiFc7_g7OgX1rey1yJeidGlB49XJO4bMjSQqBy7NqdRiKrp-5BC2m_XLzkD1RGtksWT7GnOq0qoPV8x0aT/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="116" border="0" title /></a></td> <td valign="top" width="275"> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mEchandXoiFWQAqtu9TYhcSxohj0eMXUnVqldeeifT82CpJRFW5npimOhR5FpR4kvw_3MgHr7wG6TeBV6zq7jDyC4VhTSaOgfj5ywE9Wv3HZBRG9rhEIK4EMraE1DlB-OkLCpOwRHCCE/s1600-h/tuto5=255B9=255D.jpg"><img width="242" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BRjMb6CJVfKFHgORAKjPC0wDQECG_tvcSvcesqipUb5yzfCF-aG8QvihLAOP-ZHms3QS12pgOE5FlQpH7qdoBgjEU6ftvBKYcw0TslbbXvScdecGcWxEHguZLAsXeIdgGjB96yjjjLMc/=3fimgmax=3d800" style="border-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" height="116" border="0" title /></a></td> </tr> </tbody></table> Se tudo estiver Ok, selecione todos os quadros, clique em arquivo e salvar para web e dispositivos (figura 6). Faça as configurações conforme mostra a figura 7 e, ainda na mesma janela, clique no botão visualizar (veja a seta) <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqdlh6EwOGmgsvPSbQq72PKsqXa5SBNyDI9l8wBECDbZhhEk0DWKgjnPcl3YiHgxGyiMI0XgYWwMwgiSHl3OWMmkkVVeBg8UUhZHStn5iAMqRdS0SQ1fgRXq0_eoSn2D0Q6uRdzkqBWmdL/s1600-h/tuto6=255B11=255D.jpg"><img width="241" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYfafAgqMDipiqcPTrX4eYLM-3WXNWmEdMPdHxWy2hRPrGclmZ0e67ZKHdM4lSfwya-Gy6Eu-BRN1aklkogMyitvcs_Ij-1ewU0oknsSOQwlQ_X0eQYt-pAbt_YSxjJjewYX0aJqoR-sbr/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="159" border="0" title /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJVkU5n1yB7AaX6HScrDNlB1tK87IXIAW3nesrfmHJ5NCKqYsgvXj2pIQ6fVy2n1gbLwgHZSmu-dwZVXKrkdIQGpujhace3LbsAVt1rdw-VeYphSS7G2w3DGrslZpfyMbSDGlrEuy7l5gy/s1600-h/tuto7=255B9=255D.jpg"><img width="251" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjULnnoAiwtO6WpiaHpR4NdBXzaYe7QQp-_jp3aw86wZ1HTelEEMQsx7SkwyVTLMvuYLbqR3KrbyzRAlHkZIFX0EOPKRZGdlM364Y1XIP54sbkoaxv7g6KyrIWo5c1ZImzejZw5qCsJgV-I/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="163" border="0" title /></a> </td> </tr> </tbody></table> A animação irá aparecer no navegador. Clique com o botão direito do mouse e salve. Eis o resultado do banner animado, que foi utilizado para este tutorial: <blockquote> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6DfZ1JwEn8n8S71pe-81lrOLvPA9c_kvDZX2OIc_AKhY8rE1JXCwuPYSmQOKRXKbuyFGDaEJ7ODKjxJ6dmyFK-pQQFlzyJQQ776Ej4xpebK7m-3_UR4IiSkcLcEeGA3skA_sPcWIebCvJ/s1600-h/banner=255B6=255D.gif"><img width="300" alt="banner" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnlnLO9O9VSxcXndyVYcCDwYzTfGFJdlBKcNA9dkHoZwociRCXHWrasOqS0PodvTBda_-pmQ703yZEOk4Dg6riULea3nE0SUF3-aqNzXxmORGo5hWlJc7EynB4WfYZAavLwj8S_HRjewU1/=3fimgmax=3d800" style="display: block; float: none; margin-left: auto; margin-right: auto;" height="80" title="banner" /></a> </blockquote> Para colocar o banner em seu blog do Blogger, faça o upload para o Picasa (figura 8), por exemplo. Você deve escolher um álbum, clicar em arquivo (1), procurar o banner que foi salvo no seu computador (2), clicar em abrir (3) e depois em iniciar upload. Ao término, o banner animado irá aparecer no seu álbum do Picasa. Clique sobre ele para ampliar e copie o endereço/url da imagem (figura 9). <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1gbT6idyxyHmtgrOyawnBgPuY-Ac0zhm1zNcQCy6qXlDS-TJOcKIikK6Zlk_Uxrl-zrx5Y5CuZYiUT2OjsD0PmPGHEal8UsNTyU0LR7q51eKPF5Hoi0iMslRQQj-zbqorAI6HxgSwoBb/s1600-h/tuto9=255B8=255D.jpg"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmfWc1f9lHiTGUGAp83pOMKgLf7nffOeHGvJZLojGMO0YwsalTgi6615-hsYpWK6hSzPMXbZCIYxa69lVCjGDMQrdHulgbUD-pHn8cAmw0U09hSr_dJ4zb0O0Io_DXpd2Khxt6Jd0WuxX/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="123" border="0" title /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQAt_fDamED4cdMsckbOsU-bX-B4boVuGkLk70wk8uWnc2BX2KVGVUhJH6s6jvKTRXm9nwkf-mUZtstegGm_FyKVk1EqQa6laAGcNfBjB8LbOWVvYZL8LA4-A9BLFR_5gpGOPpkahP_YW/s1600-h/tuto10=255B8=255D.jpg"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUx6kAw9h2BQ2lmVRI1xIt7emPDXZ38zl7krOhoWHJePKkmk-DkRyCJ01ZjJiVChRAB446i4eo5lwDSb-4Q3LSyEhRgHE64KoJojFH5J68FWu1lBnkB3pG2tBp1OJ5xlJZO45VXaFqOrwS/=3fimgmax=3d800" style="border-width: 0px; display: inline;" height="126" border="0" title /></a> </td> </tr> </tbody></table> Abra o gadget html/javascript e cole o seguinte código, com as modificações <blockquote> <a href="endereço do site"><img src="endereço da imagem" /></a> </blockquote> Depois é só salvar e pronto – o banner animado estará visível no blog ;)

Como criar banner animado com o Photoshop CS4

Há muito tempo atrás, fiz uma vídeo-aula ensinando como criar banner animado usando o software Fireworks. Hoje “cismei” que queria aprender ...

Continue Lendo >>

18:56

Botões para o Twitter é com Twitter Buttons!

<a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3PHeKguNzpL1_TUvm2625n1NhW8oKyiW92xgUTG3qXdwy9jllDfI1eRX80yl4UV0xTbGdz7oic9hnQpD4JZ8ZqoQlPJ_aBsRsyYIgSDnnDzJJ9NdUPnTSv57yfFEie8RS4Y8CsCr601t/s1600-h/twitter_exc2=255B5=255D.png"><img width="337" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqeTZmvVtkI7ECRiMxie7VKoI4601xyG9Y8MNQpkQMcKJzgReRkSpG3p2YJgqijQakLFKJJBnYnqp7I9DO7dR7pwKWaOrzU02JB-jXmfC7VBSojv0HUUUFBdzRgN0c5W9lwCwtZtgh5QR3/=3fimgmax=3d800" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="125" border="0" title></a> Gostaram do passarinho? Eu adorei! Hoje, descobri um site repleto de botões com convites para sermos seguidos no Twitter – é o <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.twitterbuttons.com/index.html">Twitter Buttons</a>. Apesar do layout esquisito, a utilização do site é bem simples. Basta colocarmos nosso ID  e clicar em go. <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4B91rDcMon13tiSHiE8wQ7B2yEmMhlnkcZDZQO8kNLuBKNsHKooOwWVmgBPrKvCfbptwwScUWjJU-FcKmvwWVPxJmhRaejKdXondTE__jTA3I0DuczIxvjaBCZ5xCsOH2sBtqHk56bRNs/s1600-h/image=255B7=255D.png"><img width="409" alt="Twitter Buttons" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUfYkES1U1YflQfB3tAgiN-WJ8ZA-mFbrNjndM8Egq0P0STAptrYVJrTdaYVdsz1Gc_CUDaDtejKBNlZai3rFJrT6uM3J9usOmWQBDQ9ovlEa47G23CFCMUcgcTr3OJpYF3At-Prsla-jx/=3fimgmax=3d800" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="240" border="0" title="Twitter Buttons"></a> O ID é o seu username no Twitter ou mais especificamente o que vem depois de <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/twitter.com/">http://twitter.com/</a>. No meu caso seria julianasardinha. Após clicar em go>>, devemos escolher a imagem e copiar o código.       <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NLolVjaPN-eLKb8NiUBJVYz6A9x1sfvedgz2H-c9ocP3lz2BDmM7siCbBX3NCt1yOalFIWdbnilb6kqmbU6W8pltIuZXj2SMNAAqi4c3ipvXwFaEPTJ3_UgJOWhM-GCEGiWe0gJhxKp_/s1600-h/Twitter-7A=255B3=255D.png"><img width="90" alt="Twitter-7A" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCgNVpMXMVbS7Ls_AwtwBiERxWB6QVDLEiB0x3FgZbKlkmnpK9DBNZZzpMbS10IsN2DNNREw-1Zqmzf26LVSaHtJbYmYS_tQXlAvmLZzRoRvV15AMv_6D-8x9oWWhgz7zzcuBzG-uOzmJ_/=3fimgmax=3d800" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="55" border="0" title="Twitter-7A"></a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjXg20JedjcSg9Pq8FQC-b-elF3clQN78Q18E68m5Lvg3-BR2Qq9Xjt4Y9nvEykoj40WKCGoO1gjDvr30GqLO3F89sUCUuWfmRbHmuPtnY_mx_UBa7mCjaWjBpdvazSB783lHcx09idp3/s1600-h/Twitter-1A=255B6=255D.png"><img width="90" alt="Twitter-1A" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ewm49FKzIFDeFh4AycrplfNHtHfeDA525k8eIZG1z2F9EwGSMb8c6D055VOzzDbR5Pvow7CWnl0NJJo8Iq8huy1ZjNccPYhnLmvvU7XL-t2Sw3nq4HcbZ30dkHtYs4vdd52a5bslyS6y/=3fimgmax=3d800" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="55" border="0" title="Twitter-1A"></a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaXFb3VFdCRLgDkgGjqvN-rzo5908b0oooHtdfWdSr2F91KkFteoQs21RNdQpnWLV9hOWaQG3kbPxjLHYwIXBoo3eOsUGtTRTlOBY0jM0RvoRQ1nV5xa_NTo3DGBtjjuKx8Ww7a_mLGoA/s1600-h/Twitter-9A=255B6=255D.png"><img width="90" alt="Twitter-9A" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_wye3A5KCTdF4RPlJs4lhOfXdBaqpFJv9YWJ7eCgXQbuWEpu_i66t2XQz7cwoSQFoflzHD23BPC3Mrq3ajMAOMrjwIrrNH_r4_bi65IlmcxnnSZdvuDPwnTtq6BDobHgZ0TNK0v58CBC/=3fimgmax=3d800" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="55" border="0" title="Twitter-9A"></a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFSPhH1Br11J7Kad2nTSFRFjoH7E34S607y1xdT89h2mc-a9qZ_qd6_Lm58e2W130T4FVaM2dz4I4UBV2HkQkxAMYssrUU6J_48Rzak32IicUpSUYhZWMGGQDedQsELJ9208DxIh19N5d/s1600-h/Twitter-4A=255B7=255D.png"><img width="90" alt="Twitter-4A" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyUqXOTJkqMCmUtf4q2QU1AizxaXennEhmwqCbFfvpvnlrIHTYs70XOkrdqfhuKcDEDinqW9rwvjo4S_y7t1-5IVzSmidLtkeh7TIW66ftukkyU_1CQE1e9-yaKX1T7WZdBh0kxXfX2KRs/=3fimgmax=3d800" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="55" border="0" title="Twitter-4A"></a>

Botões para o Twitter é com Twitter Buttons!

Gostaram do passarinho? Eu adorei! Hoje, descobri um site repleto de botões com convites para sermos seguidos no Twitter – é o Twitter Butt...

Continue Lendo >>

11:00

Caixinhas para divulgar os banners do seu blog

Atendendo a pedidos, vou disponibilizar o código da “Caixinha Link-me” utilizada no Dicas Blogger. Caixinha link-me é o nome dado ao widget usado na divulgação dos banners de um blog. Eu conheço dois modelos: <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZf6hRYVRVg5-xyn_kTCvOQMasu33BqPVu717rHwbKOmlpehvV7VNplqsQfQClG5wpJCmIQBLb171ZQXFbhNGNOxhnE_r6B231332osXvR5m7r99L03WAIjK7un3VuMT77I61SERArdxrM/s1600-h/image=255B7=255D.png"><img width="430" alt="Modelos" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizTirLe3XIAhQmuGPYhuLzT79lw32w8eOPgowovHcwODxTWR8cLEZqHtgTP1MCMODNf8rXo9C5hdOhyphenhyphengrI_ZXUPMLRc8K8elIdRcviImD8DL3z2RwUMdnSk0wjOM01OeGHbBeoEJRFlOlf/=3fimgmax=3d800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" height="228" border="0" title="Modelos" /></a> No primeiro, podemos gerar o código em sites como o <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/maisblog.com/utilitarios/gerabutton.htm">Mais Blog</a>. Para tanto, é preciso já ter um banner hospedado e seguir as instruções do site. O código gerado, deverá ser colado nos gadgets do Blogger, em HTML/Javascript. <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjarM1C7vzXWesYLwctVQ8mdYaWRjFjiLPiDhRFkDoRQC-MYwLX8vqBvbyEjXNPtAiCRY3Zbir9dq06rygYPdFVXvh88MUMSZmAnHRb4QF4jducQptctH92mY637ENFIuelap3iHOxi00Pv/s1600-h/image=255B14=255D.png"><img width="354" alt="Gerador" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii5dQbfFUC6qYNXt5AR0_E-3pM2Xc1ufF5uX4RizG6E-oGrxxlB9DDWdDwyQzlxHmjyisA-SRgFsPyPjMKRWpCQM-wIz__nO0mgQdF5Nlk9Uac0SqSRN2oQ2sF4PRjwBqHxMFy0PphL5tu/=3fimgmax=3d800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" height="234" border="0" title="Gerador" /></a> Caso você seja novato no mundo dos blogs e ainda não tenha um banner, assista às nossas video-aulas <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/dicasblogger.blogspot.com/2008/01/video-aulacriando-banner-animado.html">Criando um banner animado</a> e <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/dicasblogger.blogspot.com/2008/01/srievideo-aula-criando-banner-no.html">Criando um banner estático</a>. E para hospedar o seu banner, leia o post <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/dicasblogger.blogspot.com/2008/09/hospedagem-gratuita-de-arquivos.html">Hospedagem gratuita de arquivos</a>. Para utilizar o segundo modelo, basta copiar o código abaixo, fazendo as seguintes alterações: <ul> <li>inserir o endereço (url) do banner e do blog, nos campos indicados em vermelho. </li><li>inserir o nome do blog nos locais indicados em verde</li></ul> <blockquote> <div style="border: 1px dotted rgb(204, 204, 204); padding: 5px; margin-top: 10px; margin-bottom: 10px; text-align: center;"> <img style="border: 1px solid rgb(0, 0, 0);" src="URL_DO_BANNER" /> Divulgue o (nome do blog)<br/> <input onfocus="this.select()" value="&lt;a target=&quot;_blank&quot; href=&quot;URL_DO_BLOG&quot; title=&quot;NOME_DO_BLOG&quot;alt=&quot;NOME_DO_BLOG&quot;&gt;&lt;img src=&quot;URL_DO_ BANNER&quot; style=&quot;border: 1px solid #000000&quot; /&gt;&lt;/a&gt;" type="text" onmouseover="this.focus()" style="color: rgb(153, 153, 153); margin-top: 0.5em;" size="20" name="Banner"/></div></blockquote> Este post foi sugerido pelo Gilberto, do blog <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/gibanet.blogspot.com/">Gibanet</a>. Faça sua sugestão, utilizando-se do email do blog - <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/mailto:dicasblogger@gmail.com">dicasblogger@gmail.com</a>.

Caixinhas para divulgar os banners do seu blog

Atendendo a pedidos, vou disponibilizar o código da “Caixinha Link-me” utilizada no Dicas Blogger. Caixinha link-me é o nome dado ao widge...

Continue Lendo >>

16:31

Lindos botões para o seu blog

<a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh5.ggpht.com/ekosterapia/SG41P-SrOVI/AAAAAAAABYE/tBUGn7SJiBw/s1600-h/btn_firefox_b_04=255B2=255D.png"><img width="84" alt="btn_firefox_b_04" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh6.ggpht.com/ekosterapia/SG41QfQynEI/AAAAAAAABYI/UN7zGipffI0/btn_firefox_b_04_thumb.png=3fimgmax=3d800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="19" border="0" /></a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh3.ggpht.com/ekosterapia/SG41RIKE1PI/AAAAAAAABYM/AcHfl8i7ZDU/s1600-h/btn_blogger_a_04=255B2=255D.png"><img width="84" alt="btn_blogger_a_04" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh6.ggpht.com/ekosterapia/SG41RnD1YrI/AAAAAAAABYQ/awoyw4ySEpc/btn_blogger_a_04_thumb.png=3fimgmax=3d800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="19" border="0" /></a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh4.ggpht.com/ekosterapia/SG41SO2FQqI/AAAAAAAABYU/loOBtXw3F-k/s1600-h/btn_technorati_a_02=255B2=255D.png"><img width="84" alt="btn_technorati_a_02" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh4.ggpht.com/ekosterapia/SG41Sinj5CI/AAAAAAAABYY/fQMT0gQz63w/btn_technorati_a_02_thumb.png=3fimgmax=3d800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="19" border="0" /></a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh5.ggpht.com/ekosterapia/SG41TMEqDmI/AAAAAAAABYc/xdhRvMSC16o/s1600-h/btn_wordpress_f_02=255B2=255D.png"><img width="84" alt="btn_wordpress_f_02" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh5.ggpht.com/ekosterapia/SG41esEQT5I/AAAAAAAABYg/Ga442M814kI/btn_wordpress_f_02_thumb.png=3fimgmax=3d800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="19" border="0" /></a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh6.ggpht.com/ekosterapia/SG41fHLHuJI/AAAAAAAABYk/X6Qxq5DoTfk/s1600-h/btn_orkut_a_01=255B2=255D.png"><img width="84" alt="btn_orkut_a_01" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh4.ggpht.com/ekosterapia/SG41fiaTkTI/AAAAAAAABYo/3rpBZii7Uyg/btn_orkut_a_01_thumb.png=3fimgmax=3d800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="19" border="0" /></a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh4.ggpht.com/ekosterapia/SG41gEbNriI/AAAAAAAABYs/Cup_ISA8xsc/s1600-h/btn_picasa_a_01=255B2=255D.png"><img width="84" alt="btn_picasa_a_01" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/lh5.ggpht.com/ekosterapia/SG41gmM0yGI/AAAAAAAABYw/VP3UsFdxqnA/btn_picasa_a_01_thumb.png=3fimgmax=3d800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="19" border="0" /></a>   Depois da ressaca sem internet, retornamos às atividades. Quem não gosta de deixar seu blog ainda mais bonito? Encontrei, em um blog espanhol, dois sites com lindos botões, já prontos, para dar aquela incrementada no visual. <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/gtmcknight.com/buttons/personal.php">Gtmcknight</a> (4.000 botões antipixel agrupados em categorias.) <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/252523.net/buttons/">WebBadges</a> (coleção com desenhos sóbrios) Cada um mais lindo que o outro!   E para quem quiser se aventurar criando os seus próprios modelos: <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.kalsey.com/tools/buttonmaker/">Buttom Maker</a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/tools.blogflux.com/buttonmaker/">Blogflux</a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.yugatech.com/make.php">Online Button Maker</a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.publicons.de/">Publicons.de</a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.imaxenes.com/etiquetas/">Imaxenes</a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.lucazappa.com/brilliantMaker/buttonImage.php">Brilliant Button Maker</a>    FONTE: <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/elescaparatederosa.blogspot.com/">EL ESCAPARATE DE ROSA</a>

Lindos botões para o seu blog

Depois da ressaca sem internet, retornamos às atividades. Quem não gosta de deixar seu blog ainda mais bonito? Encontrei, ...

Continue Lendo >>

11:36

Pacote de Botões

Pacote de Botões

Acesse http://mysocialbuttons.com/ para fazer o download.

Continue Lendo >>

10:10

Video-Aula:Criando Banner Animado

Continuando a série de video-aulas, agora iremos aprender a criar o tão sonhado Banner Animado. Vocês verão como é simples! Para salvar o video e assisti-lo em tamanho maior sugiro a instalação da extensão para Firefox<a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/addons.mozilla.org/en-US/firefox/addon/3006"> DownloadHelper</a> P.S:Meu inglês é muuuito ruim então descontem a pronúncia..hahahaha Tutorial para iniciantes. Programa utilizado:Fireworks <iframe width="425" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000101A/https/www.blogger.com/video.g=3ftoken=3dAD6v5dzoyFWwovhhx38CsBFny2STFZKZuriF9bhwirGJYr5VYNJNSoAr_uovKjWpT8ursy1s1UDJSRx6HGlkQEMgp0d2AXko_I7aBE4N-rbb3PI5htVEbG5to0HyqMT2hU7x3CMYibk" height="355" webkitallowfullscreen="webkitallowfullscreen" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" frameborder="0" id="BLOGGER-video-fea33b526e8e6f5a-6372" class="b-hbp-video b-uploaded"></iframe>

Video-Aula:Criando Banner Animado

Continuando a série de video-aulas, agora iremos aprender a criar o tão sonhado Banner Animado. Vocês verão como é simples! Para salvar o v...

Continue Lendo >>

21:06

Video-Aula:Criando Banner no Photoshop

Video-Aula:Criando Banner no Photoshop

Pessoal, eu ainda tenho recebido muitos pedidos de auxílio na criação de banners. Sendo assim dei uma pesquisada na net e descobri como faze...

Continue Lendo >>

19:10

Banners Animados

Passei um bom tempo para descobrir como criar um banner animado. No Google não tinha muita coisa, mas fui insistindo, insistindo.... Por fim descobri um programa fantástico, o Macromedia Fireworks. Aqui vai um tutorial que achei no Baboo: <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.baboo.com.br/absolutenm/templates/content.asp=3farticleid=3d4608&zoneid=3d24&resumo=3d">CRIANDO BANNERS NO FIREWORKS.</a> Não é difícil. Basta seguir este tutorial e escolher o tamanho do banner em 120x60. Além desta forma, encontrei diversos sites para criar banners e buttons online. 1. <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.bannerbreak.com/" title="http://www.bannerbreak.com/">Banner Break</a> 2. <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.bannercreator.nu/banner-maker.html">Banner Maker</a> 3. <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.puresilva.com/banner_maker.asp">Free Banner Maker</a> 4. <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.banner-generator.net/en/bannergen.php">Open Eye Banner Generator</a> 5. <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.123-banner.com/creator.php">123 Banner </a> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/dicasblogger.blogspot.com/"> <img src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/img128.imageshack.us/img128/4127/00000001jt7.gif" border="0" /></a> Meu primeiro banner animado... :-) Abração a todos e obrigada pela visita!!!!!

Banners Animados

Passei um bom tempo para descobrir como criar um banner animado . No Google não tinha muita coisa, mas fui insistindo, insistindo.... Por fi...

Continue Lendo >>

23:58

Criar Botão

<a onblur="try {_proxy_jslib_handle(null, 'parent', parent).deselectBloggerImageGracefully();} catch(e) {} ;
_proxy_jslib_flush_write_buffers() ;" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimc1LV9hC6eCul1FF4hNEnptQ2muTWUPQubd673FlbEKd1t7Z2-bZTxzh__FfbEwOdVA9nD_6CWbl9vibuYUYue-I73dywyRzea1FIGTMAw0AbrlGdlL28JWfMXfsh4H-apoAmL_OmUIbQ/s1600-h/buttons.jpg"><img alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimc1LV9hC6eCul1FF4hNEnptQ2muTWUPQubd673FlbEKd1t7Z2-bZTxzh__FfbEwOdVA9nD_6CWbl9vibuYUYue-I73dywyRzea1FIGTMAw0AbrlGdlL28JWfMXfsh4H-apoAmL_OmUIbQ/s320/buttons.jpg" style="cursor: pointer;" border="0" id="BLOGGER_PHOTO_ID_5243258085021514802" /></a> 
 
Divulgar seu Blog é importante. 
Por isto a maioria dos Blogs tem um banner ou um pequeno botão e os blogueiros saem pela blogosfera trocando parcerias. 
Para criar um botão<a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.graphicsguru.com/button.php"> clique aqui</a> 
Depois faça o upload dele no site <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/imageshack.us/">ImageShack</a> 
Para colocá-lo em seu blog utilize esta ferramenta: 
<a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/maisblog.com/utilitarios/gerabutton.htm">Caixinha Link-Me</a> 
Para colocar no Blogger é só adicionar como elemento de página, em html/javascript. 
Podemos também criar um banner no Photoshop ou outro editor de imagens e seguir as mesmas instruções acima.

Criar Botão

Divulgar seu Blog é importante. Por isto a maioria dos Blogs tem um banner ou um pequeno botão e os blogueiros saem pela blogosfera troca...

Continue Lendo >>

17:52