Super Gadget de Seguidores do Twitter Com Fotos para Blogger

Tutorial de como colocar o super gadget de seguidores do twitter com fotos no blogger.

Usar em um blog as ferramentas que as redes sociais nos oferecem é a maneira mais inteligente de fazer a divúlgação de um trabalho. Já mosteri aqui como colocar a caixa curtir do facebook no blog e também como adicionar o widget do google+ para quem deseja juntar seus fãs e seguidores. Para dar sequência agora disponibilizo o código para adicionar o gadget de seguidores do twitter com fotos em seu blog, o gadget mostra as fotos das últimas 10 pessoas que se tornaram seus seguidores e é uma ótima opção para deixar sua barra lateral mais chamativa.

O gadget é parecido com a Lke Box do facebook e sem dúvida é muito interessante de se ter em um blog. Veja a abaixo uma imagem do gadget.

INSTALAR GADGET DO TWITTER NO BLOGGER

Vamos agora ao código do gadget e ver coloca-lo em seu blog. Para adicionar esse gadget em seu blog você deve ir até o Painel do Blogger e clicar em Layout >> Depois clicar em Adicionar um Gadget >> e escolher um gadget do tipo Html/JavaScript.

Agora copie o código abaixo e cole dentro do gadget Html/Javascript.

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>
<div id="twitterfanbox">
<script type="text/javascript">fanbox_init("SEU NOME DO TWIITER AQUI");</script>
</div>
</div>
<style>
.FB_SERVER_IFRAME {
height: 250px !important;
width: 290px !important;
</style>

Após colar agora é só configurar.

Onde está em azul coloque o seu nome do twitter. Por exemplo no meu caso: alternativablg

Onde está em vermelho você deve definir o tamanho do widget, sendo que o valor height é referente a altura e width a largura.

Feito as configurações é só salvar e ver como ficou.

Podere ver também outros códigos e artigos aqui do Altenativa Blogger.

          . PopUp de Subscrição Rss e Redes Sociais para Blogger
          . Como Colocar Caixa Curtir do Facebook no Blog - Like Box
          . Como Personalizar o Nome [URL] das Páginas de Fãs do Facebook
          . Box Flutuante de Redes Sociais Para Blogger
          . Efeito ShadowBox no Blogger Com Jquery no Template
          . Widget de Top Comentáristas Para Blog

Esse tutorial vai ficando por aqui, deixe seu comentário para dizer o que achou e claro não deixe de curtir nosso blog nas redes sociais.

Até mais!

Caixa de Assinatura Rss via Email Personalizada

Todo blogueiro que almeja alcançar o sucesso e ganhar dinheiro tem que disponibilizar em seu blog formas de subscrição Rss para seus leitores. Quando escrevi o artigo estratégias para aumentar sua lista de assinantes do blog falei de vários fatores importantes para quem deseja conseguir sucesso e ganhar dinheiro com blogs. Fidelizar seus leitores e conseguir suas assinaturas são de grande importância para mante-lo informado sem que ele precise vir até seu blog para ler seus artigos, e ainda serve para futuramente fazer campanhas de Email Marketing que hoje em dia vem sendo uma das formas mais eficiente de ganhar dinheiro na internet.

Vou disponibilizar para você uma caixa de subscrição personalizada para que você coloque em seu blog e comece a juntar seus fieis assinantes. A caixa é como essa que está na imagem abaixo.

Essa caixa é colocada na barra lateral, mas se você quiser colocar em outro local de seu blog não tem problema algum.

Vamos agora ver o código para o funcionamento da caixa de subscrição. O código abaixo você deve colocar dentro de um Widget do tipo Html/JavaScript. O caminho para adicionar o widget é o seguinte: vá até o painel de seu blog e clique em Layout >> depois clique em Adicionar um gadget >> ai escolha o gadget do tipo Html/JavaScript copie o código abaixo cole dentro do gadget.

<div id="assinar-feed-rss" style="background: whiteSmoke url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/alternativa%20extreme%20menu/email-feed-rss-subscrio.png) no-repeat left;width:370px; height: 20px;margin-bottom: 10px;color: #5A5A5A;padding-left: 10px;line-height: 15px;font-size: 14px;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" style="font-size:13px;padding-bottom: 4px;width: 312px;float: right;margin-top: -7px;margin-right: 10px;" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO SEU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input style="display: initial;width: 200px;height: 12px;float: left;margin-right: 8px;border: 1px solid #CCC;font-size: 12px;" placeholder="Digite aqui seu e-mail" id="input-rss" class="input-rss" type="text" name="email"/>
<input type="hidden" value="NOME DO SEU FEED" name="uri"/>
<input type="hidden" name="loc" value="pt_BR"/>
<input id="continuar-lendo" class="mais" style="width: 85px;margin-top: 1px;float: right;font-size: 15px;height: 28px;line-height: 10px;float: left;padding-left: 5px;padding-right: 5px;" type="submit" value=" ASSINAR "/>
</form></div>

Você pode alterar as marcações da seguinte forma: onde está em laranja é a url da imagem do envelope, você pode trocar por outro do seu gosto, o tamanho é 48x48 px, ou se preferir pode removê-la apagando o código em laranja.

A primeira marcação em vermelho é o tamanho total da caixa, ali você pode aumentar ou diminuir conforme sua necessidade. As demais marcações em vermelho se referem ao local onde o leitor vai digitar o email, se for preciso alterar pocure usar sempre os mesmos valores , por exemplo: se for aumentar 20px ficaria assim: 332px e 220px ou se for diminuir 20px ai ficaria assim 292px e 180px.

Onde está marcado em azul você deve colocar o nome do seu feed rss. após terminar as alterações clique em salvar e vamos ao próximo passo.

Agora vamos colocar as regras Css em seu template. Você deve ir em seu painel e clicar em Modelo >> depois Editar Html >> e procurar pelo seguite código  ]]></b:skin> após encontrar a skin cole o código da Css acima dela.

