Mostrando postagens com marcador Widgets. Mostrar todas as postagens
Mostrando postagens com marcador Widgets. 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
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.
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
sexta-feira, 17 de junho de 2011
quarta-feira, 13 de abril de 2011
Veja quantas pessoas estão online em seu site ou blog a partir do navegador
Para aqueles que possuem um blog ou site na Internet, estar ciente das estatísticas do seu website é essencial. O Google Analytics é uma ferramenta cuja foi desenvolvida exatamente para esta tarefa. Porém, o Analytics não revela quantos usuários/visitantes estão online visualizando as páginas do seu site em tempo real.
Para isto existe um serviço gratuito muito bom chamado Who's Amung. Trata-se de um serviço muito interessante que tende a lhe informar em tempo real quantas pessoas estão visitando o seu blog. O serviço também fornece uma página com estatísticas que inclui informações como: quais páginas estão sendo lidas, quantos usuários estão no blog, e país/cidade de origem dos visitantes.
No entanto, há dois plugins do Who's Amung que foram criados para os browsers Firefox e Google Chrome, nos quais você pode receber as estatísticas diretamente no navegador, mesmo estando em outro site ou desconectado da conta.
Who's Amung para Chrome
Who's Amung para Firefox
Como instalar o Who's Amung
1. Acesse o site do serviço e logo no começo um código HTML será gerado automaticamente.
2. Selecione a cor do widget e caso queira coloque a sua preferência entre Topo, Médio ou Fundo.
3. Depois copie este código HTML e faça login no Blogger.
4. Clique em Layout ► Adicionar um Gadget ► HTML/JavaScript e cole o código lá dentro.
4. Clique em Salvar e pronto! Vá até o site e você verá um ícone do Who's Amung informando o número de visitantes online.
5. Agora se preferir não adicionar o código na sidebar, insira diretamente no template. Basta ir em Modelo ► Editar HTML e procurar pela tag </head>. Então cole antes desta tag e clique em Salvar Modelo.
Como esconder o widget do Who's Amung dos visitantes
Se por um motivo de privacidade você preferir tornar o widget invisível, onde somente você poderá saber quem está online, faça o seguinte.
OBS: Recomendo que você faça isso apenas se adicionou o código HTML na sidebar, e não em </head>.
Substitua o código HTML que você copiou na página do Who's Amung por este abaixo, e salve.
<img src="http://whos.amung.us/widget/SEU CÓDIGO CHAVE.png" width="0" height="0" border="0" />
Clique aqui para copiar o código
Clique aqui para copiar o código
Para ver qual é o seu "código chave", observe que no meio do código HTML gerado pelo Who's Amung, há uma sequência de caracteres localizado no seguinte local.
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('CÓDIGO CHAVE', 'left-middle')</script>
Exemplo:
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('qeohw87hkacy', 'left-middle')</script>
Depois de realizar esta modificação, para verificar as estatísticas basta digitar o endereço abaixo na barra de endereços do seu navegador e dar Enter.
http://whos.amung.us/stats/SEU CÓDIGO CHAVE/
Instalando e configurando a extensão
Instalar as extensões do serviço nos browsers é muito mais prático, pois você poderá visualizar o número de users online diretamente do browser, sem a necessidade de ir até o seu site.
Who's Amung para Chrome
Who's Amung para Firefox
Firefox
Após instalar é necessário reiniciá-lo para começar a usar a extensão.
1. Agora clique clique no menu Ferramentas ► Complementos ► Extensões ► whos.amung.us ► Opções.
2. No campo em branco digite o seu código chave presente no código HTML do Who's Amung - descrito anteriormente. Dê um OK.
3. Reinicie o Firefox para que as alterações sejam efetuadas.
4. Quando abrir de novo, veja que um ícone vermelho do Who's Amung com o número de users online estará no canto inferior direito do Firefox.
Para acessar as estatísticas completas do seu site, basta clicar sobre o ícone da extensão.
Google Chrome
1. No Chrome você não precisa reiniciar para que a extensão funcione.
2. Vá em Ferramentas ► Ferramentas ► Extensões ► whos.amung.us ► Opções.
3. Na caixa Sitekey #1 digite o seu código chave e clique em Save.
4. Pronto! O ícone do Who's Amung com o número de users online fica na parte superior direita da janela do Chrome.
Para acessar as estatísticas completas do seu site, basta clicar sobre o ícone da extensão.
sexta-feira, 1 de abril de 2011
Como adicionar o recurso Artigos Relacionados no Blogger
A pedido de Luciano, este artigo mostrará como instalar um sistema de artigos relacionados nos posts do Blogger.
O código abaixo foi desenvolvido pelo site: www.bloggerplugins.org
2. Marque a opção "Expandir modelos de widget" e tecle Ctrl + F. Encontre esta linha abaixo:
3. Logo acima desta linha adicione o código a seguir.
4. Agora encontre a tag </head> e acrescente acima dela o seguinte código.
Altere os textos de acordo.
Artigos Relacionados -> é o título do widget. Mas pode modificá-lo com o nome que preferir.
5. Agora procure pela tag ]]></b:skin> e adicione este código acima dela.
Altere as cores e as bordas do widget.
Confira uma tabela de cores com seus respectivos códigos HTML nesta página.
O recurso aparecerá sempre no final de cada post.
Claro que tudo isso depende do tipo do seu template. O widget não ficará adequado para qualquer template.
Existem alguns serviços que oferecem este widget, o mais conhecido é o LinkWithin. Porém, estes serviços limitam qualquer personalização em seus widgets, ou seja, não há como customizar o widget e deixá-lo do seu jeito.
Com o widget presente neste tutorial você poderá realizar qualquer modificação que desejar. Para quem tiver a mesma dúvida do Luciano, é só seguir o tutorial.
O código abaixo foi desenvolvido pelo site: www.bloggerplugins.org
Adicionando Artigos Relacionados no Blogger
1. Faça login em seu blog e vá em Design ► Editar HTML. Primeiramente, clique em Baixar modelo completo para fazer um backup do seu template caso algo saia errado.
2. Marque a opção "Expandir modelos de widget" e tecle Ctrl + F. Encontre esta linha abaixo:
<div class='post-footer'>
3. Logo acima desta linha adicione o código a seguir.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>See the Pen DAeqz by Seu Tutorial (@marcelost) on CodePen
4. Agora encontre a tag </head> e acrescente acima dela o seguinte código.
<script type='text/javascript'>
var defaultnoimage="http://i56.tinypic.com/1zwotms.png";
<b style="color: red;">var maxresults=5</b>;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artigos Relacionados: ";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>See the Pen jCdwz by Seu Tutorial (@marcelost) on CodePen
Altere os textos de acordo.
var maxresults=5 -> define o número de artigos relacionados que aparecerão. Neste caso, 5 posts irão aparecer. Para alterar a quantidade basta trocar o número 5 pelo número de artigos que você quer que apareça. Por exemplo: var maxresults=4
Artigos Relacionados -> é o título do widget. Mas pode modificá-lo com o nome que preferir.
5. Agora procure pela tag ]]></b:skin> e adicione este código acima dela.
#related-posts {
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
width: /* largura do widget */
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
background-color:#FFF; /* cor de fundo do widget */
border:solid 1px #333; /* dimensão e cor da borda do widget */
padding:0 8px;
width:100px;
}
#related-posts a:hover{
color:#fff;
}
#related-posts a:hover {
background-color:#333; /* cor de fundo do widget ao passar o mouse*/
border:solid 1px #FFF; /* dimensão e cor da borda do widget com mouse*/
}See the Pen akHzG by Seu Tutorial (@marcelost) on CodePen
Altere as cores e as bordas do widget.
Background-color:#FFF -> define a cor de fundo do widget. Troque o #FFF pelo código da cor desejada.
Border:solid 1px #333 -> define a cor e a dimensão da borda. Troque o #333 pelo código da cor desejada. E troque o 1px pela dimensão que se encaixe melhor com seus posts.
Confira uma tabela de cores com seus respectivos códigos HTML nesta página.
6. Salve o modelo clicando em Salvar Modelo e veja o resultado. O widget não aparece na homepage, apenas dentro dos posts.
Conclusão
O recurso aparecerá sempre no final de cada post.
Claro que tudo isso depende do tipo do seu template. O widget não ficará adequado para qualquer template.
Por isso, você deve ir modificando as cores e as bordas (conforme mencionado acima) para deixar o widget adaptado ao estilo do seu blog. É bem fácil e rápido!
quarta-feira, 16 de fevereiro de 2011
Subcategorias no Blogger com menu Drop Down (menu vertical)
Meses atrás postamos aqui no site um tutorial de como criar subcategorias simples na plataforma Blogger. Porém, depois de muitos pedidos e explicações sobre como personalizar mais este hack de subcategorias, decidimos fazer este tutorial.
Neste post você verá como criar um menu com submenus (subcategorias) mas dando um efeito conhecido como Drop Down. Para quem não sabe, este efeito faz com que ao colocar o mouse sobre uma determinada categoria, um submenu seja aberto ao lado da categoria principal.
Exemplo:
Menu Vertical com Efeito Drop Down
1. Faça login no Blogger e vá em Layout. Clique em Adicionar um Gadget na sidebar e selecione o item HTML/JavaScript.
2. Agora copie todo este código dentro da caixa abaixo e cole no campo em branco da janela HTML/JavaScript.
<style>
.ddsmoothmenu-v ul {
margin: 0;
padding: 0;
width: 250px;
/* Largura menu principal */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 0px solid #ccc;
}
.ddsmoothmenu-v ul li {
position: relative;
}
.downarrowclass {
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass {
position: absolute;
top: 10px;
right: 5px;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a {
display: block;
overflow: auto;
/*force hasLayout in IE7 */
height: 32px;
color: white;
text-decoration: none;
padding: 5px 5px 5px 25px;
border-bottom: 0px solid #778;
border-right: 0px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active
{
color: white;
background-image: url(http://3.bp.blogspot.com/-VCtcZunZJ2U/T9W7MM1uIXI/AAAAAAAAB9o/yVJ0Cad3Q0g/s1600/tab_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
margin-bottom: 1px;
background:#2E8B57; /* Cor menu principal*/
}
.ddsmoothmenu-v ul li a.selected {
/*CSS class that's dynamically added to the currently active menu items' LI A element*/
color: white;
background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
background:#2E8B57; /* Altere a cor*/
}
.ddsmoothmenu-v ul li a:hover {
color: white;
background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
background:#6495ED; /* Cor do hover*/
}
/*Largura submenu */
.ddsmoothmenu-v ul li ul {
position: absolute;
width: 170px;
/*Sub Menu Items width */
height: 22px;
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
float: left;
height: 1%;
}
* html .ddsmoothmenu-v ul li a {
height: 1%;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/seututorial/seututorial/smoothmenu.js"></script>
<script type="text/javascript">
})
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu2",
//Menu DIV id
orientation: 'v',
//Horizontal ou vertical menu: "h" ou "v"
classname: 'ddsmoothmenu-v',
//class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li>
<a href="link-marcador">Categoria 0</a>
</li>
<li>
<a href="link-marcador">Categoria 1</a>
<ul>
<li>
<a href="link-marcador">Subcategoria 1.1</a>
</li>
<li>
<a href="link-marcador">Subcategoria 1.2</a>
</li>
</ul>
</li>
<li>
<a href="link-marcador">Categoria 2</a>
<ul>
<li>
<a href="link-marcador">Subcategoria 2.1</a>
</li>
<li>
<a href="link-marcador">Subcategoria 2.2</a>
</li>
</ul>
</li>
<li>
<a href="link-marcador">Categoria 3</a>
</li>
<li>
<a href="link-marcador">Categoria 4</a>
<ul>
<li>
<a href="link-marcador">Subcategoria 4.1</a>
</li>
</ul>
</li>
<li>
</li>
</ul>
<br style="clear: left" />
</div>See the Pen nFmsc by Seu Tutorial (@marcelost) on CodePen
Explicando o código (1ª parte)
Os códigos que foram destacados de cinza das linhas 005, 048, 058, 067 e 072 devem ser alterados com sua preferência. Você deve editar a largura do menu principal (linha 005) e a dos submenus (linha 072).
width: 250px; (largura do menu principal)
width: 170px; (largura do submenu)
Altere também a cor do menu (linhas 048 e 058) e a cor do hover (linha 067), ou seja, quando o mouse for colocado sobre o respectivo item.
background:#2E8B57; (cor do menu principal)
background:#6495ED; (cor do hover)
Confira neste site a tabela com todos os códigos HTML das cores.
width: 250px; (largura do menu principal)
width: 170px; (largura do submenu)
Altere também a cor do menu (linhas 048 e 058) e a cor do hover (linha 067), ou seja, quando o mouse for colocado sobre o respectivo item.
background:#2E8B57; (cor do menu principal)
background:#6495ED; (cor do hover)
Confira neste site a tabela com todos os códigos HTML das cores.
Explicando o código (2ª parte)
Observe que no final do código, eu coloquei a descrição "Link-marcador". No lugar disto você deverá inserir o URL do marcador (categoria) desejada.
Onde está escrito Categoria e Subcategoria coloque o nome de cada marcador.
Explicando o código (3ª parte)
Você pode criar quantas categorias e subcategorias quiser. Mas deverá acrescentar mais linhas no final do código. Por exemplo:
<li><a href="Link-marcador">Categoria</a></li>
Com este código acima, a categoria não terá um submenu.
<li><a href="Link-marcador">Categoria 5</a>
<ul>
<li><a href="Link-marcador">Subcategoria 5.1</a></li>
<li><a href="Link-marcador">Subcategoria 5.2</a></li>
</ul>
</li>
<ul>
<li><a href="Link-marcador">Subcategoria 5.1</a></li>
<li><a href="Link-marcador">Subcategoria 5.2</a></li>
</ul>
</li>
Com o código acima, você terá submenus para a categoria. Ou seja, ao passar o mouse sobre a Categoria 5, os submenus 5.1 e 5.2 serão abertos ao lado.
Enfim, a tag que possui a função de fazer o submenu ser aberto é a tag <ul>.
Para criar mais subcategorias, basta duplicar, triplicar este código...
Explicando o código (4ª parte)
Se quiser, você pode fazer com que os submenus abram horizontalmente, isto é, para baixo.
Para isso, observe que na linha 100 do código há o trecho "orientation: 'v'". O "v' quer dizer vertical, então o submenu abrirá lateralmente.
Coloque h no lugar do v para que o submenu abra na horizontal.
Explicando o código (5ª parte)
Se você já possui a biblioteca jQuery em seu template, remova a linha 090 do código pois poderá gerar incompatibilidade.
Dúvidas ou problemas?
É só comentar!
quarta-feira, 2 de fevereiro de 2011
Como colocar áudio MP3 nos posts do Blogger
Se você deseja publicar em seu blog alguma música que curta bastante ou qualquer outro áudio que queira compartilhar com seus leitores, aqui vão duas formas práticas de como fazer isso.
― O primeiro método mostra como criar um player próprio e bem básico
― O segundo apresenta a utilização de um serviço chamado SoundCloud
Escolha o que mais lhe agrada.
OBS: O tutorial atualmente vale para todos os formatos de áudio
Postando MP3 no Blogger (Blogspot)
1º Método (player básico)
Para usufruir deste método, o qual utiliza um embed do Google para criar um player extremamente humilde, você precisará hospedar o áudio em algum serviço que forneça um link direto para o mesmo - sem redirecionar. Particularmente recomendo serviços como Google Sites (oferece link direto automaticamente), Dropbox ou outro de sua preferência.
1 - Faça login em sua conta do Blogger e inicie sua postagem.
2 - Clique no botão HTML para mudar para o padrão de texto puro. Vide imagem abaixo.
3 - Agora copie e cole este código HTML a seguir no local onde o áudio deverá aparecer.
<center><embed type="application/x-shockwave-flash" flashvars="audioUrl=LINK_DO_SEU_AUDIO_AQUI.MP3" src="https://sites.google.com/site/codeplanscripts/script/audio-player.swf" width="540" height="27" quality="best"></embed></center>
See the Pen %= penName %> by matttttttttt (@marcelost) on CodePen
4 - Substitua a frase "LINK_DO_SEU_AUDIO_AQUI.MP3" do código acima pelo link fornecido pelo serviço onde realizou a hospedagem do áudio.
RESULTADO (imagem de demonstração)
Como dito anteriormente, o player é extremamente básico. Porém, você pode customizar parcialmente, alterando a altura (height), largura (width) e a qualidade (quality - aconselho manter a padrão "best"). Sobretudo, caso tenha conhecimento em CSS, é possível adicionar uma "div style" no código para personalizar a área fora do player. A aparência dele em si não há como alterar!
2º Método (SoundCloud)
1. Primeiramente, crie uma conta gratuita no site SoundCloud. Registre-se através deste link ou clicando em Sign Up, digite seu e-mail e crie uma senha. Depois disso vá até o seu e-mail e confirme a inscrição no site. É bem rápido o cadastro!
Após clicar no link de confirmação do e-mail, uma página similar a esta abaixo será aberta.
2. Clique em Upload e na próxima página clique em Choose files. Então selecione o áudio que deseja inserir no blog.
3. Automaticamente o áudio será upado para o site. Apenas aguarde.
4. Depois que o upload for finalizado, desça um pouco a página e verifique se a opção Public está selecionada. Também veja se o item "Widget enabled" está com um visto verde.
5. Estando tudo ok, desça até o final do página e clique em Save.
6. Você será levado ao player que rodará o seu áudio. Logo na parte superior esquerda do player, clique no botãozinho Share.
7. Na singela pop-up que será exibida, desmarque a opção "Use the HTML5 widget", depois selecione e copie todo o código que está dentro do "Embed Code" acima.
Lembrando que este é o código do player que aparecerá com a sua música no post do Blogger. Portanto, você pode alterar a altura (height) e largura (width) do código. Você também pode modificá-lo clicando no botão Edit your widget, ao lado do Embed Code.
8. Volte ao Blogger e comece uma nova postagem. Clique na opção HTML (canto superior à esquerda do painel) e cole o código embutido que você copiou no SoundCloud.
Está feito!
Agora pré-visualize o post e veja o resultado.
