filmetub: Códigos
Mostrando postagens com marcador Códigos. Mostrar todas as postagens
Mostrando postagens com marcador Códigos. Mostrar todas as postagens

terça-feira, 21 de fevereiro de 2012

Mostrar/Ocultar Categorias com Efeito Deslizante no Blogger

Olá pessoal, hoje vamos aprender a como adicionar um efeito deslizante no gadget "Categorias" em seu blog. Esse efeito é de mostrar/ocular, ou seja, quando você clicar em cima da aba categorias irá expandir com um efeito deslizante, e irá aparecer várias palavras que você categorizou. Essa opção é muito boa, se o seu blog possui vários gadgets instalados, assim facilita a navegabilidade e não confunde o seu visitante.

COMO ADICIONAR ESTE EFEITO AO SEU GADGET:
1º - Entre no Painel de Controle de seu blog e clique na Guia Modelo.
2º - Em seguida clique em "Editar HTML" e clique em "Expandir modelos widgets".
3º - Pressione as teclas CTRL+F e procure por:
</head>
4º - E ACIMA cole o seguinte código
 <!-- Prototype e Scriptaculous--> <script src='http://www.google.com/jsapi'/> <script> google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;); google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;); </script> <!-- Prototype e Scriptaculous -->
5º - Agora vamos procurar pelo nome do widget que queremos adicionar este efeito. Exemplo:
 <b:widget id='Label1' locked='false' title='Categorias' type='Label'>
6º - Localizado o gadget, agora vamos adicionar as linhas em vermelhos no código abaixo:
 <b:widget id='Label1' locked='false' title='Categorias' type='Label'> <b:includable id='main'> <a href='#' onclick='Effect.toggle("Categorias","slide"); return false'> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/> &#9660;</h2> </b:if> </a><div id='Categorias' style='display: none;'> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=30&quot;'> <data:label.name/> </a> </b:if> <span dir='ltr'>(<data:label.count/>)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </div> </b:includable> </b:widget>
7º - Clique em Visualizar, se tudo ocorrer tudo certo clique em Salvar Modelo.
Créditos para o Manuel Veloso.

sexta-feira, 10 de fevereiro de 2012

Adicione um Calendário Humano no seu Blog

Isso mesmo, você não leu errado, estamos falando em adicionar um calendário humano em seu blog como um gadget. Ficou interessado(a)? Quem oferece essa possibilidade de calendário é o site (em inglês) HumanCalender, é bem divertido usar em seu blog, pois a cada dia, mês e ano aparece pessoas com plaquinhas se referindo a data do dia. Você pode ver um exemplo na imagem acima.

Siga o Tutorial para Adicionar:
1º - Acesse o site HumanCalender
2º - Selecione o formato do calendário, ajustando as medidas de acordo com o seu blog e onde irá inserir o gadget.
3º - Em seguida, copie o código que aparece no lado direito.
4º - Agora, entre no painel de controle de seu blog, clique na guia Layout.
5º - Selecione "Adicionar um gadget" e clique na opção "HTML/JavaScript" e cole o código que você copiou no passo 3º.
6º - Feito isso clique em Salvar.

Espero que tenham gostado desta dica, não esqueçam de comentar. Até o próximo artigo!

terça-feira, 31 de janeiro de 2012

QuickRibbon - Criar uma Faixa Personalizada para o seu Blog

Olá Pessoal, com certeza um dia você entrou em um blog/site que ao lado direito do blog, tinha uma faixa, com um texto, seja bem vindo, comente no blog e entre outros. O QuickRibbon é um serviço onde possamos criar faixas personalizadas, nesta faixa podemos colocar alguma mensagem com link, divulgar alguma promoção, é só usar a sua criatividade!

Abaixo podemos visualizar uma imagem, que antes de gerar a faixa personalizada, temos que passar por 4 etapas:
Na 1ª etapa temos a opção "Text options", neste local insira a frase que aparecerá na faixa, também podemos modificar o tamanho da fonte e a cor.
Na 2ª etapa temos a opção "Ribbon options", você deve escolher o estilo e as cores que você quer utilizar na faixa.
Na 3ª etapa temos a opção "Preview", você irá pré-visualizar a faixa.
Na 4ª etapa e última temos a opção "Link options", insira o URL de seu blog e a forma que o link será aberta.
Agora clique em Generate Ribbon! para copiar o código de sua faixa. Agora, vamos aplicar no HTML de seu blog.


APLICAR NO BLOGGER
1º - Entre no Painel de Controle de seu blog e clique na Guia Modelo.
2º - Clique em Editar HTML e pressione as teclas CTRL+F e procure por:
</body>
3º - E ABAIXO cole o código gerado no QuickRibbon.
4º - Agora clique em Visualizar, para ver se ocorreu tudo certo e clique em Salvar Modelo.

Espero que tenham gostado deste artigo. Até a próxima!

sábado, 21 de janeiro de 2012

Ative a Opção de Responder Comentários do Blogger em Templates Customizados

