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 align="right" alt="css3" border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBYS3Uc1tXaSc6bnA6ql8ADK9ois1H158Vphk-DRr_EJA_sNAbTfG5l0wE7XjLwCdgUQfLwRf31CYZ1mLJg3S-Clt8Jgou7V-I7_liyaL80D9s5QEN3mlBoM5fRLmdL_3su0rdGYMhGMrj/?imgmax=800" 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;" title="" width="112" />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://www.dicasblogger.com.br/search/label/HTML%2FCSS">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://css-tricks.com/examples/ButtonMaker/">Button Maker</a> e utilize o painel da direita para personalizar o botão: <img alt="css-button-maker" border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKDq8n8RnKGaIHGRL90YV4Cvxtox9dwMPVzVy32GVRBp2mKG0u7Nx9-acKmJ2Jpqo0Kq0ia155atHUWi7AYJprD5-hkAGOCrvX5m5JatMGjUswU1DFF_t969rzW2lmPxb3tFEfM2sJey5j/?imgmax=800" 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;" title="" width="502" /> 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 alt="css-button-maker" border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WRBZbo_fvSgqU9wJ92vGutqEfQXbdsS3zspS9U1DDk_bOQErdQ8Hd8ZjI5aCyJxMma9vBpUIWp8XqSlepF63-Ylv9_aWHCca4QeJfG7Sz63YfgdZKtBJBqL8EfMcqSupuWntSKnfyGrq/?imgmax=800" 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;" title="" width="502" /> Entre no painel do Blogger, clique em design>editar HTML. Faça um <a href="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 alt="css-button-maker" border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1krCPoDDXars6POENJ4ccvLX6svOz_Qmfx_N7outYD3FC-Uo7t2P6A8f-AGcEoCZP1EMZ6zadTijtYs7QvnY9r7tTdeuE-FyIiIrKysTaJbzJEyvAlF7Y1b4C-GTke2XJKzolb1XauoM/?imgmax=800" 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;" title="" width="502" /> Existem outros sites para criar botões personalizados em CSS: <ul><li><a href="http://www.cssbuttongenerator.com/">CSS Button Generator</a> </li><li><a href="http://css3buttongenerator.com/">CSS3 Button Generator</a> </li><li><a href="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 href="http://www.dicasblogger.com.br/2010/07/banner-animado-photoshop-cs4.html" target="_blank">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 href="http://www.abraweb.com.br/site/banners.php" target="_blank" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidU0es19eejT2PQyIA6LtZKsTZ346_bUQeSz79yJV5d4NgbVVdNmnh47zdbQ_Y4Tc0nTpght9qEsfI6R61gFI-3aEIiY36T54hHlDxi47MLt_aShUtTc_lOxkyCmV9aWyTy1PxujJaIILn/s1600-h/image%5B53%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQ4rj_qZ15HGIVf6JXfS3tydVN7i_pukrcaHdi7aOKJ3Omp7XiV_hpGz8TReLdMc0P0zn2kcRVenT8ZrSzSqPWGZR7f-zyJ7TUZabUpe4JRbpg1Rd5YCeIdNHt4xV_COVvvEkqw4duCZ0/?imgmax=800" style="border-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="" width="252" /></a></td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvK_f1tjnnfi2aeN9P-g0MDXOilu6V9FNeSyJIoNQtZe83rcb63sm6TJDXbRJm-0Oe8c49T85UDlaeI8rszBrzY8lU0icGMCi1N6nOnbjMSkzQ45Nr99Eo1Kp6yDXGOmNSZ3vOxrW_6lE/s1600-h/image%5B56%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2j6b9uvZEZR0bFryIok8Nj0ZBNcOrfeDz2VB2OLF-bA3mLYbFXhz8oUK2wG6OfeKjOJrQtHHEQaRI07B_6-rwx6BTtv6qUpZAg9KvA19LB2bjPINc05kaxLGnYkDQjRy7cuaWUccPw0Oj/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="240" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMp2GH9JY22QH8xGAcWP9kraMvk9n1hlqVoZOh7VHiQqrHAH2xYLOPv6uPWT6ItvQAzu8g_UAxjoCSlwGLRIXOL1qaQUirLyJL4GG4wbluOvkqbU8G6vE7xr81KVpYpiJDSEzeG4ECcg-Q/s1600-h/image%5B57%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj198BJLOyQvjNRV33OhnLL-ZuwH_2BcQckG-1lmaA0hC-nbFm-edc34-L085JfFxvuf_3bqnyxKx78t0hGSYojRwwFxWumlIynJPKji_7ArCC3bJeAoVFG5pp72VUX2iwsBAYj84rrSqwp/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="239" /></a></td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ1m50qk4U53iGizyFlAuYKPczkez3s3xKHf8uy1wCbviUdZzaDCoNsHvjmMF8jwuAATUtg0ne7lrWkZXI1Gnbc04igMUgyFJba7UNlW638Wh16fj2frCIxrt9SNji7X9dxCut19MrhHIb/s1600-h/photoshop_degrade%5B9%5D.jpg"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4-6EgggZBoxU6vF10f-WxCGji3hwTSSz8BjS08JneTKNQst45CKmzX_YA13l4x2xeDnzL2hXZ5jwgUxiDZXYhAY8EMK-EIX8haLTD3g66bt-PynsFxofWakz4QJmXgqWEvR-6cj6cfd8/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="239" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj36zJMKW9OVyjk4vskGwg57IXrRpCT1Weq0aRefXhLqv7teA9Ylp280p4iKgom5288NUCO_k8pVskhARQzo3Z7DVhf6awwEsqDfcDvPxPmMpJpUMw2kcaX4Ua29Nj5KVN7WZEkcxVNneFZ/s1600-h/image%5B64%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kB9Xc3bwmhwFKfFcQMwTsPD9A7qB6GWJEc-LNj4018A5YNAAkPygM6iLly-FTnIrwRK9RmtOiN5lRK1GlC-wYRXLyi3kFxneiAeyPiUhRKvVxIDj00bDqhlk1Xc7FxgVkD_4o07qFUP9/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="246" /></a></td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicdlTeyKZsHBCmU8LJwsmLaZ0NkHn8KfB3igQW0bAsFa2Oom7qRhWSCp1oDQqr-taoTGOLXy2cqXfEoz1kBVkrzaFcrW8HBBO3VMXh4zp-Qui5UnWZGj7Pqe1JHwf8Bf4vxY8khe2HXiTb/s1600-h/image%5B65%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKxIjk7PpoKDMj2bRKkAl1tih4-mZDCeqNrQvbLawr7t37QWevQLo1BIm8afVngq8l1PIISNq6QQnFk85unh-BIDShU2hoer6BX5tD8kCFtCTziZMEQzdTvQO0D83QkWIO3pGEit3AmZN/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="248" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YvpN0MV0EZYvTwZ3Qx1jpqe385sp37eofQO6BIENWxxdWEYJP5o22-CDU7lOMh3ZN8GO0OsZjjeupW3OYXeNFhCymqwWKYLjvsx9PUlnL2Pp3_vvfN3Z1zXgms56D0A3VuVSkVqFU5pe/s1600-h/image%5B66%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz124ny02xA-fTRNmAnWsIuK8nebfdYPbJcO636MLxcHyWkxMnhjB7JFspBMT0Xf4sdtQgeYAoN7rbkgOY9JObK2PdvmKxfZH7LAlFvWteHBhZcA5BUs2ACgNZWU5EhaBYoAREg33OsTYD/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="244" /></a></td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwLU0kcSMu4oKn90NRpiT6Yxr_jP7aGwAE7gfrdxvuJ9PrVn5V2uNbO3v1wY3aeAY1mMBILH_99k8fmGJArWgI60RWv2oxqAEAHosbadS-j0zEDFw0SYd9DtE_1uEJCKvDQEQCL3yHBLH/s1600-h/image%5B67%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQKJFTQcgPIsfZMHqvCjTRwGIkknyvaAqyw8musoq66kb4YGfD9ruJStcMCxbBPkFqdaB7lo3jR4SSXsJy_kr6rI4cri1_6Xjhusne-YuGn1qClgrzAlyNUYQ01_fYIY-QC5SUddEOg3c/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="238" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD88dm-A1D5iwqgjBLwMEOUqatux4grn9krTM9oaidSIt7f3BK8l7SslmVXxNI0JiSYoqoC5lF0CLtDApztWbd_zOpqfgXeaZ6NwrB6d0ragbZXlYTGx9GGA10aHNGjgE7LG2TP81bWkvo/s1600-h/image%5B68%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0_1o_2pk2_4YiVqQcWBoX6BKtZQutuLV-aIMpG5eaPZzrDmYsnq8933aJwiP6Hex_LfyjcluzM-pGgIwa9l9EVScfAvQaaRiWeMkptYKoKFg9a_rT8im9EmvP4xhfA44Z1uT93SjZTRl/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="224" /></a></td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_dTVLMI4KSaZoo8UVyRfgXEE83uPMTLXhTVm9OeiTp2M3TCri0pnCwDtX0m6BsKXY_6TvMwxawBxXqpm9uYKL-m9Q7tuuXCwGH_2XktrUJwONT8IkzsMU2HHISl9hs7UYZCsliPWNUEd/s1600-h/image%5B69%5D.png"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24Snv-kcJCzT0VKfLJmJ2LgSMSpAWQzvgMVI0s0Q4_O4jfi9rF3y5hJqwBR5jKbUzv_nL1uDISofABvOsoVUrPMFYJixYktXqrMVufqdU_nMS2QC4I59mkuosUthcwRDo3Os3BRd9YddP/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="229" /></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://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://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 href="http://www.dicasblogger.com.br/" target="_blank"><img alt="Tutorial Dicas Blogger" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqbOSZJBJS7k7d2MuWz_8nndLiZWQZEzwaNr4tZdsOviOFrI059PGsZPcUz-zcOXSuuldTcYFQE-niEAVOKCA_eFcW7Fas9eNqiv1HZCY7tdQwlB1dX6kU2YPT-wwlVmiirmx210k-TYe/?imgmax=800" style="border: 0px none; display: block; float: none; margin-left: auto; margin-right: auto;" title="Tutorial Dicas Blogger" width="452" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLGD3AS-nvt59uzAuWHLb-G4stON5dewgevP-bkKSRXfR8MDzVnCsQgfMiyDYDagAFLsHnOuBaCo9PNZxUmPNmkUEGWdmwSdfblUAV9DKXspLs-ZwfKNy1B6haX9lNFrT43vprhAwGt5r/s1600-h/tuto2%5B14%5D.jpg"><img alt="" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnmNS0WUV3A3LVVTZEWnZtfdaBHK_pOE_yn87M5oKwWgFogxlHrbWVtwa-JX0tmlPjJA0UngT3fu60GefnZtxvizsY8qWQi0MGyj_hvhfJrre66yadKw6bSzEWmfZlkl-Ze-NaHwoxQOaq/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="242" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiO7bWUjxTdrJey4-POR4fyCEDJjkdELnB4bnhV_KRXVHBniaT_pmAaTLd5Cf9_-gpNOhE0bHyQ0bf9IlbFeZwyI-67GSmnjerbp_KhfR8HbJ-L_Yx27N-BrAqpEGUSfMIfpPF2tVqM6kv/s1600-h/tuto3%5B12%5D.jpg"><img alt="" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKu3TmWvjfgWghegnHBbafiE6opfOo_BtwcsC5s37KezxSGfx_P7_4UKgTqoulWtxXRUNE0C4KfJdnF2NGKmJ0L_30W8ojm0-UB-IFzHL1MYe6En2YJ7ERuRYdcZ4M8_GHia5vkor5Fjog/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="242" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadKE3udmBowQzKDVN46jwbeO5W7IBwKzVENfUGFFWd1NFfUeNEInGQ99egzlQ_LlYlBgldJ7KZQzv72Rh_iLcguZ4phMTwey058aMC5X6QmQ2di5Y1dzcRpJzTJt_wifeCjp3Q5xsuDQy/s1600-h/tuto4%5B6%5D.jpg"><img alt="" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbauQPVqH4b5UHDfqFob6b4DRayRro8LP9zNhSUPTl7I1mb0S8Ybp9APPJECsiFc7_g7OgX1rey1yJeidGlB49XJO4bMjSQqBy7NqdRiKrp-5BC2m_XLzkD1RGtksWT7GnOq0qoPV8x0aT/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="242" /></a></td> <td valign="top" width="275"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mEchandXoiFWQAqtu9TYhcSxohj0eMXUnVqldeeifT82CpJRFW5npimOhR5FpR4kvw_3MgHr7wG6TeBV6zq7jDyC4VhTSaOgfj5ywE9Wv3HZBRG9rhEIK4EMraE1DlB-OkLCpOwRHCCE/s1600-h/tuto5%5B9%5D.jpg"><img alt="" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BRjMb6CJVfKFHgORAKjPC0wDQECG_tvcSvcesqipUb5yzfCF-aG8QvihLAOP-ZHms3QS12pgOE5FlQpH7qdoBgjEU6ftvBKYcw0TslbbXvScdecGcWxEHguZLAsXeIdgGjB96yjjjLMc/?imgmax=800" style="border-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="" width="242" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqdlh6EwOGmgsvPSbQq72PKsqXa5SBNyDI9l8wBECDbZhhEk0DWKgjnPcl3YiHgxGyiMI0XgYWwMwgiSHl3OWMmkkVVeBg8UUhZHStn5iAMqRdS0SQ1fgRXq0_eoSn2D0Q6uRdzkqBWmdL/s1600-h/tuto6%5B11%5D.jpg"><img alt="" border="0" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYfafAgqMDipiqcPTrX4eYLM-3WXNWmEdMPdHxWy2hRPrGclmZ0e67ZKHdM4lSfwya-Gy6Eu-BRN1aklkogMyitvcs_Ij-1ewU0oknsSOQwlQ_X0eQYt-pAbt_YSxjJjewYX0aJqoR-sbr/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="241" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJVkU5n1yB7AaX6HScrDNlB1tK87IXIAW3nesrfmHJ5NCKqYsgvXj2pIQ6fVy2n1gbLwgHZSmu-dwZVXKrkdIQGpujhace3LbsAVt1rdw-VeYphSS7G2w3DGrslZpfyMbSDGlrEuy7l5gy/s1600-h/tuto7%5B9%5D.jpg"><img alt="" border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjULnnoAiwtO6WpiaHpR4NdBXzaYe7QQp-_jp3aw86wZ1HTelEEMQsx7SkwyVTLMvuYLbqR3KrbyzRAlHkZIFX0EOPKRZGdlM364Y1XIP54sbkoaxv7g6KyrIWo5c1ZImzejZw5qCsJgV-I/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="251" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6DfZ1JwEn8n8S71pe-81lrOLvPA9c_kvDZX2OIc_AKhY8rE1JXCwuPYSmQOKRXKbuyFGDaEJ7ODKjxJ6dmyFK-pQQFlzyJQQ776Ej4xpebK7m-3_UR4IiSkcLcEeGA3skA_sPcWIebCvJ/s1600-h/banner%5B6%5D.gif"><img alt="banner" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnlnLO9O9VSxcXndyVYcCDwYzTfGFJdlBKcNA9dkHoZwociRCXHWrasOqS0PodvTBda_-pmQ703yZEOk4Dg6riULea3nE0SUF3-aqNzXxmORGo5hWlJc7EynB4WfYZAavLwj8S_HRjewU1/?imgmax=800" style="display: block; float: none; margin-left: auto; margin-right: auto;" title="banner" width="300" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1gbT6idyxyHmtgrOyawnBgPuY-Ac0zhm1zNcQCy6qXlDS-TJOcKIikK6Zlk_Uxrl-zrx5Y5CuZYiUT2OjsD0PmPGHEal8UsNTyU0LR7q51eKPF5Hoi0iMslRQQj-zbqorAI6HxgSwoBb/s1600-h/tuto9%5B8%5D.jpg"><img alt="" border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmfWc1f9lHiTGUGAp83pOMKgLf7nffOeHGvJZLojGMO0YwsalTgi6615-hsYpWK6hSzPMXbZCIYxa69lVCjGDMQrdHulgbUD-pHn8cAmw0U09hSr_dJ4zb0O0Io_DXpd2Khxt6Jd0WuxX/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="252" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQAt_fDamED4cdMsckbOsU-bX-B4boVuGkLk70wk8uWnc2BX2KVGVUhJH6s6jvKTRXm9nwkf-mUZtstegGm_FyKVk1EqQa6laAGcNfBjB8LbOWVvYZL8LA4-A9BLFR_5gpGOPpkahP_YW/s1600-h/tuto10%5B8%5D.jpg"><img alt="" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUx6kAw9h2BQ2lmVRI1xIt7emPDXZ38zl7krOhoWHJePKkmk-DkRyCJ01ZjJiVChRAB446i4eo5lwDSb-4Q3LSyEhRgHE64KoJojFH5J68FWu1lBnkB3pG2tBp1OJ5xlJZO45VXaFqOrwS/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="252" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3PHeKguNzpL1_TUvm2625n1NhW8oKyiW92xgUTG3qXdwy9jllDfI1eRX80yl4UV0xTbGdz7oic9hnQpD4JZ8ZqoQlPJ_aBsRsyYIgSDnnDzJJ9NdUPnTSv57yfFEie8RS4Y8CsCr601t/s1600-h/twitter_exc2%5B5%5D.png"><img alt="" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqeTZmvVtkI7ECRiMxie7VKoI4601xyG9Y8MNQpkQMcKJzgReRkSpG3p2YJgqijQakLFKJJBnYnqp7I9DO7dR7pwKWaOrzU02JB-jXmfC7VBSojv0HUUUFBdzRgN0c5W9lwCwtZtgh5QR3/?imgmax=800" 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" title="" width="337"></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://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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4B91rDcMon13tiSHiE8wQ7B2yEmMhlnkcZDZQO8kNLuBKNsHKooOwWVmgBPrKvCfbptwwScUWjJU-FcKmvwWVPxJmhRaejKdXondTE__jTA3I0DuczIxvjaBCZ5xCsOH2sBtqHk56bRNs/s1600-h/image%5B7%5D.png"><img alt="Twitter Buttons" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUfYkES1U1YflQfB3tAgiN-WJ8ZA-mFbrNjndM8Egq0P0STAptrYVJrTdaYVdsz1Gc_CUDaDtejKBNlZai3rFJrT6uM3J9usOmWQBDQ9ovlEa47G23CFCMUcgcTr3OJpYF3At-Prsla-jx/?imgmax=800" 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" title="Twitter Buttons" width="409"></a> O ID é o seu username no Twitter ou mais especificamente o que vem depois de <a href="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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NLolVjaPN-eLKb8NiUBJVYz6A9x1sfvedgz2H-c9ocP3lz2BDmM7siCbBX3NCt1yOalFIWdbnilb6kqmbU6W8pltIuZXj2SMNAAqi4c3ipvXwFaEPTJ3_UgJOWhM-GCEGiWe0gJhxKp_/s1600-h/Twitter-7A%5B3%5D.png"><img alt="Twitter-7A" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCgNVpMXMVbS7Ls_AwtwBiERxWB6QVDLEiB0x3FgZbKlkmnpK9DBNZZzpMbS10IsN2DNNREw-1Zqmzf26LVSaHtJbYmYS_tQXlAvmLZzRoRvV15AMv_6D-8x9oWWhgz7zzcuBzG-uOzmJ_/?imgmax=800" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" title="Twitter-7A" width="90"></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjXg20JedjcSg9Pq8FQC-b-elF3clQN78Q18E68m5Lvg3-BR2Qq9Xjt4Y9nvEykoj40WKCGoO1gjDvr30GqLO3F89sUCUuWfmRbHmuPtnY_mx_UBa7mCjaWjBpdvazSB783lHcx09idp3/s1600-h/Twitter-1A%5B6%5D.png"><img alt="Twitter-1A" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ewm49FKzIFDeFh4AycrplfNHtHfeDA525k8eIZG1z2F9EwGSMb8c6D055VOzzDbR5Pvow7CWnl0NJJo8Iq8huy1ZjNccPYhnLmvvU7XL-t2Sw3nq4HcbZ30dkHtYs4vdd52a5bslyS6y/?imgmax=800" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" title="Twitter-1A" width="90"></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaXFb3VFdCRLgDkgGjqvN-rzo5908b0oooHtdfWdSr2F91KkFteoQs21RNdQpnWLV9hOWaQG3kbPxjLHYwIXBoo3eOsUGtTRTlOBY0jM0RvoRQ1nV5xa_NTo3DGBtjjuKx8Ww7a_mLGoA/s1600-h/Twitter-9A%5B6%5D.png"><img alt="Twitter-9A" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_wye3A5KCTdF4RPlJs4lhOfXdBaqpFJv9YWJ7eCgXQbuWEpu_i66t2XQz7cwoSQFoflzHD23BPC3Mrq3ajMAOMrjwIrrNH_r4_bi65IlmcxnnSZdvuDPwnTtq6BDobHgZ0TNK0v58CBC/?imgmax=800" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" title="Twitter-9A" width="90"></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFSPhH1Br11J7Kad2nTSFRFjoH7E34S607y1xdT89h2mc-a9qZ_qd6_Lm58e2W130T4FVaM2dz4I4UBV2HkQkxAMYssrUU6J_48Rzak32IicUpSUYhZWMGGQDedQsELJ9208DxIh19N5d/s1600-h/Twitter-4A%5B7%5D.png"><img alt="Twitter-4A" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyUqXOTJkqMCmUtf4q2QU1AizxaXennEhmwqCbFfvpvnlrIHTYs70XOkrdqfhuKcDEDinqW9rwvjo4S_y7t1-5IVzSmidLtkeh7TIW66ftukkyU_1CQE1e9-yaKX1T7WZdBh0kxXfX2KRs/?imgmax=800" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" title="Twitter-4A" width="90"></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZf6hRYVRVg5-xyn_kTCvOQMasu33BqPVu717rHwbKOmlpehvV7VNplqsQfQClG5wpJCmIQBLb171ZQXFbhNGNOxhnE_r6B231332osXvR5m7r99L03WAIjK7un3VuMT77I61SERArdxrM/s1600-h/image%5B7%5D.png"><img alt="Modelos" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizTirLe3XIAhQmuGPYhuLzT79lw32w8eOPgowovHcwODxTWR8cLEZqHtgTP1MCMODNf8rXo9C5hdOhyphenhyphengrI_ZXUPMLRc8K8elIdRcviImD8DL3z2RwUMdnSk0wjOM01OeGHbBeoEJRFlOlf/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Modelos" width="430" /></a> No primeiro, podemos gerar o código em sites como o <a href="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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjarM1C7vzXWesYLwctVQ8mdYaWRjFjiLPiDhRFkDoRQC-MYwLX8vqBvbyEjXNPtAiCRY3Zbir9dq06rygYPdFVXvh88MUMSZmAnHRb4QF4jducQptctH92mY637ENFIuelap3iHOxi00Pv/s1600-h/image%5B14%5D.png"><img alt="Gerador" border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii5dQbfFUC6qYNXt5AR0_E-3pM2Xc1ufF5uX4RizG6E-oGrxxlB9DDWdDwyQzlxHmjyisA-SRgFsPyPjMKRWpCQM-wIz__nO0mgQdF5Nlk9Uac0SqSRN2oQ2sF4PRjwBqHxMFy0PphL5tu/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Gerador" width="354" /></a> Caso você seja novato no mundo dos blogs e ainda não tenha um banner, assista às nossas video-aulas <a href="http://dicasblogger.blogspot.com/2008/01/video-aulacriando-banner-animado.html">Criando um banner animado</a> e <a href="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://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://gibanet.blogspot.com/">Gibanet</a>. Faça sua sugestão, utilizando-se do email do blog - <a href="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://lh5.ggpht.com/ekosterapia/SG41P-SrOVI/AAAAAAAABYE/tBUGn7SJiBw/s1600-h/btn_firefox_b_04%5B2%5D.png"><img alt="btn_firefox_b_04" border="0" height="19" src="http://lh6.ggpht.com/ekosterapia/SG41QfQynEI/AAAAAAAABYI/UN7zGipffI0/btn_firefox_b_04_thumb.png?imgmax=800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" width="84" /></a> <a href="http://lh3.ggpht.com/ekosterapia/SG41RIKE1PI/AAAAAAAABYM/AcHfl8i7ZDU/s1600-h/btn_blogger_a_04%5B2%5D.png"><img alt="btn_blogger_a_04" border="0" height="19" src="http://lh6.ggpht.com/ekosterapia/SG41RnD1YrI/AAAAAAAABYQ/awoyw4ySEpc/btn_blogger_a_04_thumb.png?imgmax=800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" width="84" /></a> <a href="http://lh4.ggpht.com/ekosterapia/SG41SO2FQqI/AAAAAAAABYU/loOBtXw3F-k/s1600-h/btn_technorati_a_02%5B2%5D.png"><img alt="btn_technorati_a_02" border="0" height="19" src="http://lh4.ggpht.com/ekosterapia/SG41Sinj5CI/AAAAAAAABYY/fQMT0gQz63w/btn_technorati_a_02_thumb.png?imgmax=800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" width="84" /></a> <a href="http://lh5.ggpht.com/ekosterapia/SG41TMEqDmI/AAAAAAAABYc/xdhRvMSC16o/s1600-h/btn_wordpress_f_02%5B2%5D.png"><img alt="btn_wordpress_f_02" border="0" height="19" src="http://lh5.ggpht.com/ekosterapia/SG41esEQT5I/AAAAAAAABYg/Ga442M814kI/btn_wordpress_f_02_thumb.png?imgmax=800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" width="84" /></a> <a href="http://lh6.ggpht.com/ekosterapia/SG41fHLHuJI/AAAAAAAABYk/X6Qxq5DoTfk/s1600-h/btn_orkut_a_01%5B2%5D.png"><img alt="btn_orkut_a_01" border="0" height="19" src="http://lh4.ggpht.com/ekosterapia/SG41fiaTkTI/AAAAAAAABYo/3rpBZii7Uyg/btn_orkut_a_01_thumb.png?imgmax=800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" width="84" /></a> <a href="http://lh4.ggpht.com/ekosterapia/SG41gEbNriI/AAAAAAAABYs/Cup_ISA8xsc/s1600-h/btn_picasa_a_01%5B2%5D.png"><img alt="btn_picasa_a_01" border="0" height="19" src="http://lh5.ggpht.com/ekosterapia/SG41gmM0yGI/AAAAAAAABYw/VP3UsFdxqnA/btn_picasa_a_01_thumb.png?imgmax=800" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" width="84" /></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://gtmcknight.com/buttons/personal.php">Gtmcknight</a> (4.000 botões antipixel agrupados em categorias.) <a href="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://www.kalsey.com/tools/buttonmaker/">Buttom Maker</a> <a href="http://tools.blogflux.com/buttonmaker/">Blogflux</a> <a href="http://www.yugatech.com/make.php">Online Button Maker</a> <a href="http://www.publicons.de/">Publicons.de</a> <a href="http://www.imaxenes.com/etiquetas/">Imaxenes</a> <a href="http://www.lucazappa.com/brilliantMaker/buttonImage.php">Brilliant Button Maker</a>    FONTE: <a href="http://elescaparatederosa.blogspot.com/" target="_blank">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