#assinar-feed-rss {background: whiteSmoke;
padding: 12px 0 8px;
border-bottom: 1px solid #CCC;
margin: 0 -11px 0px -11px;
border-top: 1px solid #CCC;
margin-top: 24px;
border: 1px solid #CCC;
}

#continuar-lendo {cursor: pointer;
margin-top: -7px;
height: 31px;
color: white!important;
background: #5F729D url(http://www.blogandocomfacilidade.com/wp-content/themes/v3/images/repeat-botao.jpg) repeat-x;
border: 1px solid #134F5C;
text-decoration: none;
outline: none;
-goog-ms-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 0 .4px #D9D9D9;
-moz-box-shadow: 0 0 .4px #D9D9D9;
box-shadow: 0 1px .3px #D9D9D9;
text-shadow: 0 1px 1px black;
width: 155px;
float: right;
display: block;
text-transform: uppercase;
font-weight: 700;
line-height: 31px;
font-size: 14px;
border-image: initial;
padding: 0 10px;
}

#input-rss {
padding: 8px;
}

Após colar o código agora é só salvar e ver como ficou. O código foi encontrado no blog Blogando com Facilidade e foi postado por Iago Melanias, as alterações que fiz foram minimas então todos os créditos vão para o Iago.

Não vai se esquecer de colocar o nome do seu Feed Rss no primeiro código para que funcione corretamente. Pondere também ler alguns de nossos artigos para melhorar sua experiência e interação conosco.

          . PopUp de Subscrição e Redes Sociais Para Blogger
          . Estratégias Para Aumentar Sua Lista de Assinantes do Blog
          . Como Ter um Bom Blog e Ser um Grande Blogueiro
          . Leitores ou Buscadores? Para Quem devemos Escrever em Nosso Blog
          . Movimento Blogs Unidos - Participe Dessa Corrente
          . Adicionar Subscrição de Feed Rss no Blog

Gostou? Então deixe seu comentário e aproveite para assinar nosso blog e receber nossas atualizações.

Até mais!

Widget de Postagens Populares no Blog

Para dar a opção dos conteúdos mais acessados do Blog para seus leitores, usamos o gadget de  Postagens Populares asisim você pode mostrar ao seus leitores as postagens que mais fazem sucesso em seu Blog, então vamos aprender como colocar e usar esse ótimo Gadget.

 Primeiro entre na parte de Design do seu Blog.

Agora em elementos de página adicione um novo gadget.

Agora escolha o gadget Postagens Populares.

Aqui é onde vamos configurar o gadget. Obs:

Você pode escolher um titúlo conforme seu gosto, ou pode deixar o original mesmo, em mais visualizadas escolha qual época quer que os leitores vejam, em Tudo eles irão visualizar as postagens mais vistas desde o início do seu trabalho, em últimos 30 dias as postagens mais vistas dentro de um mês e em útima semana as postagens mais vistas dentro de uma semana, escolha o número de postagens que deseja mostrar.

Snippt é uma pequena descrição da postagem, ao deixar essa opção marcada seu gadget será visto dessa forma.

Se quiser deixar desmarcada aparecerá somente o Titúlo e a miniatura da imagem dessa forma.

Se desejar você também pode deixar desmarcadas as 2 opções assim só será mostrado o Titúlo da postagem. Feito as configurações é só clicar em salvar e escolher o melhor local da sua Barra lateral para seu gadget.

Alterando Código Para Excluir Gadget - Gadget sem Opção Excluir

