13.12.15

Como fazer Gadget de afiliados em 2 colunas com efeito?

Imagem de chanel, coco, and gif

Heeeyy! Bom galera, hoje estarei atendendo mais um pedido de vocês, e umas das coisas mais pedidas é um tutorial do Gadget de afiliados em duas colunas e com efeitos igual ao do MB, então agora vou ensinar vocês a aplicar esse tutorial no blog de vocês, bora lá? ^^

Veja como é o Gadget de duas colunas com o efeito


Vamos ao tutorial agora!

Vá em MODELO >> editar HTML >> Ctrl + F e cole o código:

 /* Widgets 

Abaixo dele cole o seguinte código:

.feed-links{display:none !important;}
.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menutags2{
background-color: #B0C4DE;
border: 1px solid #1874CD;
width: 94%;
height: 10px;
float: left;
font: 11px Verdana;
color: #fff;
padding: 2px 0 6px 0;
text-align: center;
margin: 1px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;text-shadow: 0 0px 0 #1874CD;
border-radius: 2px;
}
#menutags2:hover {
opacity: .50;
}
{font-family: Arial; }
#footer-wrapper {
background: url(https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-F2CnL288H18%2FVN05v8viROI%2FAAAAAAAAAzw%2FKzpQl2OC6Uk%2Fs1600%2Fgrande%252Btransparente.png&container=blogger&gadget=a&rewriteMime=image%2F*); /*imagem do fundo*/
background-repeat: repeat;
z-index: 2000;
height: 90px; /*altura da imagem*/
clear: both;
font-size: 35px; /* tamanho da fonte */
color: #fff; /* cor da fonte */
font-family: Bira ;
text-align: center; /* alinhamento da fonte */
padding: 5px;
}
.post-footer-line-1{
font-family: Arial;
font-size: 11px;
color:#B0C4DE;
border-bottom: 1px solid #A4D3EE;
text-align: center;
}
.post-footer-line-2{
padding-bottom: 4px;
font-family: Arial;
font-size: 11px;
color:#B9D3EE;
border-bottom: 1px solid #A4D3EE;
text-align: center;
}
.post-labels span, .post-labels a{
border: 1px solid #96CDCD;
color: #fff;
background: #A2B5CD;
font-size:11px;
padding:2px 5px;
margin:2px;
font-family: Arial;
text-transform: ;
}

E ficará assim:


Logo depois faça as alterações que você quiser como tamanho, cores, fonte e etc. Depois clique em SALVAR MODELO.

Para finalizar vá em >> Layout >> Adicionar Java/Script >> HTML/JavaScript e copie e cole o código abaixo:

<center>
<div class="direita">
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LNIK DO BLOG" id="menutags2">NOME DO BLOG</a>

</div>
<div class="esquerda">
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
<a href="LINK DO BLOG" id="menutags2">NOME DO BLOG</a>
</div>
</center>

Feito isso agora é só substituir o LINK DO BLOG e o NOME DO BLOG colocando o nome e o link de seu afiliado.
OBS: Cuidado para não apagar nenhuma pontuação, pois pode dá erro em algo. Apague apenas no que está em MAIÚSCULO.

Bom meninas, é um tutorial super fácil, espero ter ajudado, por hoje é só, qualquer coisa deixe seu comentário para pedir algo, dizer algo sobre o post, blog, deixe sugestões, elogios, críticas. Fique à vontade, mas lembre-se de manter respeito!
Beijooos <3

SE FOR REPASSAR DEIXE OS CRÉDITOS AO MB. PLÁGIO É CRIME!


12 comentários:

  1. Oieee linda!
    Lembra de mim? Então, como você percebeu fiquei um tempão afastada do blog( vou liberar um post já já explicando tudinho), agora voltei para ficar, vamos voltar com nossa afiliação?
    Beijos

    ResponderExcluir
    Respostas
    1. Oi flooor <3
      Claro que me lembro *.* verdade, você sumiu, várias blogueiras estão desaparecidas de seus blog :(
      Eu também sumir um pouco, mas agora estou de volta ^^
      Vamos voltar a afiliação sim, com certeza :)
      Beijokaas!

      Excluir
    2. Okaay flor, estou organizando o meu blog aqui, e já já te coloco aqui também <3

      Excluir
    3. Camila, não estou conseguindo entrar no seu blog, lá diz que seu blog não foi encontrado, por favor verifique suas configurações se você não privatizou seu blog, ou se você mudou o link me passa o novo link do blog.
      Beijos!

      Excluir
  2. Oi! Tudo bem? Então, só passei para avisar que o blog Azul Clichê acabou, então pode removê-lo dos seus afiliados, no momento eu estou com um projeto do meu novo blog, saviaandrade.blogspot.com/ ! Ficarei feliz com sua visita hehe, beijos e muuuito sucesso! <3

    ResponderExcluir
    Respostas
    1. Eii flor, tudo bem sim, e você <3
      Poxa, eu estava curtindo muito o AC, estava tão fofo e com ótimos posts. Mas desejo sucesso em dobro ao seu novo projeto, que ele te traga coisas boas e que não te permite remove-lo também *.*
      Obrigada por me avisar, beijooos minha lindaa, que saudade de você Sá!

      Excluir
    2. Ah, já ia me esquecendo de avisar que visitei, amei seu novo blog que já estou até seguindo :3
      Está super meigo assim como você, começou super bem, agora é só espalhar convites para visitarem o seu blog e o seu sucesso só crescer ^^ haha'
      <33

      Excluir
  3. Ótimo tuto,precisei dar um tempo com o blog,agora estou voltando com força total estou reorganizando o blog e acho que vou usar esse tuto ocupa menos espaço e fica bem organizado.Vc era minha afiliada gostaria de saber se tem interesse em continuar?

    Bjs e parabéns pelo blog esta lindo.

    https://dicaselayouts.blogspot.com.br/

    ResponderExcluir
  4. oi td bem meu nome e vitor

    ResponderExcluir
  5. to com nome anonimo mas meu nome e vitor
    lembra

    ResponderExcluir

- Se tive alguma dica, diga! =)
- Alguma dúvida ou algum pedido? Comente!
- Sim, visito o seu blog, mande o link! =D
-Favor não ofender ninguém, elogios e criticas são bem vindos, mas mantem o respeito!
Obrigada, MB!

Copyright © 2016 | Design e Código: Mistério do Brilho e Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo