Dicas, truques, tutoriais, reviews, promoções e informação

Mostrando postagens com marcador Pedidos de Tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador Pedidos de Tutoriais. Mostrar todas as postagens

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.

box facebook twitter googleplus youtube blogger

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>

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

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.

sexy-bookmark-blogger-2012

barra-compartilhamento-animada-blogger

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.

shareaholic-gadget-blogger

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).

barra-botoes-de-redes-sociais-blogger

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).

como-colocar-sexy-botões-blogger

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).

botões-sexy-redes-sociais-blogger

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"

colocar-shareaholic-blogger-2012

sexy-bookmark-blogspot

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.

sexta-feira, 20 de julho de 2012

Como apagar todas as mensagens do Facebook de uma vez

Existe um método muito prático e efetivo para limpar a área de mensagens do Facebook com um simples clique. Quando temos muitas mensagens armazenadas, torna-se inviável apagar uma por uma. Mas com a extensão chamada Facebook Delete All Messages esse trabalho fica muito mais fácil.

A extensão está disponível para os navegadores Google Chrome e Firefox.

Leia também:
Como remover a Linha do Tempo
Baixe todos os álbuns do Face de uma vez

Apagando todas as mensagens do Facebook de uma vez


CHROME


1. Instale a extensão Facebook Delete All Messages em seu Chrome. Um ícone será exibido na parte superior direita. Este ícone ficará visível somente quando acessar o Facebook.

apagar todas mensagens facebook de uma vez novo

excluir todas extensões do facebook de uma vez

2. Agora faça login em sua conta do Facebook ou caso já esteja logado(a), recarregue a página.

3. Acesse o painel de mensagens do seu perfil clicando no link a seguir http://www.facebook.com/messages ou seguindo os passos da imagem abaixo.

apagar todas mensagens facebook

4. Agora dê um clique no ícone da extensão (ao lado da estrelinha dos favoritos) e clique em OK na pop-up para confirmar a exclusão.

como limpar caixa de entrada facebook de uma vez

Pronto! Sua caixa de entrada do Face estará limpa em menos de 2 segundos. Após a limpeza, uma mensagem de report aparecerá. Você pode bloqueá-la para que não apareça mais após o processo. Depois clique em OK.

FIREFOX


1. Instale extensão em seu Firefox clicando em 'Continue to Download' e depois em 'Add to Firefox'. Não precisa reiniciar após a instalação.

extensão apagar todas mensagens facebook

limpar todas mensagens facebook de uma vez chrome

2. Agora faça login em sua conta do Facebook ou caso já esteja logado(a), recarregue a página.

3. Acesse o painel de mensagens do seu perfil clicando no link a seguir http://www.facebook.com/messages.

4. Clique no menu Ferramentas e selecione a opção "Facebook - Delete All Messages".

new facebook delete all messages

5. Aparecerá uma mensagem perguntando se deseja mesmo fazer isso. Clique em OK e as mensagens serão apagadas.

deletar todas mensagens facebook um clique

Depois que o processo for concluído, uma janela final de report será aberta. Você pode bloquear esta janela para que ela não apareça mais após a limpeza.

Conclusão


É bom ter certeza sempre antes de efetuar a limpeza pois o processo é irreversível.

Se mais tarde quiser deletar a extensão do navegador, acesse o painel de extensões (complementos) do respectivo browser e delete-a.

Veja as figuras abaixo.

excluir varias mensagens de uma vez facebook

Apague de uma vez todas mensagens do Facebook 2013 2014

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.

colocar senha postagens blogspot blogger

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.

coloque a senha para ler blogger

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.

proteger post com senha blogger

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).

senha nos posts blogger

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.

password post blogger

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.

colocar senha artigos blogger blogspot

Quando alguém clicar no título do texto protegido, receberá uma pop-up como esta abaixo, onde ela deverá inserir a senha.

encriptar posts blog

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 redes sociais blogspot blogger

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.