Olá Pessoal, hoje iremos aprender a como colocar a opção de Responder Comentários no Blogger, em templates customizados. Aqui no UB já falamos sobre esta novidade que o Blogger nos ofereceu, mas até então, não tinha um código específico para colocar este recurso em templates customizados, mas a Clau do Mundo Blogger disponibilizou um código para ativá-lo no Blogger e irei repassar para os leitores do Utilizando Blogger.

Siga o Tutorial abaixo:
1º - Entre no Painel de Controle de seu blog e clique na Guia Modelo.
2º - Em seguida, clique em "Editar HTML" e clique em Expandir Modelos Widgets.
3º - Pressione as teclas CTRL+F e procure por:

<b:include data='post' name='post'/><b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:include data='post' name='comments'/></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><b:include data='post' name='comments'/></b:if>
4º - E SUBSTITUA tudo pelo seguinte código:
<b:include data='post' name='post'/><b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if>
5º - Clique em Salvar Modelo.

Fonte: Mundo Blogger 

terça-feira, 17 de janeiro de 2012

Coloque um Texto Animado em seu Blog

Seu texto animado aqui! - Utilizando Blogger

Você com certeza, já viu em um blog um texto animado, que fica se movendo dá esquerda para direita ou vice-versa. Hoje vamos aprender a como colocá-lo em seu blog. É bastante simples de adicionar e também você pode usar como mensagem de boas vindas, para assinar o Feed e entre outros.Você pode escolher onde quer colocar, sendo dentro da postagem ou como um gadget. 

Vamos ao Tutorial:
Mostrar Texto Animado em um Gadget


1º - Entre no Painel de Controle de seu blog e clique na Guia Layout.
2º - Clique em "Adicionar um gadget" e selecione a opção HTML/JavaScript.
3º - Cole o código abaixo:
<marquee direction="right" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5">Texto Animado Aqui</marquee>
4º - Clique em Salvar.

Mostrar Texto Animado dentro da Postagem

1º - Entre no Painel de Controle de seu blog e clique em "Nova Postagem".
2º - Clique em "Editar HTML" e cole o código abaixo:
<marquee direction="right" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5">Texto Animado Aqui</marquee>
3º - Termine de escrever seu artigo e clique em "Visualizar" e depois clique em "Publicar Postagem".

Lembre-se: Modifique a parte em negrito destacado em vermelho pela frase que você quiser.

segunda-feira, 16 de janeiro de 2012

Share This: Botão para Divulgar seu Blog nas Redes Sociais

A base de sucesso de um blog é a divulgação. Sem ela, nosso trabalho oferecido não será prestigiado pelas pessoas. Temos que se esforçar para divulgar o nosso blog e oferecer para os nossos leitores divulgar o nosso blog em suas redes sociais. Um site que oferece este recurso é o Share This.

Aqui no Utilizando Blogger já falamos sobre o AddThis: Botão de Compartilhamento nas Redes Sociais uma opção bem legal para colocar em seu blog, mas se você não gostou do botão de compartilhamento dito antes, hoje vamos aprender a como colocar o Share This. 


Vamos ao Tutorial:
1º - Acesse: http://sharethis.com/publishers/get-sharing-button
2º - No elemento 1. Website or Blog?, escolha a opção "Website", para adicionar manual.
3º - No elemento 2. Pick you style, escolha o modelo de botão que deseja usar. Clique sobre o botão para escolher, e e veja uma pré-visualização dele.
4º - No elemento 3. Choose a Share Widget Style, clique no botão "Get The Button", para gerar o código.
5º - Uma janela pop-up será aberta. Você terá que fazer um registro para obter o código, então preencha os campos da seguinte maneira: 
Domain name (endereço de sue blog), Email (endereço de sue e-mail), Username (nome de usuário para acessar o site), Password (senha) e Re-enter Password (repita sua senha). Selecione a opção "I agree to the Publisher Terms of Service above" e em seguida clique em "Register" para finalizar.
6º - Você será redirecionado para uma página par copiar o código dos botões, feito isso copie e cole em sue blog.

Se você deseja colocar estes botões no rodapé das postagens, siga o tutorial abaixo:

7º - Entre no Painel de controle de sue blog → guia modelo → editar HTML → clique em "Expandir modelos widgets" e com ajuda do CTRL+F, procure por:
<div class='post-footer-line post-footer-line-3'>
se não encontrar o código anterior, procure pelo seguinte:
 'post-footer-line post-footer-line-3'
8º - E ABAIXO cole o código do passo 6º.
9º - Clique em Salvar Modelo.

sábado, 14 de janeiro de 2012

Redes Sociais com Efeito Rollover


Olá Pessoal, hoje iremo aprender a como colocar um gadget de redes sociais com efeito rollover em seu blog. Mas o que é um efeito rollover? É bem simples, ao passarmo o mouse por cima de uma imagem aparece outra. Esse efeito fica muito elegante para qualquer tipo e estilo de blog, você pode trocar as imagens de acordo com o seu gosto, também pode mudar o tamanho de imagens.

Vamos ao Tutorial:
1º - Entre no Painel de Controle de seu blog e clique na Aba Layout.
2º - Clique em "Adicionar um gadget" e selecione  a opção HTML/JavaScript.
3º - Se preferir coloque um título e nai caixa de baio (a maior), cole o código abaixo:

