Artigos por "Gadgets"


Adicione em seu blog este gadget, no qual você pode adicionar as imagens e links de parceiros. Este gadget mostrar seus parceirso em lista, com efeito slide automático. Este efeito é parecido com a imagem acima. 

Fazer parcerias com outros blogs é muito importante, pois aumenta o fluxo de visitantes, e se você tem publicidade em seu blog, devido ao aumento de visitantes, com certeza seus ganhos aumentarão. Outra questão importante é que ter links externos para seu blog, exerce influencia sobre os buscadores. Isso é muito importante.

Recomendo a leitura sobre Backlinks acesse: Backlinks qual a sua Importância


-->

Para adicionar em seu blog vá em Layout > Adicionar Gadget > E copie o código abaixo:

Faça as modificações necessárias:
Onde está escrito Link Parceiro, coloque o link do site so seu parceiro.
Em URL IMAGEM, coloque a url da imagem so site do seu parceiro.
Em Nome, coloque o nome do site parceiro


Ajuste a largura para encaixar melhor no seu  layout: procure por width='300' e altere como preferir. Aumentando o valor, ele fica mais largo, diminuindo e o espaço fica menor.

Largura das imagens dos parceiros 120x60.

   



Traduzir seu blog para outros idiomas pode gerar mais trafego, e ainda pode ser feito o acompanhamento de quais idiomas seu blog foi traduzido.
Este gadget é disponibilizado pelo próprio google, para acessar clique AQUI
É um plugin para plataforma blogger, no qual você pode configurar para traduzir para vários idiomas. 

É claro que uma tradução humana é bem mais clara, contudo, traduções feitas por esses gadgets apesar de não parecer, é bastante eficiente e traduz seu blog numa boa qualidade.

Gadget Google Tradutor

Acessando o site do google tradutor  Será aberto uma página onde você irá fazer a configuração do gadget.


Coloque o endereço do seu blog, e escolha o idioma, e clique em próximo



Nesta segunda página, você irá configurar de acordo com o que você deseja, podendo escolher o modo de exibição. É recomendável que você selecione a opção de exibir automaticamente o banner de tradução. E para fazer o acompanhamento com o google analytics, basta colocar o seu id, assim você poderá acompanhar em quais idiomas seu site foi traduzido, e quantas vezes.
 Quando você terminar de configurar seu gadget de tradução, será disponibilizado um código para você adicionar  ao seu blog.

Com este gadget, todo visitante estrangeiro poderá ver seu site traduzido para seu idioma.


Mais um gadget de postagens populares com um visual intuitivo e simples, onde será exibido os melhores artigos de seu blog em escala de cores.  
Para adicionar este gadget é muito simples, basta que você siga este tutorial descrito abaixo.

-->

Inserir Gadget de Postagens Populares com Barra de Cores e Numerado

Se você já usa uma barra de "postagens populares", exclua. 
Depois que você remover vá em > Modelo > Editar HTML > Procure pelo código :