barra flutuante redes sociais 2012

barra de compartilhamento que move blogger


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"

barra redes sociais que se move blogspot 2012

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]

colocar gadget redes sociais blogger

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!

quarta-feira, 14 de março de 2012

Como gravar o áudio de qualquer site e do computador

Mais uma vez atentendo a pedidos, hoje ensinarei a como gravar o som reproduzido em qualquer site da Internet ou pelo próprio computador. A dica vale para rádios online, sites de streaming (4shared, Grooveshark, Youtube, SoundCloud, blogs e etc), jogos de PC, players ou qualquer outra fonte que disponha de áudio.

Usaremos um programa chamado Total Recorder Professional. Na minha opinião, é o melhor da categoria. Você pode salvar a música em formato MP3 (ou outro se preferir), o áudio fica com qualidade excepcional (igual ou melhor que o som reproduzido), trabalha com todos os navegadores, não há necessidade de instalar extensões nos browsers, de fácil utilização e levíssimo.

RELACIONADO:
Como gravar o som do PC sem instalar nada

como-gravar-som-do-lastfm-e-qualquer-site-streaming
Escolha um servidor para baixar.

Link 1
Link 2

Compatibilidade

Windows 2000, XP, Vista, 7 e 8 - x86 e x64


1º Passo — Instalando

Extraia os arquivos da pasta rar e abra o arquivo LEIA-ME.txt. Nele consta todo o processo de instalação.


2º Passo — Configurando

1. Abra o programa e vamos efetuar algumas configurações.
2. Clique em Parameters...

baixar-audio-de-qualquer-site-chrome

3. Veja se em "Audio recording source" a opção Software está selecionada. Depois clique no botão Change.

tutorial-gravar-audio-de-qualquer-site

4. Em "File type" escolha o formato que o programa salvará os áudios. Recomendo MP3.

Nota: Em alguns sites, o formato padrão (WMA) terá melhor qualidade, portanto, caso o áudio do MP3 fique muito ruim, altere para o WMA (Windows Media).

pegar-o-audio-de-qualquer-site

5. Em "Attributes" defina a qualidade do arquivo. Ou se preferir, deixa na qualidade padrão -- 192 Kbit/s. Clique em OK para finalizar.

programa-para-gravar-o-som-de-qualquer-site


3º Passo — Gravando o áudio

1. Voltando à interface principal, o programa já estará apto a capturar qualquer som emitido no PC.
2. Vá até o site que você deseja pegar o áudio e deixe a música no ponto.
3. No Total Recorder, clique no botão vermelho Record (na parte inferior direita, como na imagem) e posteriormaente reproduza o som a ser gravado.

capturar-o-som-de-todos-os-sites-streaming

4. O programa iniciará imediatamente a gravação. Para saber se realmente está gravando, observe se os palitinhos do gráfico estão mexendo.

gravar-músicas-de-radios-online-e-de-qualquer-streaming

5. Para parar a gravação é só clicar no botão Stop, ao lado esquerdo do botão Record.

como-gravar-som-do-pc-jogos-programas


4º Passo — Salvando

Chegou a hora de salvar toda gravação...

Clique no menu File e depois em Save As.

como-capturar-som-da-internet-tutorial

Dê um nome para o arquivo e salve no local de sua preferência.


ENJOY!

quinta-feira, 8 de março de 2012

Como colocar capítulos em qualquer vídeo

Formatos de vídeo AVI, RMVB, WMV e MP4, que são mais comuns hoje em dia, não suportam a inserção de capítulos. Os únicos formatos de vídeo que suportam este tipo de recurso são MKV e VOB (DVD).

Mas o que são capítulos? Para quem não sabe o que um capítulo faz num vídeo, imagine da seguinte forma: você baixou um vídeo do show de sua banda favorita em AVI, por exemplo. Ao abrir o arquivo no player, você quer pular para a quarta faixa (música) do show, mas, o botão de avançar o vídeo não está disponível ou não funciona. É nesta hora que entram os capítulos. Adicionando capítulos ao vídeo, você poderá separar faixa por faixa do show sem prejudicar a qualidade, como funciona num DVD mesmo, e assim avançar sempre para a música desejada sem ter que ficar passando o tempo manualmente.