Quando baixamos templates na internet é normal que seu criadores configurem alguns Gadgets para não serem excluidos. Mas com isso usúario mais novos se deparam com esse problema e não sabem como agir frente a essa dificuldade e acaba procurando por outro template, por não gostar daquele gadget ou por que aquele gadget está atrapahando o que ele realmente quer fazer, por esses e outros motivos vou mostrar como contornar esse problema e conseguir excluir esses gadgets sem ter que trocar de template.

Primeiro veja a imagem do problema que estou citando aqui.

Essa é a imagem do gadget quando clicamos para editá-lo, veja onde está a seta que ele não tem a opção Excluir.

Veja que o titúlo do meu gadget nesse caso é Content 468x60 Ads, o que vamos fazer para encontrar o gadget no código.

Primeiro marque o titúlo do gadget que deseja excluir, e então vá até o painel do seu blog e clique em  Modelo >> depois em Editar Html >> e marque a opção >> Expandir modelos de widgets.

Agora de um CTRL+F em seu teclado e procure da seguinte maneira.

Title='Content 468x60 Ads

Onde esta marcado em vermelho você deve colocar o titúlo do gadget que você deseja encontrar.

Você ira encontrar um código parecido com esse, mas o que importa é a linha onde está o titúlo do seu gadget.

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML8' locked='false' title='' type='HTML'/>

<b:widget id='Label1' locked='false' title='Nuvem de Tags' type='Label'/>

<b:widget id='HTML1' locked='false' title='Facebook' type='HTML'/>

<b:widget id='HTML90' locked='true' title='Header 468x60 Ads' type='HTML'/>

<b:widget id='HTML98' locked='true' title='Featured Content Glider' type='HTML'/>

<b:widget id='HTML99' locked='true' title='Content 468x60 Ads' type='HTML'/>

<b:widget id='Label4' locked='false' title='Marcadores' type='Label'/>

<b:widget id='HTML96' locked='true' title='125x125 Ads' type='HTML'/>

<b:widget id='HTML97' locked='true' title='Publicidade' type='HTML'/>

<b:widget id='LinkList3' locked='true' title='Second Navigation Menu' type='LinkList'/>

Veja que marquei a linha do titúlo do meu gadget e uma palavra em azul, essa palavra em azul é que nos enteressa. Veja que esta escrito ( true ) essa palavra que é resposavél por não mostrar a opção excluir dentro do gadget como vimos na imagem acima. Para que apareça de novo a opção para excluir o gadget você deve trocar ( true ) por ( false ), ai seu código ficará dessa maneira.

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML8' locked='false' title='' type='HTML'/>

<b:widget id='Label1' locked='false' title='Nuvem de Tags' type='Label'/>

<b:widget id='HTML1' locked='false' title='Facebook' type='HTML'/>

<b:widget id='HTML90' locked='true' title='Header 468x60 Ads' type='HTML'/>

<b:widget id='HTML98' locked='true' title='Featured Content Glider' type='HTML'/>

<b:widget id='HTML99' locked='false' title='Content 468x60 Ads' type='HTML'/>

<b:widget id='Label4' locked='false' title='Marcadores' type='Label'/>

<b:widget id='HTML96' locked='true' title='125x125 Ads' type='HTML'/>

<b:widget id='HTML97' locked='true' title='Publicidade' type='HTML'/>

<b:widget id='LinkList3' locked='true' title='Second Navigation Menu' type='LinkList'/>

Ao trocar a palavra agora salve e veja seu gadget, ele deve ficar dessa maneira após a mudança.

Observe que agora temos a opção excluir, então é só excluir e pronto.

Observe também que tem varia linhas com true, significa que nenhum desses gadgets tem a opção para excluir e para que todos esses gadgets tenham essa opção é só tracar todos esses true por false.

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML8' locked='false' title='' type='HTML'/>

<b:widget id='Label1' locked='false' title='Nuvem de Tags' type='Label'/>

<b:widget id='HTML1' locked='false' title='Facebook' type='HTML'/>

<b:widget id='HTML90' locked='false' title='Header 468x60 Ads' type='HTML'/>

<b:widget id='HTML98' locked='false' title='Featured Content Glider' type='HTML'/>

<b:widget id='HTML99' locked='false' title='Content 468x60 Ads' type='HTML'/>

<b:widget id='Label4' locked='false' title='Marcadores' type='Label'/>

<b:widget id='HTML96' locked='false' title='125x125 Ads' type='HTML'/>

<b:widget id='HTML97' locked='false' title='Publicidade' type='HTML'/>

<b:widget id='LinkList3' locked='false' title='Second Navigation Menu' type='LinkList'/>

 Agora você pode manipular todos seus gadgets da maneira que desejar.

Como Colocar Caixa Curtir do Facebook no Blog - Like Box

 

Tutorial completo sobre como colocar a caixa curtir (like box) do facebook no blog.

Nesse tutaorial vou mostrar como colocar o Gadget Like Box ( caixa curtir do facebook ) no Blog. Para quem não sabe esse gadget serve para juntar seus fãs e ajudar na divulgação do seu Blog nessa rede social que cresceu e muito nos ultimos anos, e pelo que parece ainda vai continuar crescendo. A gora vamos ao passo a passo para adicionar esse ótimo gadget em seu trabalho.

O primeiro passo para ter esse gadget é criar uma página de fãs no facebook se você ainda não tem essa página acesse esse link e veja como criar a sua.

>> Como Criar Página de Fãs no Facebook

Depois de criada sua página de fãs a primeira coisa a fazer é copiar o url da sua página.

Após copiar todo esse endereço clique em Adicionar caixa curtir.

Agora troque o url (http://www.facebook.com/platform) pelo url que você copiou da sua página. Ao chegar nessa página a opção Show stream estará marcada, para que sua caixa fique como a da imagem é só desmarcar essa opção.

Feito clique em Get Code e escolha a opção IFRAME para obter o código. Agora copie todo esse código e vá ao painel do seu Blog.

Agora no páinel do blogger clique em Layout.

Já na próxima janela clique em adicionar um gadget e escolha um do tipo Html/Javascript.

Aberto um novo gadget html/javascript cole o código copiado no passo acima dentro dele e escolha um título para seu gadget.

Os valores marcados acima são width para ajustar a largura e height para ajustar a altura do gadget. Para ver como ficou o meu acesse o link abaixo.

>> Caixa curtir Loucos por Windows

É isso, é só salvar e começar a juntar seus fãs. Lembrando que é sempre bom estar atualizando sua página juntamente com seu blog. 

Box Flutuante de Redes Sociais Para Blogger

Todos sabemos da importância de fazer uma boa divúlgação do nosso blog para que tenhamos algum retorno, por isso vou mostrar aqui como colocar um Box Flutuante de redes sociais no seu blog para que seus leitores compartilhem com os amigos os conteúdos que eles gostarem. Para colocar esse Box em seu Blog é simples.

As redes sociais que estão presente no Box são:

Facebook.
Twetter.
Google +1.

Para começar entre no painel do seu Blog e clique em Modelo. Sempre bom lembrar que antes de começar a editar o html do seu template você deve salvar uma cópia do seu Modelo.

>> Salvar uma cópia do template do Blog

Após isso clique em Editar html e marque a opção Expandir modelos de widgets.
Feito esses passos procure agora pela tag </head> Use as teclas de atalho CTRL+F do seu teclado para procurar.

Importante: Agoara é hora de colocar o script Jquery, se você ja usa esse script não precisa colocá-lo novamente mesmo que a versão seja diferente.

Para que funcione corretamente o Box Flutuante vamos hospedar o script dentro do template, para hospedar o script dentro do template proimeiro cole o sguinte codigo logo acima da tag </head>.

<script type='text/javascript'>
  //<![CDATA[

Código do Script Aqui

 //]]>
</script>

Agora você trocar o código marcado em vermelho pelo script. Clique aqui para pegar o script.

Depois de copiado e colado o script agora você deve colocar o seguinte código também logo acima da tag <head>. 

<script type='text/javascript'>
$(function() {
var offset = $(&quot;#aw-box&quot;).offset();
var topPadding = 60;
$(window).scroll(function() {
if ($(window).scrollTop() &gt; offset.top) {
$(&quot;#aw-box&quot;).stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$(&quot;#aw-box&quot;).stop().animate({
marginTop: 0
});
};
});
});
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;pt-BR&#39;}
</script>
<style type='text/css'>
#floating-aw {width:60px;}
#aw-box {border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:100px; float:left; margin:0 0 0 -90px; text-align:center;}
#aw-box div {margin:0 0 5px;}
</style>

Agora no próximo passo procure pela tag </body> e logo acima dela cole o seguinte código.

<script src='http://connect.facebook.net/pt_BR/all.js#appId=102576646508501&amp;xfbml=1' type='text/javascript'/>

Feito os passos acima agora procure por esse trecho: <div class='post-footer-line post-footer-line-3'> e logo abaixo dessa linha cole esse código.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='floating-aw'>
<div id='aw-box'>
<div><a class='twitter-share-button' data-count='vertical' data-related='Alternativa WebMasters:Aprende como criar um Blog - Blogger [ Alternativa WebMasters ]' data-via='wesley_extreme' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div>
<div><g:plusone size='tall'/></div>
<div><div id='fb-root'/><fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div>
</div>
</div>
</b:if>

A marcação em vermelha se refare ao usúario do twitter então é só trocar pele seu nome de usúario.

Feito tudo está pronto é só slavar e ver como ficou, lembrado que se você quiser da uma personalizada no seu Box Flutante é só trocar as marcações abaixo.

<style type='text/css'>
#floating-aw {width:60px;}
#aw-box {border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:100px; float:left; margin:0 0 0 -90px; text-align:center;}
#aw-box div {margin:0 0 5px;}
</style>

Conheça algumas cores na Tabela de cores Html

Amarelo: Aqui se refere a cor das bordas do Box.

Verde: Aqui é a cor de fundo do Box.

Azul: Aqui é a distancia que ele fica da parte superior do post, quanto maior for esse número mais longe ficará do topo.

Vermelho: Aqui é a distancia entre o Box e o corpo das postagens quanto menor o número negativo mais perto das postagens ele vai ficar.

Agora é só usar a criatividade ou se preferir pode deixar original mesmo.

Gadget Tradutor Para seu Blog

Nós Blogueiros não devemos limitar nosso trabalho apenas para leitores brasileiros, levar o que escrevemos para leitores de outros países também é muito gratificante, Por isso ter um Gadget Tradutor em um Blog é cada vez mais fundamental para levar nosso conteúdo aos quatro cantos do mundo, sem contar que recebendo visitas não só de brasileiros mas também de estrageiros podemos melhorar nossas estatísticas e rendimento.

Agora vou mostrar como ter esse gadget em seu blog e abrir as portas e janelas do seu trabalho para compartilhar com o mundo.

Para começar vá até o painel do Blog e clique em Design, na próxima tela clique em Adicionar um Gadget e escolha um gadget do tipo Html/JavaScript.

 

Dentro desse gadget você deve escolher o Titúlo e colocar o seguinte código.

<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<p align='center'>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim_2XKeTFFmeVebgnvKzZ1j7fGdPimUIzAXQe7cV9SJG6h61KbLrwSv4VBKdMp9rveoK7BAnPjrU55zHxAmjt0ynu1T89UiWhg37-rw_GNXnxCoHCdw4We0PXAHtNgvKCx43xxwpZrYEA/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:10px" width="30"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2G8Z9Fs_FRzHLhFOfTPndhJUKzpmdcMs7V4_UmFGoDcEs-RnZxQNmYVPNGTTNetQGu4tWYBB1CYh7fCZ4oXH9KGMw-nryrufKIDvjW5E7HTiXDv556Hy6MC3HeLGqNOuu62GO2gm587Q/s200/France.png" style="cursor: pointer;margin-right:10px" width="30"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXVDEq_fpdq_D656ZshKyZHjjUcWn8JeHPk-Dbttsepw4sDa0T3LBcJNYmc-fqTYqu81pRzg9cM62ttE20ZWkVXo0k6A1qqdr7cURh9_zSpuQ41-vFEUpiaY_XQDpCbcGCiu6rQRV2qqI/s200/Germany.png" style="cursor: pointer;margin-right:10px" width="30"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5y5pAFJhYP1YMun_q0ZGO0-R6CowMvvIyOppOwlIayxR3T5EFbHdEzwqAw16qiaFREFUJ2KtCg3MB1f5rVGkCQJFklDelcrnHiMG2X2a7CBh8D24NfuciyZA_XJPqKyzTl7u5OhOgRaY/s200/Spain.png" style="cursor: pointer;margin-right:10px" width="30"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgT7jXZnRJZB9b_eJjKjE5eCYI0Rby1Z6Qgjn6xNE102AK0H4CKsPNv5GzTw1lkmhdDUc4HINJiVv6-kpJ_Ja9kB8YDOWFBYw36tLYNydblcnonOgfYbPpNfqIKjx7kzTKr5ep3pLhPN4/s200/Italy.png" style="cursor: pointer;margin-right:10px" width="30"/></a><br/>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAJnfeiDNQEdES1jrjXLg78nlWfwKx_qq4ZPrTa9M_QI5rX6Bmv_LSG5hd-lGHwp3bOl8pJjsoRifEP7lDQFSf_7DZJgjzUB13EPK4hG921Rbk_9L1u9l88wGVWPBLDD19j8m04AMsD3I/s200/Netherlands.png" style="cursor: pointer;margin-right:10px" width="30"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6NTCDfSmGbShb_pwR1huZy0_ip3ZHZg5aIDKxgXcj7TGqxGBfbtd1-DdwG6xnUeC8dXAgm4VwuyL2SaTgMpYivA5l7ub9WANyGFYvdVJCfK_cvtIhiXJYSqx7aSUpqgWURhpxEQd_jl0/s200/Russian+Federation.png" style="cursor: pointer;margin-right:10px" width="30"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXey9E7hhR5KJMHFRgOX5icYxWPaXv20b1v-C5AU6QV-7HoFaxZMBy14wWneYhypLOeilREEjpMoqxRNywO_w_TU7YvFOq-cO-WzPX37IolrGTgsHGcx8AGEaYoQdCCneA1j0mAJ8PAjc/s200/Brazil.png" style="cursor: pointer;margin-right:10px" width="30"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-wEntPDv3I-b5e9KcHlojU5xoZvEbWjaCJrxX9EQCGlhQ5ohennPQ-M0124Mo9V1vrKv_z4ToAyGeSC1NTQvBw3fMBq8G6GHHMuXi4iJL1JGo3wCmkyKV4yAWUmQV_0LL8ZIiSaRkbI/s200/Japan.png" style="cursor: pointer;margin-right:10px" width="30"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4_kn_T42SsEUsVkB51LpEWxQdwaXkyDEV2vQMK_FQ71CCRDqm-v5CYfwgtS86JomYcjaRGeQHrH7pT4X_06d0E5giXo2Ucey8QfM0xBdJztgPnzRDplb1NaGJmJ4qAgo-0AzIv1CTn4/s200/South+Korea.png" style="cursor: pointer;margin-right:10px" width="30"/></a>
</p>
</div>
<div 0px 0pxâ?? style="â??font-size:10px;margin:8px;" 3px></div>

Depois de colar clique em Salvar, escolha o melhor local para o gadget e pronto.

Ao alcançar uma certa experiência com o Blog você verá como é significativa as visitas vinda de fora do Brasil.

Gadget de Termos de Uso no Blog

Todos os Blogueiros e administradores de sites sabem da importancia de ter uma página de Política de Privacidade " Termos de Uso " mais aqui vou mostrar uma maneira diferente para mostrar os Termos de Uso em seu Blog. O modo que vou mostrar será usando um Gadget com  opções para aceitar ou não os Termos.
 

Aqui trago o código para adicionar esse gadget em seu Blog.

Primeiro no painel do seu Blog Clique em Design, depois clique em Adicionar um Gadget, então escolha o gadget do tipo Html/JavaScript e dentro dele cole o seguinte código.

<center><textarea rows="05" cols="52" style="font-family: Tahoma,Verdana,Arial; color: rgb(0, 0, 0); font-size: 12px; border: 1px solid rgb(204, 204, 204); background-color: rgb(255, 255, 255);" name="S5">O uso do Blog NOME DO SEU BLOG está sujeito aos termos e condições descritos abaixo. Qualquer uso deste website constitui consentimento do usuário em aceitar os seguintes termos e condições.

  * Todos os links que direcionam para outros sites são de pura responsabilidade de seus administradores, não hospedamos nenhum arquivo para download os links que direcionam para downloads se encontram na própria internet.


  * Todos arquivos aqui postados são de minha criação e a cópia ou distribuição do mesmo sem meu conhecimento será considerado plágio previsto na Lei Nº9610


  * Qualquer arquivo protegido por algum tipo de lei deve permanecer, no máximo, 24 horas em seu computador.


  * Eles podem ser baixados apenas para teste, devendo o usuário apagá-lo ou compra-lo após 24 horas.


  * A aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuários.


  * Os donos, webmasters e qualquer outra pessoa que tenha relacionamento com a produção do site não tem responsabilidade alguma sobre os arquivos que o usuário venha a baixar e para que irá utiliza-los.


  *Os usuários que utilizam o site, tem total conhecimento e aceitam os termos referidos acima.

Por: alternativawebmasters

</textarea>

<img title="Eu Aceito os Termos" src="http://i237.photobucket.com/albums/ff204/centralexpert/widget/termosimaceito.png" alt="Eu Aceito os Termos" height="16" width="120" />
<a target="" rel="nofollow" href="http://google.com.br/">
<img title="Eu não aceito os Termos" src="http://i237.photobucket.com/albums/ff204/centralexpert/widget/termonaoaceito.png" alt="Eu não aceito os Termos" height="16" width="120" /></a></center>

Na marcação em Vermelho é o tanto de linhas que deseja que apareça na barra de rolagem, e em Verde é a largura do gadget. Na marcação Azul é onde fica o texto do seus Temos de Uso.

Agora é só salvar e ver como ficou.

Ao clicar em não aceito o usúario é redirecionado imediatamente a página inicial do Google.

Colocar Caixa de Pesquisa no Blog

Todos sabemos como é bom pesquisar pelo que procuramos em nossos sites preferidos, por isso nós administradores de sites e blogs não podemos deixar de usar esse tipo de serviço em nossos trabalho. Com esse gadget podemos levar uma melhor navegação para o leitor, facilitando a eles encontrar seus assuntos preferidos com mais facilidade.
 

Agora vou mostrar como é fácil adicionar essa Caixa de Pesquisa em seu Blog.

Para começar você deve ir até o painel do seu Blog, já no painel do seu Blog clique em Design, após clicar em design agora clique em Adicionar um Gadget, na janela que aparecer escolha o gadget Caixa de Pesquisa.

Na próxima etapa vecê deve configurar o Gadget. Escolha um titúlo a seu gosto, e escolha as opções de pesquisa.

Após configurar é só salvar e testar.

Ocultar Gadgets do Blog

Muitos se não todos os blogueiros escondem algum elemento de página (Gadget) em seu Blog, sejam eles html/javascript, páginas, marcadores entre outros, o código que usaremos aqui é muito simples, estarei mostrando também como encontrar o elemento que você deseja ocultar. Agora vamos ver como fazer para esconder qualquer gadget.
 

Para encontrar o elemento que deseja ocultar entre em Design, Editar Html e marque a opção Expandir Modelos de Widgets. Agora de um ( ctrl+f ) no seu teclado e procure por.

]]></b:skin>