<a href=URL-DE-SEU-FACEBOOK-AQUI onmouseover= "if (document.images) document.facebook.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7xSZOL8QTethqdWf8i5VCATvd8ireYeUU_Pd8aL4b7QheFHdfV4Bp5sHdj9lECnQPyH7oHNwDveARIy4CEPf1OD-QEYteLuauEVwpMcFrve5dex2U3TYvfXGsbqbRUFz6gAbBCA66Yc/s1600/social-facebook-box-blue-icon.png';" onmouseout= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95Gj2xCx9KUjDrZXdVUlsrJPnGpVSoLbf8oYJ0lOcc1XdJu-lL6nn5T9EicyshcZMurk_6SHFd7cOALdHsxhAKNAzQO80n-VQW6mBUQGzDlU2YTXURNRQozf5sFHIjupFm5p0xxVgy_w/s1600/social-facebook-box-white-icon.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95Gj2xCx9KUjDrZXdVUlsrJPnGpVSoLbf8oYJ0lOcc1XdJu-lL6nn5T9EicyshcZMurk_6SHFd7cOALdHsxhAKNAzQO80n-VQW6mBUQGzDlU2YTXURNRQozf5sFHIjupFm5p0xxVgy_w/s1600/social-facebook-box-white-icon.png " name="facebook" border="0" width="64" height="82"/></a>
<a href=URL-DE-SEU-TWITTER-AQUI onmouseover= "if (document.images) document.twitter.src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3UgzvTycb4mhC3O2LHoVPORIGfGctzDLmDa6WjiEKEslnCZV4R5c4ZpKWCS8KvRyoivr7SWSa2vUWDLjjj5LFYhiqgjF_1rLMZlantnuNK9Houi0vQvpKWyE86acTNO5gf9crtLi7r0/s1600/social-twitter-box-blue-icon.png';" onmouseout= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaa1VFXRHxHiW2TwJDIOHFOJIAyFXyM03y1i63xqbHcPFUgUtEn7Tr2JR27nqDoUMkC34GGa3ztjKJM1pD2jfwsBIDzqj_lpiUW-wn1slFrm-PEKjh7SzWTm6pyFdFkY0KRe_Aghs1NzY/s1600/social-twitter-box-white-icon.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaa1VFXRHxHiW2TwJDIOHFOJIAyFXyM03y1i63xqbHcPFUgUtEn7Tr2JR27nqDoUMkC34GGa3ztjKJM1pD2jfwsBIDzqj_lpiUW-wn1slFrm-PEKjh7SzWTm6pyFdFkY0KRe_Aghs1NzY/s1600/social-twitter-box-white-icon.png" name="twitter" border="0" width="64" height="82"/></a>
<a href=URL-DE-SEU-FEED-AQUI onmouseover= "if (document.images) document.rss.src=  'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDyfRgEFeRXLCsT9rZf9TrlIK0N0_gv2zL8jS3-bXzOKNNtMpQrdWYp8RFY15Tsozqv_sflam4dctAOsqdb6L44G2s4A3gwgOAJ9mOSSyweAgHbCVWbvAfc30E4LB12yRLQ96XVGSxNQ/s1600/social-rss-box-orange-icon.png';" onmouseout= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEC6CVAKrFVRNFVGShT0WIZcq-f3HNVQXecdp6ZXt3eOSqtqNvQS-nPMShbIYDBdeqi3qVBnzA2cwVagCWdohTchwBVn5Ksblm_P_EQjYXKbQp2AU-kuHO6UgA347IWCy1_iZafRhYaY/s1600/social-rss-box-white-icon.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEC6CVAKrFVRNFVGShT0WIZcq-f3HNVQXecdp6ZXt3eOSqtqNvQS-nPMShbIYDBdeqi3qVBnzA2cwVagCWdohTchwBVn5Ksblm_P_EQjYXKbQp2AU-kuHO6UgA347IWCy1_iZafRhYaY/s1600/social-rss-box-white-icon.png " name="rss" border="0" width="64" height="82"/></a><br/>
Lembre-se de Modificar:

  • URL-DE-SEU-FACEBOOK-AQUI: Coloque neste local o URL do seu perfil no Facebook.
  • URL-DE-SEU-TWITTER-AQUI: Coloque neste local o URL do seu perfil no Twitter.
  • URL-DE-SEU-FEED-AQUI: Coloque neste local o URL do feed de seu blog.

4º - Clique em Salvar.

Pronto! Seu gadget de Redes Sociais com Efeito Rollover, já esta adicionado. Se você quiser trocar as imagens, recomendo usar o IconFinder .

Este código pertence ao blog Spice Up You Blog mas tendo algumas modificações pelo UB.

sábado, 7 de janeiro de 2012

Adicione uma Fan Box do Facebook em seu Blogger

Olá Pessoal. Hoje vamos aprender a como colocar uma Fan Box do Facebook em seu blog. Nesse widget, são mostrados os avatares das pessoas que curtiram a sua página no Facebook, e também temos uma botão com a opção de curtir. Assim ao adicionar essa caixa em seu blog, facilitará ao seu leitor há estar mais perto do seu blog, por meio das Redes Sociais. Vejamos a seguir.

Antes de começar, veja abaixo a caixa de Fan Box em uso:



Mas para ter esta caixa em seu blog, você precisa ter uma página de fãs para o seu blog no Facebook. Caso ainda não tenha criado sua página, clique no link destacado abaixo:
Siga o Tutorial:
1º - Entre no painel de controle de seu blog e clique na Guia Layout.
2º - Você irá para a sub-aba Elementos de Página, clique em Adicionar um Gadget e selecione a opção "HTML/JavaScript".
3º - Cole na caixa o seguinte código: 
<center><iframe src="http://www.facebook.com/plugins/likebox.php?id=COLOQUE_O_ID_DE_SUA_PÁGINA_AQUI&amp;width=276&amp;connections=8&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:276px; height:250px;" allowtransparency="true"></iframe></center>
Lembre-se: Substitua a parte destacado em azul (COLOQUE_O_ID_DE_SUA_PÁGINA_AQUI), pelo ID de sua página no Facebook. Caso não saiba como encontrar o ID, veja a explicação abaixo:


• Entre na sua página no Facebook
• Vá no link de sua página, e você terá uma sequência de números, como a imagem abaixo:
Veja a parte sublinhado em vermelho, aquele local é o ID do seu blog. Então copie e cole no código do passo 3.


4º - Feito isso, clique em Salvar.

quinta-feira, 29 de dezembro de 2011

Como Inserir uma Nuvem de Tags Usando os Marcadores

  Olá pessoal, hoje estou com mais um tutorial para você adicionar em seu blog. Desta vez estou trazendo um Widget de nuvem de tags usando os marcadores de seu blog. Como no próprio título deste artigo diz, antes de tudo para que esse widget funcione você precisa inserir marcadores em suas postagens, assim o próprio Blogger irá organizar em categorias todos os posts.

Vou lhe dar um exemplo de como irá ficar, visualize a imagem abaixo:
Na imagem acima, temos a primeira imagem que ilustra o espaço para preenchemos o nome do marcador, e na segunda imagem, mostra a nuvem de tags na prática (como ela irá funcionar).

Vamos ao Tutorial:
- Vá no Painel de Controle de seu blog e clique na Guia Layout.
- Você irá para a página Elementos de Página. Clique em Adicionar um Gadget e selecione a opção Marcadores, você pode colocar o título como Nuvem de Tags, ou Categorias, Marcadores e entre outros.
Obs: Se você já tem esta opção ativa, não precisa fazer este passo.

3º - Depois de ter salvo, vá na Guia Modelo e em Editar HTML.
4º - Com a ajuda do CTRL+F procure por:
]]></b:skin>
5º - E ANTES dele cole o seguinte código:
#labelCloud {text-align:center;font-family:arial,sans-serif;}#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}#labelCloud a:hover{text-decoration:underline;}#labelCloud a, #labelCloud li a{text-decoration:none;}#labelCloud .label-cloud {}#labelCloud .label-count {padding-left:0.2em;font-size:9px;color: #000;} /*para mudar a cor da letra de preto para branco substitua #000 por #FFF*/#labelCloud .label-cloud li:before{content:"" !important}
6º - Agora procure por: </head>  e ANTES dele cole o seguinte código:
<script type='text/javascript'>// Label Cloud User Variablesvar lcBlogURL = 'http://LINK-DE-SEU-BLOG-AQUI.blogspot.com';var maxFontSize = 20;var maxColor = [0,0,255];var minFontSize = 10;var minColor = [0,0,0];var lcShowCount = false;</script>
  • Lembre-se de substituir a parte em  http://LINK-DE-SEU-BLOG-AQUI.blogspot.com
  • Exemplo: http://meublogaqui.blogspot.com
7º - Agora procure por:
<b:widget id='Label1' locked='false' title='Nuvem de Tags' type='Label'/>
8º - E substitua tudo por:
<b:widget id='Label1' locked='false' title='Nuvem de Tags' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><div id='labelCloud'/><script type='text/javascript'>function s(a,b,i,x){if(a>b){var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)}else{var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)}return v}var ta=0var c=[];var labelCount = new Array();var ts = new Object;<b:loop values='data:labels' var='label'>var theName = "<data:label.name/>";ts[theName] = <data:label.count/>;</b:loop>for (t in ts){if (!labelCount[ts[t]]){labelCount[ts[t]] = new Array(ts[t])}}tz = labelCount.length-1;lc2 = document.getElementById('labelCloud');ul = document.createElement('ul');ul.className = 'label-cloud';for(var t in ts){for (var i=0;3 > i;i++) {c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)}var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);li = document.createElement('li');li.style.fontSize = fs+'px';li.style.lineHeight = '1';a = document.createElement('a');a.title = ts[t]+' Posts in '+t;a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);if (lcShowCount){span = document.createElement('span');span.innerHTML = '('+ts[t]+') ';span.className = 'label-count';a.appendChild(document.createTextNode(t));li.appendChild(a);li.appendChild(span);}else {a.appendChild(document.createTextNode(t));li.appendChild(a);}ul.appendChild(li);abnk = document.createTextNode(' ');ul.appendChild(abnk);}lc2.appendChild(ul);</script><noscript><ul><b:loop values='data:labels' var='label'><li><b:if cond='data:blog.url == data:label.url'><data:label.name/><b:else/><a expr:href='data:label.url'><data:label.name/></a></b:if>(<data:label.count/>)</li></b:loop></ul></noscript><b:include name='quickedit'/></div></b:includable></b:widget>
9º - Feito isso, Visualize e se estiver tudo certo, cliquem em Salvar Modelo! 

quarta-feira, 21 de dezembro de 2011

Adicionar Papai Noel Voando com seu Trenó pelo Blog

Veja a Demonstração: http://demo2ub.blogspot.com/

A alguns dias atrás disponibilizamos a você, um pacote de ícones de Natal, para enfeitar o seu blog de acordo com o seu gosto. Essa forma de enfeitar o seu blog com ícones, é muito interessante colocar no cabeçalho, mas especificamente o logotipo de seu blog.

Mas se você quer enfeitar o seu blog, com uma decoração mais chamativa, você pode conferir na demonstração que demos o link logo no começo deste artigo. Esse Papai Noel, fica muito bonito no blog, pois além de voar com o seu trenó (Papai Noel), ao decorrer irá ficar caindo estrelinhas brilhantes pelo trenó. Isso causa um efeito mais chamativo.

O Papai Noel irá andar de baixo para cima, o período que ele fica no blog é por cerca de uns 10 segundos.
Para adicionar estre script no seu blog, é muito simples e fácil.

Vamos ao Tutorial:
1º - Entre no Painel de Controle de seu blog e clique na Guia Modelo (Design).
2º - Em seguida clique no Botão Editar HTML.
3º - Pressione as teclas  CTRL+F e procure por:
</body>
4º - E ACIMA dele cole o seguinte código:
 <!-- Papai Noel voando pelo blog --> <script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js" /> <!-- Papai Noel voando pelo blog -->
5º - Agora clique em Salvar Modelo.

Quando passar o Natal, basta você procurar e eliminar esse código adicionado no seu blog :)

terça-feira, 20 de dezembro de 2011

Adicionar Box Expansível do Facebook com Efeito Jquery em seu Blog

Hoje nós iremos aprender a como adicionar uma box expansível do Facebook no Blogger. Essa box possui o efeito Jquery isso faz que a box contenha um efeito mais elegante. Esse Box tem o seguinte funcionamento: ao adicionar esse widget, aparecerá o botão do Facebook flutuando no seu blog, mas quando você posicionar o mouse por cima desse botão, irá expandir e aparecerá a caixa de curtir do Facebook. Veja a Demostração:  http://demo2ub.blogspot.com

Vamos ao Tutorial:
1º - Vá no Painel de Controle de seu Blog e clique na Guia Modelo.
2º - Clique no Botão Editar HTML.
3º - Agora pressione as teclas CTRL+F e procure por:
</ head>
4º - E ACIMA dele cole o seguinte código:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
5º - Clique em Salvar Modelo.

