Mostrando postagens com marcador Blogger. Mostrar todas as postagens
Mostrando postagens com marcador Blogger. Mostrar todas as postagens
sábado, 20 de abril de 2013
Como criar uma página de upload no Blogger
Esta foi uma dúvida enviada por um leitor do blog. Achei bem interessante e resolvi fazer um post dedicado.
Ensinarei a como criar e instalar um sistema de upload no Blogger, para que seja possível o envio de arquivos ao dono do blog. Trata-se de um sistema bem dinâmico, simples e configurável, pois você poderá estipular os tipos e o tamanho máximo dos arquivos a serem upados. Sobretudo, modificar a aparência do sistema.
Ferramentas necessárias:
Conta Google Drive ou Dropbox
JotForm
Como funciona?
Só para esclarecer melhor, os arquivos que forem upados em seu blog, serão enviados para seu Google Drive (que oferece 5 GB de armazenamento para conta free) ou Dropbox. Porém, você pode ir apagando os arquivos recebidos (após salvá-los), para ir liberando espaço.
O JotForm, por sua vez, é um serviço que fornece a criação de formulários de contato. No entanto, além de profissional, o serviço oferece a excelente opção de incluir uma área de upload nesse formulário. O JotForm gera um código Javascript — o qual você deverá colocar em seu blog — e uma vez que o upload for feito por esse formulário, os arquivos serão enviados à sua conta do Drive, como explicado anteriormente.
1. Acesse o JotForm e crie um formulário. Se preferir, você pode utilizar os gratuitos templates prontos do site para criar o formulário.
2. Para traduzir, excluir, modificar ou realizar qualquer alteração nos elementos desse formulário, dê um clique sobre o respectivo elemento e clique no botãozinho que aparecerá à direita (ao lado do botão X). Você terá todas as opções necessárias. Para traduzir o elemento, basta clicar duas vezes sobre ele e alterar o nome.
Você não é obrigado a criar o formulário de contato (embora seja recomendável). Se deseja apenas criar o formulário de upload, delete todos os elementos do formulário e vá para a segunda etapa.
1. Ao lado esquerdo da página do JotForm, temos um painel de opções. Clique sobre o item "Carregar arquivo". Um novo elemento será inserido no formulário.
2. Acesse as propriedades desse elemento. Para isso, selecione-o e clique no botão
à direita. Selecione "Mostrar Propriedades".
3. Na janela que abriu, você poderá modificar o texto do botão (Button Text), alterar o título (Pergunta), decidir o tamanho máximo permitido no upload (Max File Size), os tipos de arquivos permitidos (Extensions), entre outros detalhes. Configure como quiser e depois clique em Fechar Configurações para salvar.
4. Após configurar o elemento e salvar, você irá retornar à janela principal. Caso o botão de envio não apareça no formulário, no painel à esquerda, selecione agora o item "Botão de Envio". O usuário deverá clicar nesse botão para subir o arquivo.
5. Para alterar as propriedades desse elemento, faça o mesmo procedimento do Passo 2 para acessar as propriedades dele.
6. Pronto! O formulário está criado.
1. Selecione a aba "Setup & Embed" do formulário e clique na opção "Integrations".
2. Escolha o serviço "Google Drive" ou "Dropbox" na lista de integrações.
3. Clique em Authenticate e faça login em sua conta do Google Drive ou Dropbox.
4. Na janela que abrirá, clique em "Permitir acesso". Em seguida, clique em Próximo na janela do JotForm para dar continuidade.
5. Quando a integração terminar, o JotForm fornecerá um link direto a você. Este é o link que o(a) redireciona para a pasta onde os arquivos serão salvos no seu Google Drive. Guarde este link e feche a janela aberta.
6. Voltando ao painel do JotForm, clique no item "Código Fonte" e copie o código que o site irá gerar.
Faça login em sua conta Blogger e cole o código copiado do JotForm no local onde o sistema de upload deverá aparecer em seu blog.
Se quiser colocar o formulário dentro de um post, clique na guia HTML dentro do post e cole o código.
Pessoalmente falando, aconselho você a inserir esse sistema em uma Página Estática do blog. Basta clicar na guia HTML e colar o código lá.
Quando o usuário fizer o upload de algum arquivo neste formulário, o arquivo irá direto para a pasta de integração do JotForm no Google Drive ou Dropbox (é aquela pasta que o JotForm forneceu o link direto). Use aquele link para chegar até essa pasta. Pra quem usa o Drive, na lista à esquerda, basta selecionar a opção do formulário criado no serviço.
Veja abaixo uma demonstração de um sistema MP3 uploader pronto.
Limite Mensal
Como trata-se de um serviço gratuito, ele tem um limite de 100 uploads mensais. Ou seja, ao atingir esse limite, você não receberá mais envios durante o restante do mês. Embora ofereça opções para o plano Premium (que é ilimitado), uma solução interessante seria usar o Google Drive como Formulário de Upload. A outra opção é melhor, porém, não suportada pelo Blogger - que é usar um Script em PHP.
Ensinarei a como criar e instalar um sistema de upload no Blogger, para que seja possível o envio de arquivos ao dono do blog. Trata-se de um sistema bem dinâmico, simples e configurável, pois você poderá estipular os tipos e o tamanho máximo dos arquivos a serem upados. Sobretudo, modificar a aparência do sistema.
Ferramentas necessárias:
Conta Google Drive ou Dropbox
JotForm
Como funciona?
Só para esclarecer melhor, os arquivos que forem upados em seu blog, serão enviados para seu Google Drive (que oferece 5 GB de armazenamento para conta free) ou Dropbox. Porém, você pode ir apagando os arquivos recebidos (após salvá-los), para ir liberando espaço.
O JotForm, por sua vez, é um serviço que fornece a criação de formulários de contato. No entanto, além de profissional, o serviço oferece a excelente opção de incluir uma área de upload nesse formulário. O JotForm gera um código Javascript — o qual você deverá colocar em seu blog — e uma vez que o upload for feito por esse formulário, os arquivos serão enviados à sua conta do Drive, como explicado anteriormente.
1ª Etapa | Criando o formulário
1. Acesse o JotForm e crie um formulário. Se preferir, você pode utilizar os gratuitos templates prontos do site para criar o formulário.
2. Para traduzir, excluir, modificar ou realizar qualquer alteração nos elementos desse formulário, dê um clique sobre o respectivo elemento e clique no botãozinho que aparecerá à direita (ao lado do botão X). Você terá todas as opções necessárias. Para traduzir o elemento, basta clicar duas vezes sobre ele e alterar o nome.
Você não é obrigado a criar o formulário de contato (embora seja recomendável). Se deseja apenas criar o formulário de upload, delete todos os elementos do formulário e vá para a segunda etapa.
2ª Etapa | Criando o sistema de upload
1. Ao lado esquerdo da página do JotForm, temos um painel de opções. Clique sobre o item "Carregar arquivo". Um novo elemento será inserido no formulário.
2. Acesse as propriedades desse elemento. Para isso, selecione-o e clique no botão
à direita. Selecione "Mostrar Propriedades". 3. Na janela que abriu, você poderá modificar o texto do botão (Button Text), alterar o título (Pergunta), decidir o tamanho máximo permitido no upload (Max File Size), os tipos de arquivos permitidos (Extensions), entre outros detalhes. Configure como quiser e depois clique em Fechar Configurações para salvar.
4. Após configurar o elemento e salvar, você irá retornar à janela principal. Caso o botão de envio não apareça no formulário, no painel à esquerda, selecione agora o item "Botão de Envio". O usuário deverá clicar nesse botão para subir o arquivo.
5. Para alterar as propriedades desse elemento, faça o mesmo procedimento do Passo 2 para acessar as propriedades dele.
6. Pronto! O formulário está criado.
3ª Etapa | Integrando ao Google Drive/Dropbox
1. Selecione a aba "Setup & Embed" do formulário e clique na opção "Integrations".
2. Escolha o serviço "Google Drive" ou "Dropbox" na lista de integrações.
Nota: Eu uso o Drive. Portanto, me baseei na integração com ele. Se você usa o Dropbox e o escolheu na lista, não tem problema. É o mesmo conceito de integração.
3. Clique em Authenticate e faça login em sua conta do Google Drive ou Dropbox.
4. Na janela que abrirá, clique em "Permitir acesso". Em seguida, clique em Próximo na janela do JotForm para dar continuidade.
5. Quando a integração terminar, o JotForm fornecerá um link direto a você. Este é o link que o(a) redireciona para a pasta onde os arquivos serão salvos no seu Google Drive. Guarde este link e feche a janela aberta.
6. Voltando ao painel do JotForm, clique no item "Código Fonte" e copie o código que o site irá gerar.
4ª Etapa | Adicionando ao Blogger
Faça login em sua conta Blogger e cole o código copiado do JotForm no local onde o sistema de upload deverá aparecer em seu blog.
Se quiser colocar o formulário dentro de um post, clique na guia HTML dentro do post e cole o código.
Pessoalmente falando, aconselho você a inserir esse sistema em uma Página Estática do blog. Basta clicar na guia HTML e colar o código lá.
Quando o usuário fizer o upload de algum arquivo neste formulário, o arquivo irá direto para a pasta de integração do JotForm no Google Drive ou Dropbox (é aquela pasta que o JotForm forneceu o link direto). Use aquele link para chegar até essa pasta. Pra quem usa o Drive, na lista à esquerda, basta selecionar a opção do formulário criado no serviço.
Veja abaixo uma demonstração de um sistema MP3 uploader pronto.
 |
| CLIQUE PARA AMPLIAR |
Limite Mensal
Como trata-se de um serviço gratuito, ele tem um limite de 100 uploads mensais. Ou seja, ao atingir esse limite, você não receberá mais envios durante o restante do mês. Embora ofereça opções para o plano Premium (que é ilimitado), uma solução interessante seria usar o Google Drive como Formulário de Upload. A outra opção é melhor, porém, não suportada pelo Blogger - que é usar um Script em PHP.
Dúvidas ou problemas?
É só comentar!
domingo, 14 de outubro de 2012
Box de Redes Sociais para Blogger
Atendendo a pedidos, no post de hoje ensinarei a como instalar um gadget de redes sociais com efeito slide (expansível) no Blogger. São 5 boxes na verdade: Facebook, Twitter, Google+, Youtube e FeedBurner. Essencial para quem quer divulgar seu blog ou site de maneira mais personalizada.
As boxes ficam escondidas na lateral direita da página e, ao encostar o mouse, a box acionada aparece para o usuário clicar e acompanhar seus perfis sociais. O processo para adicionar esse gadget é bem simples. Tudo feito em 2 passos.
Clique no botão abaixo para instalar o gadget.
Repare que no código do gadget, exibido nesse campo acima, eu grifei 5 itens com cores distintas. Cada cor representa uma rede social, a qual você deverá alterar. Leia a explicação a seguir e modifique de acordo.
seututorial => Altere para o nome da sua fanpage do Facebook (não o link, apenas o ID)
seututorial => Altere para o nome do seu perfil no Twitter
116899029375914044550 => Altere pelo o ID do link do seu perfil no Google+
seututorial => Altere para o nome do seu perfil no Feedburner
youtubebrasil => Altere para o nome do seu perfil no Youtube
Utilize o atalho Ctrl + F para encontrar os elementos e efetue as modificações necessárias.
As boxes ficam escondidas na lateral direita da página e, ao encostar o mouse, a box acionada aparece para o usuário clicar e acompanhar seus perfis sociais. O processo para adicionar esse gadget é bem simples. Tudo feito em 2 passos.
Confira como o gadget funciona (olhe na lateral direita da página)
1 - INSTALANDO O GADGET NO BLOGGER
Clique no botão abaixo para instalar o gadget.
2 - ALTERANDO O CÓDIGO
<style> img, a { border: 0; } #on { visibility: visible; } #off { visibility: hidden; } #facebook_div { width: 235px; height: 236px; overflow: hidden; } #twitter_div { width: 246px; height: 240px; overflow: hidden; } #google_plus_div { width: 290px; height: 250px; overflow: hidden; margin-left: 5px; margin-top: 1px; } #STfeedburner_div { width: 300px; height: 120px; overflow: hidden; margin-top: 5px; margin-left: -4px; } #ST_div { width: 300px; height: 97px; overflow: hidden; } /* right side style */ #facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; right: -239px; } #facebook_right img { position: absolute; top: -2px; left: -35px; } #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; left: -2px; top: -3px; } #twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 250px; height: 240px; position: fixed; right: -254px; } #twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; right: -294px; } #google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -304px; } #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #ST_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #ST_right img { position: absolute; top: -2px; left: -101px; } /* left side style */ #facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; left: -239px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; right: -2px; top: -3px; } #twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 240px; position: fixed; left: -254px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; } #google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: 2px solid #0056a0; width: 290px; height: 120px; position: fixed; left: -294px; } #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -304px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #ST_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #ST_left img { position: absolute; top: -2px; right: -101px; } .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0; } .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px; } .submitbutton { background: #FF8000; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } #youtube_right { z-index: 10001; background-color: #fefefe; border:2px solid #ff0000; border-top:2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right:2px solid #5b5b5b; border-left: hidden; width:301px; height: 106px; position: fixed; right: -304px; } #youtube_right_img { position: absolute; top: -2px; left: -33px; border: </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#facebook_right").stop( true, false).animate( { right: -239 }, 500); }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 500); }); jQuery("#google_plus_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop( true, false).animate( { right: -294 }, 500); }); jQuery("#feedburner_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop( true, false).animate( { right: -304 }, 500); }); jQuery("#youtube_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#youtube_right").stop( true, false).animate( { right: -304 }, 500); }); }); </script> <br /> <div id="on"> <div id="facebook_right" style="top: 8%;"> <div id="facebook_div"> <img alt="" src="http://1.bp.blogspot.com/-WeW1BNfgIQ4/UrZ7-WGY1DI/AAAAAAAAHNQ/YKmMMwBCviU/s1600/STfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fseututorial&width=250&height=250&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 24%;"> <div id="twitter_div"> <img id="twitter_right_img" src="http://3.bp.blogspot.com/-BgUBLu5c47Y/UrZ7-wIoZRI/AAAAAAAAHNU/xTID6ujK4_U/s1600/STtwitter_right.png" /> <div style="width:248px;font-size:8px;text-align:right;">
<script type="text/javascript">
document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=seututorial&settings=1,1,3,236,550,f4f4f4,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script> <a href="http://seututorial.com" target="_blank"></a> </div> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 41%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="http://3.bp.blogspot.com/-FCjqAlmrX30/UrZ7-qt7e1I/AAAAAAAAHNY/V1LcrT_junw/s1600/STgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/116899029375914044550" data-source="blogger:blog:followers" data-width="270"></div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'pt' }; var po = document.createElement( 'script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName( 'script')[0]; s.parentNode.insertBefore( po, s); })(); </script> </div> </div> </div> <div id="on"> <div id="feedburner_right" style="top: 75%;"> <div id="STfeedburner_div"> <center> <h4 style="color: #f66303;">Receba as novidades por e-mail:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=seututorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" value="Digite seu e-mail aqui..." /> <input name="uri" type="hidden" value="seututorial" /> <input class="submitbutton" type="submit" value="Assinar" /> </form> </center> <img id="feedburner_right_img" src="http://2.bp.blogspot.com/-S6k1Ud1hYyY/UHpJkuM7dfI/AAAAAAAAEOc/ACnXCA_cQP8/s320/feed-rss.png" /> <div style="float: right; padding: 20px; margin: 0px;"> <span style="font-size:8px;"></span> </div> </div> </div> <div id="on"> <div id="youtube_right" style="top:58%;"> <div id="youtube_div"> <img id="youtube_right_img" src="http://3.bp.blogspot.com/-VXmdKAduQ4Q/UrZ7_D9tXTI/AAAAAAAAHNg/CtL8H36MEAM/s1600/STyoutube_right.png" /> <div style="float:left;margin:1px 0px 0px 2px;"> <iframe src=http://www.youtube.com/subscribe_widget?p=youtubebrasil style="height:105px;width:300px;border:0;" scrolling="no" frameborder="0"></iframe> </div> </div> </div> </div></div></div>
<script type="text/javascript">
document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=seututorial&settings=1,1,3,236,550,f4f4f4,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script> <a href="http://seututorial.com" target="_blank"></a> </div> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 41%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="http://3.bp.blogspot.com/-FCjqAlmrX30/UrZ7-qt7e1I/AAAAAAAAHNY/V1LcrT_junw/s1600/STgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/116899029375914044550" data-source="blogger:blog:followers" data-width="270"></div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'pt' }; var po = document.createElement( 'script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName( 'script')[0]; s.parentNode.insertBefore( po, s); })(); </script> </div> </div> </div> <div id="on"> <div id="feedburner_right" style="top: 75%;"> <div id="STfeedburner_div"> <center> <h4 style="color: #f66303;">Receba as novidades por e-mail:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=seututorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" value="Digite seu e-mail aqui..." /> <input name="uri" type="hidden" value="seututorial" /> <input class="submitbutton" type="submit" value="Assinar" /> </form> </center> <img id="feedburner_right_img" src="http://2.bp.blogspot.com/-S6k1Ud1hYyY/UHpJkuM7dfI/AAAAAAAAEOc/ACnXCA_cQP8/s320/feed-rss.png" /> <div style="float: right; padding: 20px; margin: 0px;"> <span style="font-size:8px;"></span> </div> </div> </div> <div id="on"> <div id="youtube_right" style="top:58%;"> <div id="youtube_div"> <img id="youtube_right_img" src="http://3.bp.blogspot.com/-VXmdKAduQ4Q/UrZ7_D9tXTI/AAAAAAAAHNg/CtL8H36MEAM/s1600/STyoutube_right.png" /> <div style="float:left;margin:1px 0px 0px 2px;"> <iframe src=http://www.youtube.com/subscribe_widget?p=youtubebrasil style="height:105px;width:300px;border:0;" scrolling="no" frameborder="0"></iframe> </div> </div> </div> </div></div></div>
Repare que no código do gadget, exibido nesse campo acima, eu grifei 5 itens com cores distintas. Cada cor representa uma rede social, a qual você deverá alterar. Leia a explicação a seguir e modifique de acordo.
seututorial => Altere para o nome da sua fanpage do Facebook (não o link, apenas o ID)
seututorial => Altere para o nome do seu perfil no Twitter
116899029375914044550 => Altere pelo o ID do link do seu perfil no Google+
seututorial => Altere para o nome do seu perfil no Feedburner
youtubebrasil => Altere para o nome do seu perfil no Youtube
Utilize o atalho Ctrl + F para encontrar os elementos e efetue as modificações necessárias.
Dúvidas ou problemas?
Deixe um comentário
Deixe um comentário
quinta-feira, 20 de setembro de 2012
Como usar a antiga versão do Blogger
O Blogger removeu definitivamente a opção que nos permitia reverter à versão antiga de sua interface. O novo layout agora tornou-se obrigatório em todos os perfis do Blogger.
Pessoalmente, não gostei muito dessa nova aparência do Blogger. Porém, é uma questão de preferência. Há quem goste mais do novo, e há quem prefira o antigo. Pode ser que um dia eu consiga me adaptar ao novo layout, mas, por enquanto, o antigo me agrada mais.
Para quem também não gosta do novo Blogger, eis abaixo uma maneira de regressar ao draft antigo do Blogger.
1. Faça login em seu Blogger e acesse qualquer painel de configuração dele (seja o painel de comentários, estatísticas, modelo, páginas, etc).
2. Olhe na barra de endereços do seu navegador (onde digitamos o endereço dos sites) e observe que haverá uma sequência numérica (seu BlogID). Cada perfil tem um BlogID próprio, portanto, um é diferente do outro. Anote apenas a sequência numérica do seu BlogID.
Exemplo:
http://draft.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX#pages
OBS: Os "X", grifados de amarelo, correspondem ao seu BlogID. Copie-o e cole em algum lugar de fácil acesso, como no Bloco de Notas, por exemplo.
3. Copie o endereço abaixo e cole na barra de endereços do seu navegador.
http://www.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXXX
4. Agora apenas substitua a parte amarela pelo número do seu BlogID e tecle Enter para ver o bom e velho layout do Blogger.
É importante ressaltar que o editor do Blogger, onde você escreve os artigos, não irá mudar. Ele continuará com a nova aparência. Somente o painel principal mudará.
Outro ponto negativo é que você terá de fazer isso sempre que logar-se no Blogger.
Se eu descobrir um método melhor, atualizarei este post.
Pessoalmente, não gostei muito dessa nova aparência do Blogger. Porém, é uma questão de preferência. Há quem goste mais do novo, e há quem prefira o antigo. Pode ser que um dia eu consiga me adaptar ao novo layout, mas, por enquanto, o antigo me agrada mais.
Para quem também não gosta do novo Blogger, eis abaixo uma maneira de regressar ao draft antigo do Blogger.
 |
| ANTIGO BLOGGER |
 |
| NOVO BLOGGER |
1. Faça login em seu Blogger e acesse qualquer painel de configuração dele (seja o painel de comentários, estatísticas, modelo, páginas, etc).
2. Olhe na barra de endereços do seu navegador (onde digitamos o endereço dos sites) e observe que haverá uma sequência numérica (seu BlogID). Cada perfil tem um BlogID próprio, portanto, um é diferente do outro. Anote apenas a sequência numérica do seu BlogID.
Exemplo:
http://draft.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXXXXXX#pages
OBS: Os "X", grifados de amarelo, correspondem ao seu BlogID. Copie-o e cole em algum lugar de fácil acesso, como no Bloco de Notas, por exemplo.
3. Copie o endereço abaixo e cole na barra de endereços do seu navegador.
http://www.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXXX
4. Agora apenas substitua a parte amarela pelo número do seu BlogID e tecle Enter para ver o bom e velho layout do Blogger.
É importante ressaltar que o editor do Blogger, onde você escreve os artigos, não irá mudar. Ele continuará com a nova aparência. Somente o painel principal mudará.
Outro ponto negativo é que você terá de fazer isso sempre que logar-se no Blogger.
Se eu descobrir um método melhor, atualizarei este post.
terça-feira, 7 de agosto de 2012
Widget SexyBookmarks no Blogger
A pedidos, no post de hoje ensinarei a colocar o widget Sexy Bookmarks, fornecido pelo serviço gratuito Shareaholic, para que o leitor possa compartilhar seus artigos nas redes sociais de forma mais interessante.
Para conferir uma DEMO, acesse este link. Clique em qualquer post e dirija-se até o final dele.
1. Acesse esta página: http://www.shareaholic.com/publishers/sharing/sexybookmarks
2. Ao lado esquerdo, selecione a plataforma Website. Por que Website e não Blogger? O único motivo de escolhermos esta plataforma, é a praticidade que ela nos oferece para escolhermos os botões que quisermos. Se você selecionar Blogger, ficará limitado a botões pré-definidos pelo serviço, não podendo escolher os botões de sua preferência.
3. Observe agora que, à direita, os botões estão à sua disposição. Tudo o que você precisa fazer é arrastar o botão que deseja do campo inferior para o campo superior (responsável pela formação final do widget).
Para remover um botão do campo de cima, faça exatamente o contrário.
4. Depois de escolher e posicionar seus botões, clique no botão Get buttons (parte superior direita da página).
5. Na próxima tela, o site vai ter gerado um código HTML e um botão para baixar o código CSS do widget. Usaremos ambos os códigos. Portanto, salve o código HTML e clique no botão Get Media Resources (o arquivo virá como shareaholic_sexybookmarks.zip).
1. Extraia os arquivos da pasta shareaholic_sexybookmarks.zip. Você verá dois arquivos: sprite.css (código CSS) e sprite.png (imagem).
2. A imagem você deverá hospedar em um serviço de compartilhamento de imagens, como Imgur, ImageShack, TinyPic ou qualquer outro de sua preferência, e pegar o link dela.
3. O arquivo CSS você deverá abrir no Bloco de Notas do seu computador (Iniciar > Todos os programas > Acessórios > Bloco de Notas) para que o código seja exibido.
4. Entre no Blogger e faça login em sua conta. Clique em Modelo > Editar HTML. Marque a opção "Expandir modelos de widgets"
5. Pressione as teclas Ctrl + F e procure pela tag ]]></b:skin>. ANTES (acima) dessa tag, cole o código CSS que você abriu no Bloco de Notas.
6. Procure então por <div class='post-footer'>. Logo DEPOIS (abaixo) desse código, cole o código HTML que você copiou na página do Shareaholic.
7. Agora muita atenção! Dentro do código HTML, encontre a parte destacada em vermelho no trecho abaixo.
8. Substitua o {Place_Path_Here} pelo link da imagem que você hospedou anteriormente. Exemplo:
var SHRSB_Settings = {"shr_class":{"src":"http://i.imgur.com/imagem.png"
9. Salve o template e confira o resultado.
Para conferir uma DEMO, acesse este link. Clique em qualquer post e dirija-se até o final dele.
1º Passo
1. Acesse esta página: http://www.shareaholic.com/publishers/sharing/sexybookmarks
2. Ao lado esquerdo, selecione a plataforma Website. Por que Website e não Blogger? O único motivo de escolhermos esta plataforma, é a praticidade que ela nos oferece para escolhermos os botões que quisermos. Se você selecionar Blogger, ficará limitado a botões pré-definidos pelo serviço, não podendo escolher os botões de sua preferência.
3. Observe agora que, à direita, os botões estão à sua disposição. Tudo o que você precisa fazer é arrastar o botão que deseja do campo inferior para o campo superior (responsável pela formação final do widget).
Para remover um botão do campo de cima, faça exatamente o contrário.
4. Depois de escolher e posicionar seus botões, clique no botão Get buttons (parte superior direita da página).
5. Na próxima tela, o site vai ter gerado um código HTML e um botão para baixar o código CSS do widget. Usaremos ambos os códigos. Portanto, salve o código HTML e clique no botão Get Media Resources (o arquivo virá como shareaholic_sexybookmarks.zip).
2º Passo
1. Extraia os arquivos da pasta shareaholic_sexybookmarks.zip. Você verá dois arquivos: sprite.css (código CSS) e sprite.png (imagem).
2. A imagem você deverá hospedar em um serviço de compartilhamento de imagens, como Imgur, ImageShack, TinyPic ou qualquer outro de sua preferência, e pegar o link dela.
3. O arquivo CSS você deverá abrir no Bloco de Notas do seu computador (Iniciar > Todos os programas > Acessórios > Bloco de Notas) para que o código seja exibido.
4. Entre no Blogger e faça login em sua conta. Clique em Modelo > Editar HTML. Marque a opção "Expandir modelos de widgets"
5. Pressione as teclas Ctrl + F e procure pela tag ]]></b:skin>. ANTES (acima) dessa tag, cole o código CSS que você abriu no Bloco de Notas.
6. Procure então por <div class='post-footer'>. Logo DEPOIS (abaixo) desse código, cole o código HTML que você copiou na página do Shareaholic.
OBS: Desse jeito, o widget ficará posicionado no final de cada artigo. Mas você pode colocá-lo na parte que achar mais conveniente.
7. Agora muita atenção! Dentro do código HTML, encontre a parte destacada em vermelho no trecho abaixo.
var SHRSB_Settings = {"shr_class":{"src":"<b><span style="color: red;">{Place_Path_Here}</span></b>"See the Pen %= penName %> by matttttttttt (@marcelost) on CodePen
8. Substitua o {Place_Path_Here} pelo link da imagem que você hospedou anteriormente. Exemplo:
var SHRSB_Settings = {"shr_class":{"src":"http://i.imgur.com/imagem.png"
9. Salve o template e confira o resultado.
segunda-feira, 18 de junho de 2012
Como colocar senha nos posts do Blogger
Atendendo a um pedido enviado pelo leitor Marcos, vou mostrar uma dica bem diferente e interessante. Trata-se de um recurso externo que raramente vemos em sites de dicas, e espero que seja útil de alguma maneira para você!
Quem quiser saber como o recurso funciona na prática, confira a nossa DEMO abaixo.
Senha nos Posts do Blogger
1. Faça login em seu blog.
2. No painel de configurações do Blogger, clique em Modelo e depois em Editar HTML. Na tela de confirmação clique em Prosseguir.
3. Pressione Ctrl F do teclado e procure pela seguinte tag: ]]></b:skin>
4. Exatamente ABAIXO (depois) da tag pesquisada, cole o código Javascript a seguir.
<!--ST SENHA CODIGO --> <script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>See the Pen Blkqd by Seu Tutorial (@marcelost) on CodePen
5. Clique em Salvar Modelo.
Configurando a Inserção de Senha
1. Crie sua postagem normalmente e, após criá-la, mude o conteúdo da postagem para a opção HTML. Copie a parte do post que recebrá a proteção ou, caso queira proteger o post inteiro, copie todo o HTML dele.
2. Agora acesse esta página e faça a configuração das opções de acordo com a figura abaixo, depois clique no botão Encrypt (posicionado abaixo do campo verde Plain Text).
3. Desça até o campo roxo HTML Code. Selecione o modo como será exibido o texto uma vez protegido, escolhendo entre Standard, Inline ou asteríscos (***). Depois disso, copie todo código dentro da caixa HTML Code.
4. Agora simplesmente cole este código no lugar do texto do post em seu editor HTML no Blogger.
5. Visualize e veja se está tudo ok. Estando tudo certo, basta publicar o post!
Nota: Se desejar alterar o título "Show encrypted text" por um outro de sua preferência, basta encontrá-lo no código copiado do site (no final do código) e alterar normalmente.
Quando alguém clicar no título do texto protegido, receberá uma pop-up como esta abaixo, onde ela deverá inserir a senha.
quinta-feira, 31 de maio de 2012
Barra flutuante de Redes Sociais nos posts (Blogger)
A pedidos de alguns de nossos leitores que possuem blogs no serviço Blogger (Blogspot), neste tutorial vou ensinar a como instalar um gadget flutuante de compartilhamento dentro dos posts.
Fornecerei a opção para três gadgets diferentes. Os gadgets são similar a esses da figura abaixo, cujos movimentam-se juntos ao scroll da página. Eles oferecem os botões dos principais serviços da atualidade: Facebook (Curtir e Compartilhar), Twitter, Google+, LinkedIn e Pinterest.
Veja a imagem abaixo, escolha o que mais lhe agrada e siga as instruções de instalação dele no tutorial.
Gadget Flutuante com Contador no Blogger
1ª Parte - Backup
Primeiramente, efetue login em seu blog e faça um backup completo do seu template no caso de algo sair errado.
Vá em Modelo e depois clique em Fazer backup/Restaurar (na parte superior direita). Após isso, clique no botão Fazer download do modelo completo.
2ª Parte - Adicionando o Código
1. Agora, nesta mesma página, clique em Editar HTML > Prosseguir e marque a opção "Expandir modelos de widgets"
2. Dentro do template, pressione as teclas Ctrl + F do teclado e procure pelo seguinte código: <b:includable id='post' var='post'>. [CLIQUE AQUI para copiar]
3. Exatamente ABAIXO (depois) do código pesquisado acima, cole TODO o código do modelo do gadget de sua preferência.
MODELO SIMPLES
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-80px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fafafa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title='Compartilhe com seus amigos'>
<div class='sbutton' id='gb'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/></div>
<div class='sbutton' id='rt'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div class='sbutton' id='gplusone'><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div></div>
</b:if></b:if>See the Pen yqFnI by matttttttttt (@marcelost) on CodePen
MODELO ADDTHIS
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_linkedin_counter" li:counter="top"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</b:if></b:if>See the Pen cAfjm by Seu Tutorial (@marcelost) on CodePen
MODELO ST
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-105px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fafafa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title='Compartilhe com seus amigos'>
<div class='sbutton' id='gb'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/></div>
<div class='sbutton' id='rt'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div class='sbutton' id='pinit'><script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/><a data-pin-color='red' data-pin-do='buttonBookmark' data-pin-height='28' href='//www.pinterest.com/pin/create/button/'><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png'/></a></div>
<div class='sbutton' id='gplusone'><div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
<script type="text/javascript">
window.___gcfg = {lang: 'pt-BR'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
<div class='sbutton' id='fbshare'><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-share-button" data-width="48" data-type="box_count"></div></div>
</div>
</b:if></b:if>See the Pen ngqaL by Seu Tutorial (@marcelost) on CodePen
Nota: O gadget não aparecerá na homepage do seu blog/site, apenas nos posts individuais. Se você quiser que ele apareça em qualquer parte do blog, basta remover as duas primeiras linhas e a última do código acima.
4. Visualize e veja se está tudo ok. Se estiver, salve a alteração e pronto.
3ª Parte - Personalizando
Você pode alterar o lado onde o gadget ficará (esquerdo ou direito), o background, borda e a distância entre o campo de postagem. Para isso, iremos modificar apenas as áreas equivalentes a estas partes no container.
- Escolhendo o lado dos modelos simples e ST
Na quarta linha do código, repare nas partes destacadas em vermelho a seguir:
#pageshare {position:fixed; bottom:15%; margin-left:-80px; float:left;
Coloque 'right' para deixá-lo na direita.
Mantenha 'left' para fixá-lo à esquerda mesmo.
- Escolhendo o lado do modelo AddThis
Altere a parte em vermelho abaixo no código colocando 'right' no lugar de 'left'.
left:50px;top:50px;
- Alterando o fundo (background) e Borda
Na quarta linha do código mesmo, modifique o valor HTML do código destacado abaixo para definir a cor de fundo do gadget.
background-color:#fafafa;
Confira a tabela de cores HTML nesta página.
Nesta mesma linha, altere o nome em destaque da parte abaixo pelo código HTML da cor da borda que deseja.
border: 1px solid black;
Troque apenas o 'black' pelo código da cor.
- Configurando a distância
Você pode colocar o gadget bem próximo ao post (padrão), dentro do post (não recomendável), colado na borda da tela ou em qualquer local que achar melhor.
No modelo simples, altere o valor -80px da parte "margin-left: -80px", em:
#pageshare {position:fixed; bottom:15%; margin-left:-80px;
Quando aumenta o valor, o gadget tende a ficar mais distante do post.
Quando diminui o valor, o gadget ficará cada vez mais próximo do post.
No modelo AddThis, altere o valor 50px da parte "left:50px;top:50px;".
Quando aumenta o valor, o gadget tende a ficar mais próximo do post.
Quando diminui o valor, o gadget ficará cada vez mais distante do post.
No modelo ST, altere o valor -105px da parte "margin-left: -105px".
Dúvidas ou problemas? É só comentar!
sábado, 5 de maio de 2012
Páginas dentro de um post no Blogger
Um recurso bastante comum em certos blogs e sites é a paginação interna nas postagens. Trata-se de algo extremamente útil em muitas ocasiões, principalmente se o post que você está escrevendo é demasiadamente grande.
Para quem não entendeu, suponhamos que você queira dividir uma postagem em três partes (páginas), onde em cada página específica haverá um conteúdo diferente. Ainda não compreendeu?
Confira uma DEMO em nosso blog de testes.
Enfim, tudo o que este recurso faz é separar o post em páginas.
Como adicionar este recurso
Nota: Este recurso só funciona quando a área de postagem está na guia HTML. Portanto, deixe para aplicar este recurso somente após ter escrito e revisado todo o seu artigo. Se ele for aplicado na guia Escrever não funcionará.
1. Na área de postagem clique na aba HTML e não volte em Escrever depois disso.
2. Copie este código Javascript abaixo e cole no final do seu artigo.
<script src="https://sites.google.com/site/seututorial/seututorial/pagpost.js" ></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>See the Pen aikvD by Seu Tutorial (@marcelost) on CodePen
3. Agora copie este código CSS e cole no final do artigo também, abaixo do código Javascript anterior.
<style>
div.content11 {clear: left;padding: 1em;}
div.content11.inactive {display: none;}
ol#toc {height: 2em;list-style: none;margin: 0;padding: 0;}
ol#toc a {background-color: <b><span style="color: red;">#00EEEE</span></b>;padding: 0px 8px 0px;margin: 1px 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;}
ol#toc a:hover {background-color: <b><span style="color: red;">#DBECF8</span></b>;padding: 0px 8px 0px;border:1px solid #204e73;}
ol#toc a:hover span {background-position: 100% -120px;}
ol#toc li {float: left;margin: 0 6px 0 0;}
ol#toc li a.active {background-color: <b><span style="color: red;">#48f;</span></b>background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#toc li a.active span {background-position: 100% -60px;}
ol#toc span {background: url(tabs.gif) 100% 0;display: block;line-height: 2em;padding-right: 10px;}
</style>See the Pen pyBkb by Seu Tutorial (@marcelost) on CodePen
OBS: Nas linhas destacadas em vermelho, você deve alterar pelo valor da cor que os botões terão. Tabela de cores HTML.
ol#toc a {background-color: #00EEEE => Esta é a cor padrão que ficará de fundo nos botões
ol#toc a:hover {background-color: #DBECF8 => Esta é a cor que aparecerá quando passar o mouse
ol#toc li a.active {background-color: #48f => Esta é a cor do botão da página que está sendo lida
4. Agora poste este último código no começo do post.
<div class="content11" id="page-1">
Cole aqui o conteúdo da Página 1
</div>
<div class="content11" id="page-2">
Cole aqui o conteúdo da Página 2
</div>
<div class="content11" id="page-3">
Cole aqui o conteúdo da Página 3
</div>
<ol id="toc">
<li><a href="#page-1">1</a></li>
<li><a href="#page-2">2</a></li>
<li><a href="#page-3">3</a></li>
</ol>See the Pen qcFzk by Seu Tutorial (@marcelost) on CodePen
Embora este último código seja auto-explicativo, vou explicá-lo mesmo assim.
Cole aqui o conteúdo da Página 1 => Nesta área você deve colocar todo conteúdo que aparecerá somente na 1ª página.
Cole aqui o conteúdo da Página 2 => Nesta área você deve colocar todo conteúdo que aparecerá somente na 2ª página.
Cole aqui o conteúdo da Página 3 => Nesta área você deve colocar todo conteúdo que aparecerá somente na 3ª página.
5. Pronto! Visualize o post e se estiver tudo ok, publique-o!
Lembrando mais uma vez que o editor de post deverá estar setado em HTML e não deve ser colocado em Escrever. Se você precisar de editar o post futuramente, edite-o em HTML mesmo senão o ID do seu perfil entrará no meio do último código, e ele vai parar de funcionar.
Veja as imagens de demonstração
domingo, 12 de fevereiro de 2012
Mostrar e ocultar texto em um post (Blogger)
Você já ouviu falar em um recurso chamado Spoiler? Sim? Não? Enfim... O Spoiler é um recurso usado para exibir e esconder um texto dentro de um post (seja em um blog, site, fórum e etc). Suponhamos que você queira ocultar uma determinada parte do post e fazer com que ela seja mostrada somente quando o leitor quiser visualizá-la, basta usar o efeito Spoiler.
Não entendeu? Mostrarei na prática como funciona. Clique no botão abaixo e veja o que acontecerá.
Mais fácil de entender, não?
Bem, aplicar este recurso no Blogger é a coisa mais simples do mundo. Não há necessidade de modificar o template ou adicionar gadgets no blog.
Spoilers no Blogger
1. Crie uma nova postagem e mude para a opção Visualização em HTML.
2. Agora copie o código abaixo e cole na área de postagem (no local onde o Spoiler ficará em seu post).
<div id="spoiler" style="display:none">TEXTO OCULTADO</div> <button title="Clique para mostrar/ocultar" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">CLIQUE AQUI</button>See the Pen umFqi by Seu Tutorial (@marcelost) on CodePen
Altere as partes abaixo por textos de sua preferência.
Onde está "TEXTO OCULTADO" é o texto que você ocultarrá com o Spoiler. Tudo que você quiser esconder/exibir, escreva nesta área.
Onde está a mensagem "CLIQUE AQUI" é o nome do botão do Spoiler que a pessoa vai clicar. Dê o nome que quiser ao botão.
3. Após adicionar seu Spoiler, visualize para ver se está tudo ok e então poste.
Adicionando mais de um Spoiler
Se você pretende colocar mais de um Spoiler em seu post, a única coisa que você terá de fazer é acrescentar outro caractere às tags "spoiler" (4 no total) presentes no código.
Exemplo.
<div id="spoiler1" style="display:none">TEXTO OCULTADO</div> <button title="Clique para mostrar/ocultar" type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}">CLIQUE AQUI</button>See the Pen HcCGE by Seu Tutorial (@marcelost) on CodePen
Repare que no código acima, é acrescentado o número 1 após o nome 'spoiler'. Isso irá diferenciar um spoiler do outro, quando houverem dois spoilers. Se existirem três Spoilers em sua postagem, por exemplo, você deverá acrescentar um caractere distindo dos outros dois no terceiro Spoiler.
Se você deixar o mesmo nome em todos os Spoilers, nenhum funcionará corretamente.
Personalizando o botão
Você pode também customizar o botão do Spoiler inserindo uma imagem ao invés de um botão. Para isto, basta mudar o texto "CLIQUE AQUI" pelo código abaixo.
<img src="URL DA IMAGEM" />
Exemplo.
<div id="spoiler" style="display:none"> TEXTO OCULTADO </div> <button title="Clique para mostrar/ocultar" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"> <img src="URL DA IMAGEM" /></button>See the Pen LAbvC by Seu Tutorial (@marcelost) on CodePen
quinta-feira, 1 de dezembro de 2011
Como remover a propaganda do FlashVortex sem conta premium
O FlashVortex é um site extremamente útil para quem deseja inserir uma animação em flash no blog ou site. Através desta ferramenta, é possível criar facilmente banners, menus, botões e textos -- tudo em flash -- de forma rápida e gratuita. Existe também a versão paga da ferramenta.
No entanto, a versão gratuita deixa uma propaganda do site na parte inferior da animação. E isso desagrada muita gente. Veja o exemplo abaixo.
Hoje explicaremos como remover esta publicidade da animação sem a necessidade de uma conta premium (paga).
Há dois métodos eficazes atualmente: um que é mais complexo e trabalhoso, mas, funciona com todas as animações. E o outro que é bem mais simples, porém, funciona somente para os menus verticais (não horizontais).
Selecione o método desejado a seguir.
Método 1
Método 2 (somente para menu vertical no FlashVortex)
MÉTODO 1
Requisitos
OBS: O Photofiltre e o Google Sites são recomendações pessoais. Se você conhece ou utiliza algum site que aceite a hospedagem de arquivos flash (.swf) e já possui um editor de imagens preferenciais, fique à vontade para usá-los. Mas esse tutorial foi preparado com base nos itens acima sugeridos.
1º Passo - Baixando o arquivo .swf
Após criar a sua animação, na página onde você pega o código do flash, em vez de copiar o código clique no botão Clique Here to Download para baixar o arquivo puro.
Salve o arquivo .swf em um local de fácil acesso em seu PC.
2º Passo - Usando o Flash Decompiler
Após executar o Flash Decompiler, clique no botão Open e selecione o arquivo .swf baixado.
Agora clique em Edit e depois em Images.
Ao lado esquerdo selecione a imagem que mostra a propaganda do FlashVortex. No campo central onde mostra as informações da imagem, procure por "Size" e anote as dimensões da imagem da propaganda.
Mantenha o Flash Decompiler aberto neste exato local e miniminize-o na barra de tarefas, por enquanto.
3º Passo - Usando o Photofiltre
Abra o Photofiltre e clique em File > New. Nos campos Width e Height coloque as dimensões da imagem da propaganda do FlashVortex, anotadas anteriormente.
Uma nova imagem será criada no tamanho da imagem da propaganda. Você deverá deixá-la transparente e salvá-la como PNG. Para deixar a imagem transparente leia este tutorial, e use a Varinha Mágica + Transparent Color, conforme o tutorial.
4º Passo - Voltando ao Flash Decompiler e Finalizando
Volte ao Decompiler e, no local onde você parou, ao lado esquerdo inferior da janela do programa, marque a opção PNG e clique no ícone da pastinha amarela.
Selecione a imagem PNG transparente que você criou com o Photofiltre e observe que a propaganda será totalmente trocada pela imagem transparente.
Para salvar a sua nova animação, agora sem qualquer propaganda, clique no ícone do programa na parte superior à esquerda da janela do software.
Para salvar escolha a opção "Save SWF/EXE as", dê o nome que quiser e salve onde quiser. O arquivo será salvo como .swf.
5º Passo - Hospedando o arquivo .swf
Acesse agora o Google Sites e upe o arquivo .swf que você editou pelo Flash Decompiler.
Após upar, clique com o direito do mouse sobre a opção Visualizar do arquivo upado e clique em Copiar link. Esse é o link do seu arquivo flash.
6º Passo - Inserindo a animação no Blogger
Copie e cole o código abaixo no local onde a animação deverá ficar em seu blog. Se for ficar na sidebar vá em Design > Adicionar um Gagdet > HTML/JavaScript e cole o código lá.
NOTA: Para copiar o código, clique no botão "Selecionar Tudo" e copie. Não use o IE.
<embed src="sua animação flash.swf" quality="high" allowscriptaccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="150" width="150"></embed>See the Pen tyrcq by Seu Tutorial (@marcelost) on CodePen
Troque a frase "sua animação flash.swf", em vermelho no código acima, pelo link da sua animação, copiada no 5º passo lá no Google Sites. Altere também os valores de "height" e "width", em azuis, pelos valores de altura e largura que você pretende aplicar em sua animação.
A sua animação ficará com fundo transparente. Mas se preferir que o fundo fique com cor, retire a seguinte linha do código acima: wmode="transparent"
Pronto!
MÉTODO 2
Se você está criando apenas um menu vertical no FlashVortex, o processo de eliminação da propaganda é mais simples que tirar doce de criança! Não exige programas e nem muitos passos.
1. Após criar seu menu, copie o código java que o site fornece no final da criação.
2. Observe que no meio código há vários números. Cada um destes números representam uma parte da propriedade da animação. No entanto, dê uma olhada nos números após o "0" (zero).
Estes números significam largura (os números 149 da imagem acima) e altura (os números 192 da imagem acima). Se você for diminuindo a altura do menu, perceberá que a propaganda irá sumindo gradativamente.
Portanto, o segredo é diminuir a altura do menu. Por exemplo: se o valor da altura é 800, coloque 790/780/776, e assim por diante... até que a propaganda suma de vez!
3. A publicidade sumiu? Ótimo. Agora cole no local onde deseja colocar a animação em seu blog.
Este procedimento não funciona em menus horizontais pois se diminuir a altura deles pode dar erro, ou a propaganda não sumir.
Se você quiser deixar o fundo do menu transparente, basta retirar as aspas após os números e adicionar a seguinte linha: &transparent=yes.
Exemplo:
<script src="http://h1.flashvortex.com/display.php?id=2_1329238667_4576_362_0_226_76_9_1_98&transparent=yes" type="text/javascript"></script>See the Pen Ewpje by Seu Tutorial (@marcelost) on CodePen
Enjoy