E logo acima cole o seguinte código.

#Id do gadget aqui{
display:none;
}

 Salve.
Agora você vai procurar por. Onde está marcado você deve trocar pelo titúlo do gadget que deseja ocultar.

title='Titulo do Gadget Aqui'

Veja que o elemento que procurei se refere ao Gadget de membros, mas o que queremos é o id do Gadget que esta no começo da linha.

Agora você deve copiar somente o id do elemento.

Copiado o id do elemento volte a.

]]></b:skin>

 e cole o id no luga do código marcado

#Id do gadget aqui{
display:none;
}

O codigo ficará assim. Observação: no local marcado vai a sua id.

#HTML6{
display:none;
}

 é só salvar e seu gadget ja ficará ocúlto.

Gadget de Artigos Relacionados no Blogger

Bem como diz o nome, Artigos Relecionados é um Gadget que oferece ao leitor os artigos com a mesma marcação assim oferecendo mais conteúdo que o leitor também possa gostar, essa é uma estratégia também para manter o usúario em seu Blog e molhorar suas estatísticas, Aqui disponibilizo o código e ensino o passo a passo para adicionar esse ótimo Gadget em seu Blog.

O Gadget de Artigos Relacionados funciona em todos os Templates, veja uma imagem do Gadget.

1. Vá ao painel do Blogger e abra o menu Design, Editar Html e marque a opção Expandir modelos de widgets. Antes de qualquer modificação faça download de uma cópia do seu template