Agora vamos adicionar essa Box em seu blog, então faça o seguinte:
Clique na Guia Layout →  Adicionar um Gadget e selecione a opção "HTML/JavaScript". (Não adicione título no gadget). Na caixa do Gadget cole o código abaixo:
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".box-curtir-flutuante").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.box-curtir-flutuante{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHuzI2K0qogEzi5HllVg__EbaGO8ia1n1poQrnjK6QhRYBG5j7OVjBzeSev5O-_C2Ga1bHGx8aZNBzXdS4_TFVTJtupHbskYkq34zLmNA0xI1zIMxFl6ydyE_IyMVAP83qY2gQCqV5ovY/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.box-curtir-flutuante div{border:none;position:relative;display:block;}
.box-curtir-flutuante span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.box-curtir-flutuante span a{color: #808080;text-decoration:none;}
.box-curtir-flutuante span a:hover{text-decoration:underline;}
</style><div class="box-curtir-flutuante" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=COLOQUE-O-URL-DA-SUA-PÁGINA-DO-FACEBOOK&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe></div></div>
  • Lembre-se de alterar o texto destacado em vermelho, pelo Url da sua Página do Facebook.
6º - Feita as alterações, clique em Salvar.

Este tutorial pertence ao Blogger Hack

sábado, 17 de dezembro de 2011

Widget de Assinar Feed Personalizado

Olá Pessoal, hoje estou aqui para mostrar um Widget de Assinar Feed personalizado. No Widget temos as redes sociais mais usadas pelos blogueiros, o Twitter e Facebook. Essa ferramenta é muito bom para você usar em seu blog, pois o espaço onde digitamos o nosso E-mail, é bem simples e pequeno, pois não ocupa muito espaço na lateral do seu blog. Já os ícones, tem um aspecto mais elegante tendo um 'tom' de cor bem diferenciado, e isso deixa o seu blog mais atrativo para o seu leitor

Vamos ao Tutorial:
1º - Acesse o Painel de Controle de seu blog e clique na Guia Modelo.
2º - E logo em seguida, clique no Botão Editar HTML.
3º - Agora pressione as teclas CTRL+F e procure por:
]]></b:skin>
4º - E ACIMA dele cole o seguinte código:
 /* -----   Widget Assinar Feed   ----- */.input.text,input.newsletter-text {background-color:#E1E8ED;background-image:0 to(#ffffff));border-top:1px solid #525252;border-right:none;border-bottom:1px solid #333;border-left:1px solid #525252;border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-webkit-border-radius:3px 0 0 3px;display:block;float:left;width:160px;height:20px;margin:10px 0 0 5px;}.newsletter-button {color: white;font-family: Arial, Helvetica, sans-serif;background-color:#333;background-image:0 to(#333333));border:none;cursor: pointer;border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;display:block;float:left;width:74px;height:24px;margin:10px 0 0;}.text,.newsletter-text {width:70px;}.textwidget {padding-bottom:10px;}
6º - Clique em Salvar Modelo.
7º - E na coluna da esquerda clique em Layout ( ou se você usa a interface antiga do blogger, clique na sub-aba Elementos de Página).
8º - Clique em Adicionar um Gadget e selecione a opção "HTML/JavaScript".
9º - Dê um nome ao Widget e cole o seguinte código:
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(\" http:="" feedburner.google.com="" fb="" a="" mailverify?uri="ID DO SEU FEED\'," \'popupwindow\',="" \'scrollbars="yes,width=550,height=600\');return" true'="" target="popupwindow">
    <input class="newsletter-text text" name="email" value="Digite aqui seu E-mail..." size="25" maxlength="100" onfocus="this.value = &#39;&#39;;" />
    <input class="text" name="uri" type="hidden" value="ID DO SEU FEED" />
    <input name="loc" type="hidden" value="pt_BR" />
    <input class="newsletter-button" type="submit" value="Confirmar" />
    </form>
<div id="anuncio"> <center><p align="center"><a href="URL-DO-TWITTER" target="_blank"><img src="http://dl.dropbox.com/u/49685791/twitter_02.png" /></a> <a href="URL-PÁGINA-DO-FACEBOOK" target="_blank"><img src="http://dl.dropbox.com/u/49685791/facebook_02.png" /></a> <a href="http://feeds.feedburner.com/NOME-DO-FEED" target="_blank"><img src="http://dl.dropbox.com/u/49685791/RSS_02.png" /></a></p></center> </div>
Lembre-se de Modificar: 
→ ID DO SEU FEED: Substitua o ID de seu Feed. Ex: O nome do nosso feed é UtilizandoBlogger.
URL-DO-TWITTER: Substitua pelo link de seu Twitter. Ex: No nosso caso é assim: http://www.twitter.com/ub_oficial (troque o nome "ub_oficial" pelo username do seu twitter).
→ URL-PÁGINA-DO-FACEBOOK: Substitua pelo link de sua fã página no Facebook. Ex: Nossa página tem a seguinte url: http://facebook.com/pages/Utilizando-Blogger/257933060924987. Vá na sua página e copie o link dela.
→ NOME-DO-FEED: Coloque o nome do seu feed, no nosso caso é UtilizandoBlogger.

10º - Após ter feita as alterações, clique em Salvar.

sábado, 10 de dezembro de 2011

Imagens nas Postagens com Efeito CSS3

Olá Pessoal, hoje iremos aprender a como colocar um efeito de CSS3 nas postagens do seu Blog. Esse efeito dá um aspecto bem elegante ao seu blog, pois ao passarmos o mouse em cima das imagens surge o efeito CSS3, e sempre possuirá uma sombra nas bordas das imagens.
Veja o demo: http://demo3ub.blogspot.com (Imagem das postagem).

Vamos ao tutorial:
1º - Acesse o painel de seu blog e clique na guia modelo.
2º - Agora clique no botão Editar HTML.
3º - Em seguida pressione as teclas CTRL+F e procure por:
]]></b:skin>
4º - E ACIMA dele cole o seguinte código:
 .post-body img {opacity:1 !important;-webkit-box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;-moz-box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;}.post-body img:hover {padding: 6px !important;background: transparent !important;-webkit-transition: all 0.8s linear !important;border: 1px solid #C8C6C6 !important;-webkit-border-radius: 8px !important;-moz-border-radius: 8px !important;border-radius: 8px !important;transition: all 0.3s ease !important;-webkit-transition: all 0.8s ease !important;-o-transition: all 0.8s ease !important;-moz-transition: all 0.8s ease !important;opacity:0.5 !important;}
5º - Clique em Salvar Modelo. 

quinta-feira, 8 de dezembro de 2011

AddThis: Botões de Compartilhamento nas Redes Sociais

Compartilhar seu blog em redes sociais é muito importante para você obter visitas para o seu blog, e compartilhar seu artigo em diversas redes. Isso também é um incentivo ao seus leitores, caso eles gostem de seu artigo eles compartilham para seus amigos. E uma das formas mais práticas para fazer isto, é usar os botões do AddThis, tendo diversos modelos de compartilhamento.

O melhor desta ferramenta que é bem simples e prático de colocar em seu blog. É só escolher o modelo que deseja, gerar o código e colar em uma parte de seu blog. (Recomendo que use no final do post, sempre nas páginas internas).

Vamos ao Tutorial:
1º - Acesse: http://www.addthis.com/web-button-select
2º - Escolha a sua plataforma (Blogger ou Wordpress).
3º - Selecione o tipo dos modelos e clique no botão "Grab it". (Pronto! O código foi copiado)

-         Agora abra um bloco de notas e cole esse código e deixe armazenado.

4º - Vá no painel de controle de sue blog clique na aba modelo.
5º - Clique em Editar HTML e em seguida clique em Expandir Modelos widgets.
6º - Agora, pressione as teclas CTRL+F e procure pelo seguinte código:
<div class='post-footer-line post-footer-line-3'>
se não encontrar o código anterior, procure pelo seguinte:
'post-footer-line post-footer-line-3'
7º - E ABAIXO cole o código do passo 3º.
8º - Agora clique em Salvar Modelo.

segunda-feira, 5 de dezembro de 2011

Adicione um Botão de "Seguir" do Twitter no Blog

Hoje iremos aprender a como adicionar um botão de "Seguir" do Twitter no seu Blog, esse widget você pode usar na lateral de seu blog, pois terá uma visualização melhor, além disso o botão é muito simples e não contém nenhum bugs e problemas. O botão ainda mostra o número de seguidores no twitter, e facilita a comunicação entre o seu blog e o seu leitor, pois a pessoa que gostaria de seguir seu blog no twitter, não precisa ir até na página de seu perfil e começar a seguir, pelo ao contrário, esse botão é muito útil e apenas com 2 cliques a pessoa já está seguindo o seu perfil. Simples não?

Vamos ao tutorial:
1º - Vá no Painel de Controle de seu blog e clique na Guia Layout.
2º - Em seguida clique em Adicionar um Gadget (que seja na lateral de seu blog).
3º - Agora selecione a opção "HTML/JavaScript".
4º - Cole no espaço da caixa do Gadget o código abaixo:
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=NOME_TWITTER&lang=pt" style="width:300px; height:20px;"></iframe>
LEMBRE-SE: Altere a parte destacada em negrito pelo nome de usuário de seu twitter. Exemplo: www.twitter.com/nome_twitter no caso do Utilizando Blogger é ub_oficial.

5º - Feito as modificações, clique em Slavar.

sábado, 3 de dezembro de 2011

Redes Sociais com Efeito CSS3

Olá Pessoal, hoje iremos aprender como colocar um menu com 3 botões de redes sociais, eles são o Twitter, Facebook e também o Feed. Os botões possui efeitos em CSS3, tendo como efeito de rotação e opacidade. Esses botões são essenciais para o seu blog, ao passara o mouse por cima dos botões você terá um efeito muito atraente para o seu blog.
Veja o demo: http://demo3ub.blogspot.com/

Vamos ao Tutorial:
1º - Vá no Painel de Controle de seu blog e clique na Guia Layout (Design → Elementos de Página).
2º - Clique em Adicionar um Gadget e selecione a opção HTML/JavaScript.
3º - Cole o código abaixo:

     <style>
     .minhasredes3 {
    padding: 15px;
    }
     .minhasredes3 a {
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;    opacity: 0.5;    }     .minhasredes3 a:hover {    opacity: 1;    }     .minhasredes3 img {    -webkit-transition:All 0.2s ease;    -moz-transition:All 0.2s ease;    }
    </style>     <div class="minhasredes3">    <a href="URL DO PERFIL DE SEU TWITTER"target="blank" title="Siga-me no Twitter"><img src="http://dl.dropbox.com/u/49685791/twitter-icon.png"/></a>    <a href="URL DO PERFIL DE SEU FACEBOOK"target="blank"title="Me adicione no Facebook"><img src="http://dl.dropbox.com/u/49685791/facebook-icon.png"/></a>    <a href="NOME DE SEU FEED"target="blank"title="Assine nosso Feed"><img src="http://dl.dropbox.com/u/49685791/rss-icon.png"/></a>    </div>
Lembre-se: 
  • URL DO PERFIL DE SEU TWITTER: Substitua essa parte pelo link do perfil de seu Twitter.
  • URL DO PERFIL DE SEU FACEBOOK: Substitua essa parte por todo o link do perfil de seu Facebook ou pelo link da página de seu Blog.
  • NOME DE SEU FEED: Substitua essa parte pelo nome do feed de seu blog. Exemplo: http://feeds.feedburner.com/UtilizandoBlogger (no caso NOME DE SEU FEED é: UtilizandoBlogger).
4º - Feito as modificações, clique em "Salvar".

Este código é de Códigos Blogger, mas com pequenas alterações.

sexta-feira, 2 de dezembro de 2011

Retirar a Mensagem "Mostrar todas as postagens"


Olá Pessoal, hoje vamos aprender a como retirar aquela determinada Mensagem quando clicamos em um marcador e que aparece assim: "Mostrar todas as postagens". Esse tutorial é muito importante para as pessoas que adoram customizar seus Templates Oficiais do Blogger, e assim tendo um aspecto mais agradável ao seu blog.

Vamos ao Tutorial:
1º - Acesse o Painel de Controle de seu blog e clique na Guia Modelo (design).
2º - Agora, clique no botão Editar HTML.
3º - Em seguida pressione as teclas CTRL+F e procure pela seguinte tag abaixo:
]]></b:skin>
4º - ACIMA dele cole o código a seguir:
 .status-msg-wrap{display: none;}