/* Variable definitions
====================

Agora é preciso saber qual é o tipo de Template do seu Blog. Se for um modelo clássico, padrão do Blogger atual, use o seguinte código colando imediatamente abaixo do que foi indicado no item acima:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ff4c54"/>
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ff764c"/>
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffde4c"/>
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#c7f25f"/>
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#33c9f7"/>
</Group>

No caso de o seu template ser um modelo antigo (não o modelo padrão do blogger), então cole o seguinte código:

<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#fa4242">
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ee6107">
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ff00ff">
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#ffff00">
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">

Procure pela linha ]]></b:skin> e cole o código abaixo, acima desta tag;

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;}
#PopularPosts1 ul li:first-child:after{content:"1";}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
#PopularPosts1 ul li:first-child + li:after{content:"2";}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

Agora procure o seguinte: <b:section-contents id=’sidebar-right-1′> (ou um código similar) e logo abaixo cole o seguinte:



<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Agora vá ao menu “Layout” e no gadget de Postagens populares que apareceu, seleciona o numero de postagens que deseja exibir (recomendo não mas do que 5).

Por último, se você quiser mudar as cores de cada barra é simples…
Entre em ► Modelo ► Personalizar ► Avançado ► PopularPosts Backgrounds


E selecione as cores desejadas.



Sempre é bom, deixar um espaço para publicidade, com isso, podemos monetizar nosso blog e ter renda para manutenção. E com este gadget você poderá colocar 4 anuncios no formato 125x125.


-->

Siga as intruções abaixo para códigos estilo adsense e outros.
Lembrando que este código, não precisa ser convertido, pois você pode adiciona-lo no seu blog. Basta ir em Layout > Adicionar Gadget > HTML/JavaScript e cole o código abaixo:

<p align="center">
  <table border="0" cellspacing="5" width="125" align="center"><tbody>
      <tr>
        <td valign="top" width="62">código aqui  1</td> 
       
       
<td valign="top" width="62">código aqui  2</td> 

</tr>

      <tr>
        <td valign="top" width="62">código aqui 3 </td>

        <td valign="top" width="62">código aqui  4 </td>
      </tr>
    </tbody></table>

</p>

Cole o código dos anuncios nos espaços em vermelho no formato 125x125 em flash.

O segundo código e para links com imagem ou gifs.



Faça o mesmo processo de adicionar uma gadget em seu blog, e copie o código abaixo:


<p align="center">
  <table border="0" cellspacing="5" width="125" align="center"><tbody>
      <tr>
        <td valign="top" width="62"><a href="URL_de_DESTINO"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="advertisement-125x125" border="0" alt="advertisement-125x125" src="URL_da_IMAGEM" width="125" height="125" /></a> </td>
       
<td valign="top" width="62"><a href="URL_de_DESTINO"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="advertisement-125x125" border="0" alt="advertisement-125x125" src="URL_da_IMAGEM" width="125" height="125" /></a> </td>
      </tr>

      <tr>
        <td valign="top" width="62"><a href="URL_de_DESTINO"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="advertisement-125x125" border="0" alt="advertisement-125x125" src="URL_da_IMAGEM" width="125" height="125" /></a> </td>

        <td valign="top" width="62"><a href="URL_de_DESTINO"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="advertisement-125x125" border="0" alt="advertisement-125x125" src="URL_da_IMAGEM" width="125" height="125" /></a> </td>
      </tr>
    </tbody></table>
</p>       

Troque "URL_de_Destino", pela o link do anunciante.
E "URL_da_Imagem", pela imagem do anuncio.



JPG Institucional 250x250


Neste tutorial irei ensina-los a adicionar um gadget personalizado do G+ editável. Este gadget é bem diferente, e para quem está personalizando seu blog, com certeza é uma ferramenta indispensável, assim sua página tambem será divulgada no G+.

Deixando de lado a conversa, vamos ao que interessa.

-->

Vá em Layout > Adicionar Gadget e colo o código abaixo:

Procure pelo trecho: https://plus.google.com/SEU-ID-GOOLE e onde está escrito SEU-ID-GOOGLE, coloque seu ID.

Troque  a  imagem  do  cabeçalho  por  uma   criação  sua   largura 290  e  altura 70


 https://lh3.googleusercontent.com/-5BCEZOEwR7w/UO3jSK5JWLI/AAAAAAAABsM/ru7kxVqg3Kg/h86/imagem+de+++teste.png

Troque  a  cor  do  fundo  #333
Troque  a  cor  do  hover  se   preferir  #ccc



Afiliados Cursos 24 Horas - Ganhe Dinheiro com seu Site


Modelo de gadget dos últimos comentários para blog. Este gadget tem uma opções interessantes como: Ler, e escolher quantos caracteres serão exibidos nos comentários.

-->

Tutorial


Copie  o  código  abaixo  e cole  dentro  de  um  gadget  javascript.





Para  escolher o numero de comentários a serem exibidos no gadget procure por esse trecho numRecentComments = 10;  dê um CRLT+F para facilitar a busca e  altere  pelo  numero  desejado.

Para  alterar  o numero de caracteres  procure por maxCommentChars = 70;  e altere para  o numero desejado.


Quero compartilhar este gadget 3 em 1. É bem simples e você não precisa colocar um gadget de cada rede social, em seu blog de forma separada. Assim, você tem um gadget com efeito elevador hover, com caixa para assinar por e-mail, estatística de quanto tempo seu blog está no ar, quantos comentários já foram feitos,  e quantas posts tem seu blog. É bem simples e fácil de editar, podendo ser tirado estatistica, caixa de assinar, deixando do jeito que você quer. 


-->

Vá em Layout > adicionar gadget > e copie o código abaixo.



Faça as modificações necessárias adicionando os links de suas redes sociais.

Estatísticas

Dê um CTRL+F
Agora  procure por esse trecho  DiasOnline(15, 8, 2012,)  e adicione  a data da sua primeira  postagem.

Agora  procure por esse trecho URL DO SEU SITE duas  vezes  no  começo  do  código e adicione seu url do  blogger.

Links sociais
RSS-seu id
Twitter-seu id
Faceboo-seu  id
Google +-seu id
pinterest.-seu id

Altere "SEU ID", pelos nomes das suas redes sociais.

Para que seus leitores possam se inscrever por e-mail, é necessário que você ative no seu FeedBuner, e colocar seu endereço do feed. Se você ainda não ativou leia este artigo:

Ative a Newsletter do Seu Feed para Seguirem por E-mail


Para facilitar as alterações, dê um CTRL+F, e faça as buscas.
Se você não tem conta no Pinterest, apague o trecho abaixo:

 <li class="pinicon">
<a href="http://pinterest.com/jaa09" rel="nofollow" target="_blank">Pinterest</a></li>





Adicione um gadget do autor em seu blog, e toda vez que seus leitores lerem um artigo, eles saberão quem escreveu, isso se o blog tiver mais de um autor. Este gadget é uma boa opção para você acrescentar em seu blog. Então, vou postar duas formas de adicionar esta gadget.

-->

1 Opção

Neste Gadget você poderá adicionar seus links de redes sociais como google+, twitter, facebook, seu contato E-mail e o link de seu site, se tiver outro. Deve resaltar que não é preciso colocar o link do seu site principal, onde você colocará este gadget.

"Aconselho a você que antes de fazer as alterações em seu blog, faça um backup antes".

Vá em Modelo > Editar HTML > Dê um CTRL+F > Procure pelo trecho ]]></b:skin> e acima, cole o código abaixo.


Agora vamos  adicionar  o HTML  do gadget  do autor novamente. Dê um CTRL+F e procure pelo trecho <div class='post-footer-line post-footer-line-1'>  adicione abaixo dela o código  e  salve.


Faça as alterações da foto, perfil das redes sociais e bio. 
Para trocar a imagem "MDB ADM", procure pelo código abaixo e substitua pela url de sua imagem.


https://lh4.googleusercontent.com/-ttCbMtsf23I/UO71-LQl0eI/AAAAAAAABu0/xzdy6QwUBTc/h70/MBD-ADMINblog.png


GIF Anuncio 468x60

Para facilitar as alterações veja abaixo, o que você pode mudar. Todos destacados de vermelho.


<!--começo do gadget MBD html-->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div class='MBDpostauthorbox'>
<div class='MBDpostauthoravatar'>
<img alt='Jay Ryan Macabato' src='https://lh6.googleusercontent.com/-asIhNfKkobE/UO7z1tG1SBI/AAAAAAAABuY/6hQrki88es0/h120/CARLINHOS+CACHUERA.jpg'/>
<div class='MBDpostauthorlabel'></div>
</div>
<div class='MBDpostauthorcontent'>
<div class='MBDpostauthorhead'>
<h5>Postado Por: 
<a href='https://plus.google.com/u/0/ID-da-sua-página/' title='Seu nome aqui'>Seu Nome aqui</a></h5>
</div>
<div class='MBDpostAuthorbio'>
ESCREVA AQUI SUA BIOGRAFIA <a href='URL-DO-SEU-SITE' target='_blank'><b>SEU-SITE</b></a> E <a href='URL-DO-SEU-SITE Contato' target='_blank'><b><i>E-mail</i>Blog</b></a>!</div>
<div class='MBDpostauthorbox-footer'>
<div id="soc">
<div class="soc">
<a class="facebook" href="http://www.facebook.com/NOME-DA-SUA-PAGINA-do-facebook" target="_blank">Facebook</a>
<a class="twitter" href="https://twitter.com/SEU-TWITTER" target="_blank">Twitter</a>
<a class="googleplus" href="https://plus.google.com/u/0/SEU ID" target="_blank">Google Plus</a>
</div>
</div>
</div>
</b:if>
<!--final do gadget do autor MBD html-->


eletronicos/gif/468x60.gif

2 Opção

Para esta segunda opção de gadget, é necessário ter um pouco de conhecimento em CSS. Mais, você pode deixa-lo da forma que você deseja basta seguir as instruções abaixo.

Vá em Modelo > Editar HTML > Dê um CTRL+F > Procure pela tag ]]></b:skin> e cole o código abaixo desta tag.

/* Autores
----------------------------------------------- */