2. De um CTRL+F no seu teclado e procure pela tag </head> e, acima dela, insira o código abaixo.

<!--Artigos Relacionados Estilo e Script Inicio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--Artigos Relacionados Estilo e Script Final-->

A marcação em Azul é a cor do Titúlo do Gadget Você pode escolher a cor que conbina mais com seu Blog. Conheça e escolha a sua cor preferida na minha Tabela de cores Html.

3. Agora procure por esta linha.

<div class='post-footer-line post-footer-line-1'>

ou, se não conseguir encontrar o código anterior, então procure por:

<p class='post-footer-line post-footer-line-1'>

4. E acima  de uma dessas linhas que você encontrar, cole o código a seguir, modificando apenas o que for indicado.

    <!--Codigo Artigos Relacionados Inicio-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle="Artigos Relacionados";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!--Codigo Artigos Relacionados Final-->

Marcado em vermelho está o número "5" que é a quantidade de elementos que aparecerá. Aqui no meu cabem até 7 elementos, então veja qual a melhor quantidade para o seu blog. Já em Azul está o título do Gadget.

Então salve e veja como ficou o resultado.

Lembrando que só funcionará se você estiver usando Marcadores em seu blog. Não sabe o que são marcadores então leia esse meu outro post. 

>>  Adicionar Marcadores no Blog.

