Artigos por "Gadgets"

10:20 ,

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


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


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.

10:14 ,
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.



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.


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

10:11 ,

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.



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.

12:00 ,

Formulário de contato serve como uma alternativa a mais no seu blog, para que seus leitores ou visitantes recorrentes possam entrar em contato com você, seja para deixar dica, sugestões, reclamações e até fazer parcerias. E na plataforma blogger, você tem a opção de adicionar este gadget no template do seu blog de forma bem simples. Vamos ao Tutorial!

Como Adicionar Gadget Formulário de Contato no Blog

A escolha do local para adicionar este gadget, fica a seu critério, pois pode variar de template para template. O mais comum é posicionar no final da página inicial do seu blog, o que não é regra, basta adicionar num lugar que não deixe sua página com um layout desordenado, e essa dica vale para outros gadgets, que você irá adicionar no seu template.

Tutorial:

1. Acesse seu Painel Blogger.
2. No menu clique em Layout.
3. Selecione a área onde seu Fomulário irá ficar posicionado e clique em Adicionar um Gadget.


4. Selecione o Gadget Formulário de Contato.


5. Nesta opção você pode mudar o nome ou deixar como está, clique em Salvar.


6. Depois de salvo e selecionado o local que seu Fomulário de Contato irá ficar. Veja o Exemplo.


7. Pronto, agora os leitores do seu blog, tem uma opção de enviar mensagens para você.

16:00 ,

As redes sociais são muito importantes para divulgação do seu site e interação com seus leitores, por isso é muito importante que você tenha uma página no facebook ou uma conta no twitter, para que os visitantes de seu blog possa receber atualizações de seus artigos. Isso faz com que seja mais prática a interação entre seu site e o leitor, já que passamos um bom tempo logados em nossas redes sociais.

Leia Também

Quando as opções de compartilhar ou seguir seu blog nas redes sociais surgiram, essa ferramenta só era usada por usuários profissionais, tornando muito difícil o uso desse gadget em sites simples. Contudo, hoje já é possível usar essas ferramentas sem precisar de conhecimentos específicos, uma vez quê o próprio facebook disponibiliza a opção de criar "LIKE BOX" da sua página e salvar o código para usar no seu blog.

Como Criar Facebook Like Box



Para criar sua Like Box acesse Facebook for developers, na página é possível criar uma "box"apenas adicionando o link da página do seu blog, e se rolar para baixo, tem outras opções de modelo de box que você pode usar, podendo ser feito alguns ajustes de tamanho ou se quer somente o botão curtir, deixar as publicações visíveis, mostrar fotos de seguidores e etc.

Depois que você configurar sua box, copie o código e cole no layout do seu blog na posição que você achar melhor para que quando um visitante visualizar seu site ele tenha a opção de seguir você pelas redes sociais. Assim, toda vez que você postar algo, todos o seguidores de sua página terão acesso ao link e também poderão compartilhar seu conteúdo com seus amigos.

10:00 ,

Em qualquer blog que você acesse há uma página destinada a contatos. Então ao clicar nela, você encontrará várias opções como: email, formulário de contato e através das redes sociais também.
 E essa página é usada pelo seus leitores para enviar sugestões de ideias, criticas e até para tirar dúvidas sobre os assuntos referentes ao seu blog.

Se você tem um blog que oferece serviços ou deseja que o contato seja feita de forma rápida, uma boa alternativa ao email é o Skype.

Então, neste tutorial vou mostrar como adicionar um botão de chamadas do skype no seu blog.

Colocando um botão de chamada do Skype no Blog 

1. Acesse o site do Skype
2.O site está em inglês, porém é de fácil utilização basta seguir os passos abaixo;


Feito isso basta adicionar este código na página de seu blog, e qualquer usuário que tenha skype e deseje falar com o você, poderá entrar em contato de forma direta.

01:05 ,

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.

02:18 ,

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.

13:30 ,

Com este gadget, poderá ser vizualizando os últimos comentários feitos em seu blog, junto com o nome e o avatar da pessoa que comentou. É um opção que você oferece aos seus leitores de ficar por dentro do que está sendo comentado em seu blog, e quais os assuntos mais acessados.



Este gadget é personalizável, não ocupa muito espaço e é leve. As cores dos links do título e largura variam de acordo com o layout do seu Blog, claro, seguindo o seu padrão.

Adicionando o este gadget ao seu blog

Vá em Layout > Adicionar HTML > HTML/JavaScript > Adicione o código abaixo:



Se você quiser alterar o número de comentários altere o número 5 por um número maior ou menor.
Se você desejar alterar o tamanho do avatar, altere em width: 36px;  height: 36px;
Se não quiser que apareça o avatar (foto) troque Yes por no.
Você pode também alterar cor, tamanho, estilo da fonte.
Qualquer dúvida não hesite perguntar, usando a seção de comentários.

Agora é só ver o resultado em seu Blog.

Muitos procuram gadget de assinar newsletter limpo simples, porém elegante para adicionar em seus blogs. Este é mais um tutorial que lhe ensinará a adicionar um gadget de assinar newsletter, fácilde instalar com efeitos em CSS. 
Você poderá posicioná-lo em qualquer parte do seu template, que aceite gadgets padrões do Blogger. 
O modelo ficará como está na imagem abaixo:



Colocando Gadget de Assinar Newsletter no Blog

Acesse o painel de controle do blogger > vá em layout > adicionar gadget > HTML/JavaScrips > E adicione o código abaixo, fazendo modificações somente nos locias indicados.

<style>
.mbt-email{
background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
}
.mbt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }
</style>
<div class="mbt-email">
Receba as atualizações via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEU-FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="SEU-FEED" name="uri"/><input type="hidden" name="loc" value="pt_Br"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

No código tem dois textos destacadas em azul : "SEU-FEED", você irá substituir pelo nome do seu Feed no FeedBurner.

10:00 ,

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.

14:20 ,

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.

Alberto Monteiro

Formulário de contato

Nome

E-mail *

Mensagem *

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