#post-footer-autor {
width: 100%; 
height: 77px; 
background: #e6e6e6; /*Cor do plano de fundo*/
border: #ccc; /*Cor da borda*/
margin: 8px 0px 8px 0px; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
border: 2px solid #ccc; /*Espessura da borda*/
}

#autor-img { 
width: 64px; /*largura da imagem*/
height: 64px; /*altura da imagem*/
background: #fff; /*plano de fundo da imagem*/
float: left;
margin: 7px; 


#autor-sobre { 
padding-right: 5px; 
margin: 0px;
}

#autor-sobre p{ 
font-size: 14px; 
padding: 10px; 
margin: 0;
text-align: justify;
text-transform: normal;
color: #333; /*Cor do texto*/
}
#autor-sobre a{ 
color: #3d85c6; /*Cor dos links*/
text-decoration:none; 
}
#autor-sobre a:hover { 
color: #9A9A9A; /*Cor dos links ao passar o mouse*/
text-decoration:underline; 
}


Se você tem conhecimento em CSS, você pode fazer as alterações, onde está destacado em vermelho.

Agora procure por  <div class='post-footer'> e cole ANTES dessa tag o seguinte código:

<!-- Resumo dos autores-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nome do autor&quot;'>
<div id='post-footer-autor'>
<div id='autor-img'>

<img src='URL DA IMAGEM' style='border: 0px solid #fab805; padding: 0; margin: 0;'/>
</div>
<div id='autor-sobre'>
<p>
<b>Sobre o autor:</b>
Faça uma breve descrição. <a href='link'> Nome do link</a></p>
</div>
</div>
</b:if>

</b:if> <!--Resumo dos autores Final-->

Antes de salvar, faça as seguintes alterações: 

Em  Nome do autor, escreva o nome do autor que receberá a descrição exatamente como está nas postagens.
Em URL da imagem, coloque a url da foto do autor no tamanho 64 x 64.
Em Faça uma breve descrição, escreva algo sobre o autor.

Em link, coloque uma URL (pode ser de um outro blog, Twitter, Facebook e etc) 
Em Nome do Link, escreva o nome da página que está sendo linkada.

OBS: Se seu blog tiver mais de um autor, repita o segundo código para cada um deles.

Depois de editar, visualize e estando tudo okay, salve.




Personalize as postagens populares com este gadget, e deixa mais visível. As postagens populares são os links mais visitados em seu blog, se você está desenvolvendo um blog, ou personalizando, você pode acrescentar este gadget. A instalação é simples e rápida, o código é em css, e o modelo é o mesmo da imagem acima, colorido e numerado.


shopping/gif/468x60.gif