Neste tutorial iremos ensinar dois métodos diferentes:

— O primeiro método é destinado àqueles que pretendem deixar o vídeo salvo no computador e assistir através do player instalado no sistema mesmo.
— O segundo serve para quem deseja gravar o vídeo em um DVD e assistir no aparelho de TV.

Escolha o método de sua preferência.

passar faixa por faixa video avi
usar botão avançar videos show baixados


Método 1

Programas necessários


1º Passo - FormatFactory

1. Após baixar e instalar o FF, abra o programa e clique em Vídeo > Todos para MKV.

colocar-capitulos-em-avi

2. Na janela que se abre clique em Adicionar Arquivo e selecione o vídeo cujo criará os capítulos. Em Pasta Destino escolha o local onde o vídeo será salvo. Depois clique em OK para finalizar.

colocar-capitulos-em-video

3. Voltando à janela principal do FF, clique no botão Iniciar para que a conversão comece. Aguarde até que a conversão alcance os 100% e seja finalizada.

separar-video-faixa-por-faixa

4. Seu vídeo estará no formato MKV agora. Porém, não se preocupe, a qualidade permanecerá pois MKV é um dos melhores formatos de vídeo existentes.

2º Passo - Anotando o Tempo

Esta é a parte mais chata do tutorial. Você deverá abrir o vídeo em qualquer player e anotar os minutos, segundos e/ou horas que deseja que os capítulos apareçam. Isto é, supondo que seja um vídeo musical, anote o tempo de uma música para outra.

Exemplo:

A primeira música começa em 00:00:00
A segunda música começa em 00:03:27
A terceira música começa aos 00:07:53

Neste exemplo temos dois capítulos. Por quê? Porque o tempo zerado (00:00:00) não conta como capítulo. Então, o capítulo 1 do vídeo será aos 00:03:27 (final da primeira faixa e começo da segunda). O capítulo 2 será aos 00:07:53 (final da segunda faixa e começo da terceira).

Se o vídeo não for musical, apenas veja em quais partes do mesmo os capítulos serão divididos.

criar-capitulos-para-avi

3º Passo - Criando o arquivo dos capítulos

Abra o Bloco de Notas do computador e cole o texto abaixo dentro. Salve o arquivo na mesma pasta onde o vídeo convertido está.

CHAPTER01=00:00:00.000
CHAPTER01NAME=Nome 1
CHAPTER02=00:01:47.000
CHAPTER02NAME=Nome 2
CHAPTER03=00:05:00.000
CHAPTER03NAME=Nome 3
CHAPTER04=00:10:00.000
CHAPTER04NAME=Nome 4
CHAPTER05=00:15:00.000
CHAPTER05NAME=Nome 5
CHAPTER06=00:20:00.000
CHAPTER06NAME=Nome 6
CHAPTER07=00:25:00.000
CHAPTER07NAME=Nome 7
CHAPTER08=00:30:00.000
CHAPTER08NAME=Nome 8

See the Pen nvfIG by Seu Tutorial (@marcelost) on CodePen


Interpretando o texto acima

Acredito que seja auto-explicativo, mas mesmo assim explicarei.

— O tempo é dividido entre hora//minuto//segundo//fração (ex: 00:05:00.000). Deixe a fração sempre como "000". Os demais você deve alterar pelo tempo de cada capítulo, o qual você anotou no Passo 2.

— Os "Nomes" (ex: Nome 4, Nome 5, etc) é o nome de cada capítulo, caso queira nomeá-los. Se não quiser, basta deixar como está.

Pode adicionar mais CHAPTER no código acima, de acordo com a quantidade de capítulos que você vai criar no vídeo.

4º Passo - MKVToolNix