Adicionar Marcadores no Blog - Dicas Blogger

O quê são Marcadores? Para que serve esse gadget?  Pra quem não sabe os marcadores são nada mais nada menos do que a organização do seu blog, como o nome bem diz ele serve para separar os seu posts por categorias e assim deixar seu trabalho mais organizado pra você e de mais fácil navegação para seus visitantes, quanto melhor a organização do seus marcadores mais facilmente um usúario encontra o que deseja.

Siga os próximos passos e veja como é fácil ter seu Blog bem organizado. Primeiro entre em Design, e na própria aba Elementos de Página clique em adicionar novo gadget.

Escolha o gadget do tipo Marcadores.

Agora vamos configurar.

 

Aqui você pode colocar o titulo que desejar, como por ex: Filmes, Programas, Tutoriais, Menu etc... Você também pode escolher quais marcadores deseja mostrar escolhendo a opção Marcadores selecionados. Depois de configurado salve e coloque o seu marcador no local em que desejar da sua barra lateral ou abaixo do cabeçalho.

Se você quiser pode optar por não mostrar este Gadget em seu Blog usando ele apenas para organizar seus Posts e assim criar um menu de sua preferência, para fazer isso é só marcar a opção Marcadores selecionados clicar em editar e desmarcar todos os marcadores.