5º - Feito isso, clique em Salvar Modelo.

Você também pode conferir um similar deste "Retirar o link "Assinar Postagem (Atom)". 

quarta-feira, 30 de novembro de 2011

Faça Nevar em Seu Blog e Entre no Clima do Natal

Estamos próximos a comemorar uma data muito feliz para todos nós, que é o Natal. Nos Estados Unidos, como a maioria já sabe, o clima frio e com neve muita das vezes esta em alta, que é bem diferente do Brasil. E muitas pessoas, gostam de adicionar efeitos em seu blog, principalmente no fim de ano. E aí, que tal fazer nevar em seu blog?

Vamos ao Tutorial:
1º - Vá no Painel de Controle de seu blog e clique na Guia Layout (Design na Interface antiga do Blogger).
2º - Agora clique em "Adicionar um Gadget" e selecione a opção "HTML/JavaScript".
3º - Cole o seguinte código abaixo:

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">
</script>
4º - E agora clique em Salvar.


 Com o efeito de neve em seu blog, você estará entrando no clima do Natal e deixando seu blog, muito mais bonito para essa data tão especial que está chegando.

terça-feira, 29 de novembro de 2011

Como colocar um link "Enviar para o diHITT" nas postagens


O diHITT, é um dos maiores agregadores de link do Brasil, e é usado muito pelos blogueiros brasileiros e portugueses. O meu blog particularmente, está crescendo por causa do diHITT. A maioria dos meus leitores são de lá, e eu tenho o maior prazer de falar isso a todos vocês. Quando você faz um cadastramento do seu blog no diHITT, você não precisa se preocupar a ficar publicando manualmente, o diHITT faz automaticamente isso, mas é claro você precisa ter uma conta no FeedBurner.