1. Abra o MKVToolNix GUI e, na aba Input, clique no botão Add e selecione o vídeo MKV convertido.

separar-video-em-capitulos

2. Agora clique na aba Chapter Editor e depois no menu superior Chapter Editor > Load. Carregue o arquivo texto que você salvou com o código dos capítulos no Passo 3.

colocar-capitulos-em-mkv

3. Clique novamente no menu Chapter Editor > Save as e salve o arquivo com a extensão .XML e com o mesmo nome do vídeo, na mesma pasta onde ele está. Exemplo: nome_do_video.xml.

tutorial-mkvtoolnix-format-factory

música-por-música-video-de-show

4. Clique na guia Global, desça até o item "Chapter file" e clique no botão Browse. Selecione o arquivo .XML que você acabou de salvar.

criar-capitulos-em-show-avi

5. E para finalizar clique no botão Start muxing, na parte inferior, para fundir os capítulos com o vídeo.

dividir-video-por-capitulos-avi-rmvb

5º Passo - Conferindo o trabalho

Lembrando que se quiser deletar o arquivo .XML pode, pois os capítulos já foram integrados ao vídeo.

Reproduza o vídeo no player e confira.

O Windows Media Player não fará o reconhecimento dos capítulos. Portanto, utilize um outro player, como Media Player Classic ou qualquer outro que leia MKV e reconheça capítulos.

dividir-video-em-capitulos-formatfactory



Método 2

Itens necessários

  • ConvertXtoDVD (inclui instalador + 1.000 seriais para registrar o programa)
  • DVD-R virgem

1º Passo - Anotando o Tempo

Você deverá abrir o vídeo em qualquer player e anotar os minutos, segundos e/ou horas que deseja que os capítulos apareçam. Isto é, supondo que seja um vídeo musical, anote o tempo de uma música para outra.

Exemplo:

A primeira música começa em 00:00:00
A segunda música começa em 00:03:27
A terceira música começa aos 00:07:53

Neste exemplo temos dois capítulos. Por quê? Porque o tempo zerado (00:00:00) não conta como capítulo. Então, o capítulo 1 do vídeo será aos 00:03:27 (final da primeira faixa e começo da segunda). O capítulo 2 será aos 00:07:53 (final da segunda faixa e começo da terceira).

Se o vídeo não for musical, apenas veja em quais partes do mesmo os capítulos serão divididos.

como-inserir-capitulos-avi-videos

2º Passo - ConvertXToDVD

1. Depois de instalar e registrar o software, execute-o.
2. Clique no menu Configurações e depois em Capítulos.

capitulos-personalizados-convertxtodvd

3. Na janela que será aberta, desmarque as opções "Criar capítulo a cada" e "Para vídeos maiores do que". Então dê um OK para salvar.

convertxtodvd-só-cria-capitulos-5-em-5-minutos

4. Voltando à tela principal do programa, expanda as opções Título e Capítulos. Clique com o direito do mouse sobre o capítulo #01 - 0:00 e selecione Adicionar capítulo.

capitulos-sem-ser-5-minutos-convertxtodvd

5. Agora tudo o que você tem de fazer é ir adicionando os capítulos sucessivamente (conforme mostrado na figura acima), colocando o tempo de cada um -- os quais você anotou no Passo 1. Ou seja, o minuto, segundo e/ou hora que você tem anotado no Bloco de Notas em cada janelinha de capítulos.

OBS: por padrão, o capítulo #01:00 do ConvertX fica em 0:00 mesmo.

botão-avançar-em-video-avi

fazer-capitulos-em-video-de-show

personalizar-capitulos-no-convertxtodvd

colocar-capitulos-em-um-filme-avi-rmvb

6. Depois de adicionar todos os capítulos, clique no botão Converter e aguarde.

capitulos-em-videos-baixados-da-net

7. Quando a conversão terminar, insira o DVD virgem no drive para que a gravação inicie automaticamente.

ENJOY!