Já adiconado o gadget agora vamos aprender a organizar os arquivos. Organizar os arquivos é o mais simples de tudo. Veja a imagem.

Ao criar sua postagem onde está escrito marcadores digite o nome do seu marcador por ex: Filmes, Programas etc... Você pode também adiconar mais de um marcador para o mesmo post separando por virgula por ex: Filme,Terror ou Programas,Segurança e essim por diante.

Gadgets Blogger - Como Encontrar Id

Este post é para Facilitar o entendimento de como encontrar a id de cada gadget do seu blog, leia com atençao e veja como é fácil. Primeiro entre em design, editar html e marque a caixinha expandir modelos de widgets agora abra uma nova aba no seu navegador e abra seu blog na pagina inicial e deixe aberta, volte na página do html do seu blog e de um ctrl+f no teclado e digite o seguinte.

title='

 agora volte na aba que está aberto seu blog e veja o titúlo do seu gadget.

agora digite o titulo do gadget que você deseja identificar na frente de title=' e veja o resultado.

fácil não? sempre que quise saber a id de um gadget é só repetir este passo que estará ai o resultado.

Agora para modificar você deve incluir a Css acima de ]]></b:skin>. por exemplo:

#HTML4{
regras css aqui
}

 ]]></b:skin>

Alterar cor de fundo.

#SUA ID AQUI{
background: #f8f8f8;
}

Altere o código marcado para aletar a cor, conheça aqui algumas cores clique aqui.

Colocar imagem de fundo.

#SUA ID AQUI{
background: url(link da imagem) repet-x;
}

Se for usar uma imagem grande sem repetição apague o codigo repeat-x.

Se quiser alterar não só o fundo mas também textos e outras coisas veja esse meu outro tutorial clique aqui.

É isso pessoal espero que tenham gostado e qualquer dúvida ou sugestão é só comentar.

Personalizar Gadgets - Widgets Blogger

Nesse tutorial vou mostrar a vocês como personalizar o gadget marcadores do Blog. Mas pra que isso serve? Então personalizando esse gadget fica muito mais fácil fazer um menu lateral para melhorar a navegação do usuario e garantir que o mesmo encontre mais facilmente o que procura.
 

O modo é bem fácil, entre no seu blog e clique em design depois em editar html e espandir modelos de widgets, não esqueça de baixar uma copia do modelo. Feito isso procure pelo seguinte código

<b:section-contents id='sidebar-left-1'>
<b:widget id='Label2' locked='false' title='Animes' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>

Aviso: oque você deve encontrar é a id e o titulo do gadget a ser personalizado, descoberto a id vamos a parte seguinte.
procure por ]]></b:skin> e acima dela crie o seguinte.

#label2{
magin-bottom: -25px;
}

#Label2 a{
text-indent:15px;
letter-spacing: 1px;
background-image: url(endereço da imagem);
background-repeat: no-repeat;
background-position: left;
padding-left:15px}

#Label2 a:hover{
letter-spacing: normal;
font-weight: bold;
background-image: url(endereço da imagem);
background-repeat: no-repeat;
background-position: left}

Com esse código você poderá manipular totalmente o godget colocando imagens de fundos, alterando tamamho e estilo da fonte, definindo bordas e margim. Só cuidado pois para que funcione você deve trocar a id marcada em azul pela id encontrada ai no seu blog, aqui esta como Label2 porque essa é a minha id. espero ter explicado direito. e qalquer coisa é so comentar.

Como Colocar Caixa Curtir do Facebook No Blog

Nessa video aula vou estar mostrando a vocês como se colocar o plugin social do Facebook na página do seu blog. O plugin social do Facebook além de deixar o seu blog com um toque mai elegante ele ajuda bastante na divulgação do seu trabalho. Espero ter consiguido deixar essa video aula bem simples qualquer dúvida é só perguntar.
Loga mais abaixo estarei deixando os links das paginas que você ira usar.

http://www.facebook.com/

http://developers.facebook.com/docs/plugins/

E então o que acharam da video aula? Se tiverem alguma dúvida pode perguntar.