Primeiro faça BackUp de seu template, caso dê algo errado ou você não goste do resultado.

Copie o código abaixo, e adicione acima de ]]></b:skin> . Dê um CTRL+F para facilitar a busca, depois de adicionado o código, visualize e salve.


Depois Vá em Layout > Adicionar uma Gadget > Procure a Gadget de Postagens Populares > Dê um clique no link e ajuste como na imagem abaixo.

Escolha quantas postagens você quer visualizar no seu blog, depois de editar as configurações, salve e escolha o local onde seu gadget será posicionado.

-->


Dê destaque a seu gadget. Pode ser, assinatura de feed, ou plugin do facebook. Este gadget funciona da seguinte forma, quando seus leitores rolarem a página o gadget desce, e quando sobe, ela volta para seu lugar de origem. Para quem está personalizando seu blog, não será difícil adicionar esta gadget flutuante, é só seguir as instruções.


JPG 49 468x60

Vá em Modelo > Editar HTML > e procure pela tag </head> e adicione acima desse trecho o código abaixo.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Agora vá em Layout > Adicione um Gadget > HTML/JavaScripts >  Adicione  o  código  dentro  do  gadget,  note você vai encontrar  no  final  do  código  esse  trecho  SEU CÓDIGO GADGET AQUI adicione  seu  gadget nesse  local  e  salve  o  gadget  e arraste  para  onde  quiser que ele seja  visto.

OBS:  Gadget citado acima, pode ser do seu facebook, feed de noticias e etc.

 

Like Ub - Easyhits4u - Startxchange - Trafego Social Gratis.

Depois de adicionar o gadget, visualize, e depois salve.


Crie um modelo atraente e chamativo de postagens relacionadas para seu blog, usando esta gadget disponibilizada no site 2leep. Você pode fazer várias alterações direto no site, podendo ser mudados tamanho e dimensões de imagens, quantas postagens irão aparecer. O site está em português, e você não terá dificuldades em ajustar seu gadget.

GIF 300x250 - Produtos Exclusivos



Siga as instruções

1. Acesse o site e clique em registre-se;
2. Escolha um e-mail, uma senha e coloque a url do seu blog; (se por  acaso  der  um  erro  e  for  solicitado, adicione seu feedburner url no  local solicitado).
3. Depois de adicionar seu blog, escolha o modelo de widgets no painel, e clique em personalização. Se preferir personalização avançada, depois de ter escolhido, dê um clique sobre o ícone de sua interface e copie o código. 
Você pode adicionar o código através do layout, na opção Adicionar Gadget, mais é preferível que seja adicionado no código fonte do blog, no painel HTML
4. Veja as ilustrações;
 4.1 Numero de janelas.
 4.2 Tamanho da  imagens. É só arrastar a beirada  para aumentar  ou  diminuir.
 4.3 Interface.
 4.4 Copiar código.
 4.5 Mostrar opções avançadas.




Mostrar  opções avançadas.

1. Nome.
2. Cor do  texto.
3. Modelo - 5 modelos diferentes.
4. Tipo de rotação - Todas as  postagens.
5. Abrir  em nova  janela - Deixe desmarcada se não  quiser. 


Esse sistema   também tem  um  painel   onde você  pode  acompanhar o numero de cliques feitos em seu novo gadget.
-->

Para não aparecer na sua pagina  inicial coloque o código gerado no site 2leep dentro do código abaixo.


<b:if cond='data:blog.homepageUrl != data:blog.url'>
código gerado no site aqui 
</b:if>

Vá em Modelo > Editar HTML > e procure por:

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

Adicione seu gadget abaixo do trecho encontrado, visualize e depois save o modelo.

Alberto Monteiro

{twitter#YOUR_SOCIAL_PROFILE_URL} {google-plus#YOUR_SOCIAL_PROFILE_URL}

Formulário de contato

Nome

E-mail *

Mensagem *

Tecnologia do Blogger.
Javascript DisablePlease Enable Javascript To See All Widget