Quais as vantagens do diHITT?
Esse agregador, ele adiciona qualquer tipo de link, e é automaticamente. Mas se você que que esse artigo que você publicou em seu blog, ganhe um destaque maior, você precisa pública-lo manualmente.
Outra coisa, o diHITT oferece um ranking de usuários mais ativos e participantes desse agregador. Mas como se destacar no Top 100? Você precisa comentar em artigos publicados lá, votar, publicar suas noticias e entre outras. Além disso, o diHITT oferece um espaço para conhecermos vários blogueiros, com muitos talentos na escrita. E o mais importante, ganhamos muitas visitas ao se dedicar um pouco de seu tempo na participação desse agregador.

A simplicidade desse agregador é o que faz ele ser valorizado a ter uma belíssima qualidade. O script que eu irei passar para você foi criado pelo autor do blog The Best, de acordo com a página de widgets do diHITT, diz.
Irei disponibilizar duas maneiras de posicionar esse link em seu blog: A) Adicionar o link no rodapé do post. B) Adicionar link abaixo do título do post.

Vamos ao Tutorial (A - Adicionar o link no rodapé do post):
1º - Vá no Painel de Controle de seu blog e na Guia Modelo (design).
2º - Clique no botão "Editar HTML" e marque a opção Expandir Modelos de Widgets.
3º - Como alguns templates possuem códigos diferentes, com a ajuda do CTRL+F procure pelo seguinte código abaixo:
<div class='post-footer-line post-footer-line-3'>
ou se não encontra, procure por:
<p class='post-footer-line post-footer-line-3'>
ou procure somente por:
 'post-footer-line post-footer-line-3'
4º - Após ter encontrado alguns desses códigos,e ABAIXO dele cole o seguinte código: :
<a href="javascript:q=(document.location.href);t=(document.title);void(open('http://dihitt.com.br/submit?url='+escape(q)+'&title='+t,'','resizable,location,menubar,toolbar,scrollbars,status'));" class="bold">[Enviar para o diHITT]</a>
5º - E clique em Salvar Modelo.

Vamos ao Tutorial (B - Adicionar link abaixo do título do post

1º - Vá no Painel de Controle de seu blog e na Guia Modelo (design).
2º - Clique no botão "Editar HTML" e marque a opção Expandir Modelos de Widgets.
3º - Procure pelos seguintes códigos com a ajuda do CTRL+F, e tente achar um que está em seu template:
<div class='post-header-line-1'>
ou
 <div class='post-header-line-1'/>
ou
 <p class='post-header-line-1'>
4º -  Após encontrá-la, e ABAIXO dele cole o seguinte código::
<b:if cond='data:blog.pageType == &quot;item&quot;'><a href="javascript:q=(document.location.href);t=(document.title);void(open('http://dihitt.com.br/submit?url='+escape(q)+'&title='+t,'','resizable,location,menubar,toolbar,scrollbars,status'));" class="bold">[Enviar para o diHITT]</a></b:if>
5º - E clique em Salvar Modelo.


ATENÇÃO: No código "B" no passo 4, eu coloquei em algumas parte no código em negrito e com a cor verde, isso significa que o código ficará ocultado na página principal e aparecerá na somente na página internas do post. Já no código destacado em vermelho nos tutoriais "A e B", você pode mudar da maneira que quiser.


É isso aí, pessoal! Até +