Como criar um widget de caixa de doação no Blogger - Wallace Locutor .ıllı. Vinhetas, Porta de loja, Carro de Som

AdBlock Detectado

Desative seu AdBlock para poder acessar este site.

translate to english
PRECISANDO de um LOCUTOR para GRAVAR o Seu ANÚNCIO? Neste link

Tabela de Conteúdo

Como criar um widget de caixa de doação no Blogger

criar-widget-de-doacao-no-blogger

Caixas de doação e widgets de caixa de doação são um dos widgets que são muito úteis para um escritor de conteúdo que tem um blog para compartilhar experiências e informações que são úteis para os visitantes.

Se você escrever artigos que são úteis e ajudam seus leitores, então seus leitores ficarão gratos fazendo uma doação para você. Portanto, o widget da caixa de doação no seu blog é muito importante.

Além disso, ao instalar um widget doação sob o artigo do blog, também facilita a doação para você através deste widget fornecido. Seja através de Transferência Bancária, PayPal, Nubank, Banco Inter e muito mais...

A maioria dos que instalam essa caixa de doação é um blogueiro que quer ganhar renda com alguém que já está procurando referências em nosso blog.

Nesta ocasião vou compartilhar um tutorial sobre como criar um widget de caixa de doação para mostrar a caixa e esconder no blogger.

O widget que vou ensinar aqui, também pode ser alterado em termos de frases, ícones, e assim por diante. Vamos aprender como faz?

Como criar um widget de caixa de doação no Blogger

Antes de continuar para o tutorial, seria bom você fazer um link que será doado, como PayPal, Nubank, Banco Inter, e assim por diante.

Se você já tem o link e também o número da conta a ser doado, então basta olhar o tutorial abaixo cuidadosamente para que não haja erros.

Antenção: antes de fazer isso, você deve primeiro fazer backup do modelo que você usa.

1. Faça login em suas respectivas contas de Blogger.

2. Próximo selecione o tema » Editar HTML » em seguida, procure o código » e coloque o css abaixo logo acima do código. ]]></b:skin>

/* Caixa de Doação por wallacefernandes.com.br */
.mb-dnt-box{position:relative;max-width:500px;background-color:#fefefe;box-shadow:0 5px 12px -2px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin:20px 0; display:flex;align-items:center;font-size:13px;transition:all .2s ease;}  
.mb-dnt-box .mb-dnt-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px; background:#f1f1f0;border-radius:5px;border:1px solid transparent}
.mb-dnt-box .mb-dnt-txt{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
.mb-dnt-box .mb-dnt-sw{position:absolute;padding:1px 3px;margin-top:-80px;margin-left:230px;width:30px;height:30px;background:var(--linkB);border-radius:50%;border:1px solid #eceff1;transition:all .2s ease;z-index:3}  
#mb-check-dnt:checked ~ .mb-dnt-box{padding-top:200px}
#mb-check-dnt:checked ~ .mb-dnt-box .mb-dnt-hidden{visibility:visible;opacity:1}
#mb-check-dnt:checked ~ .mb-dnt-box .mb-dnt-sw{margin-top:-450px}
#mb-check-dnt:checked ~ .mb-dnt-box .mb-dnt-sw svg{transform:rotate(180deg)}
#mb-check-dnt,#mb-check-bnk{display:none}
#mb-check-bnk:checked ~ .mb-dnt-pp{visibility:hidden;opacity:0;position:relative}
#mb-check-bnk:checked ~ .mb-dnt-rk{visibility:visible;opacity:1;position:absolute;margin-top:-43px}
.mb-dnt-hidden{position:absolute;width:calc(100% - 30px);background-color:transparent;margin:-250px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}
.mb-dnt-hidden h2{font-size:20px;margin:10px auto;text-align:center}
.mb-dnt-hidden span{font-size:17px;color:#767676;margin-left:35px}
.mb-dnt-trn,.mb-dnt-pp,.mb-dnt-rk{display:inline-block;width:calc(100% - 30px);border:1px solid #999;background:#fefefe;border-radius:3px;margin:10px 25px 0;padding:10px;transition:all .2s ease}
.mb-dnt-pp{position:absolute}
.mb-dnt-rk{margin:10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease;}
.mb-dnt-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
.mb-dnt-sw svg,.mb-dnt-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
.mb-dnt-svg.line{stroke:#767676}
@media screen and (max-width:500px){.mb-dnt-box .mb-dnt-sw{margin-left:160px}}
@media screen and (max-width:455px){.mb-dnt-box .mb-dnt-sw{margin:-90px auto auto 130px}#mb-check-dnt:checked ~ .mb-dnt-box .mb-dnt-sw{margin-top:-460px}}
<!--[ Fim da Caixa ]-->

3. Então você pode colocar o html abaixo logo abaixo do código <data:post.body/> geralmente existe mais de um dependendo do modelo usado.

<!-- Caixa de Doação -->
<input id='mb-check-dnt' type='checkbox'/>
<div class='mb-dnt-box'>
<label class='mb-dnt-sw' for='mb-check-dnt'><svg viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg></label>
<div class='mb-dnt-icon'><svg class='mb-dnt-svg line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18 8h1a4 4 0 0 1 0 8h-1'/><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/><line x1='6' x2='6' y1='1' y2='4'/><line x1='10' x2='10' y1='1' y2='4'/><line x1='14' x2='14' y1='1' y2='4'/></svg></div>
<div class='mb-dnt-hidden'>
<h2>Onde você quer doar?</h2> 
<label class='mb-dnt-trn' for='mb-check-bnk'>
<svg class='mb-dnt-svg line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'/><line x1='1' x2='23' y1='10' y2='10'/></svg>
<span>Transferência bancária</span></label>
<input id='mb-check-bnk' type='checkbox'/>
<a class='mb-dnt-pp' href='URL_PIX_DO_BANCO' target='_blank'>
<svg class='mb-dnt-svg line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18 8h1a4 4 0 0 1 0 8h-1'/><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/><line x1='6' x2='6' y1='1' y2='4'/><line x1='10' x2='10' y1='1' y2='4'/><line x1='14' x2='14' y1='1' y2='4'/></svg>
<span>Fazer um Pix</span></a>
<div class='mb-dnt-rk'>
Banco nome - Agencia / Conta - 648xxxx
</div>
</div>
<div class='mb-dnt-txt'>
Presenteie o criador com café fazendo uma pequena doação. clique no ícone de seta acima
</div>
</div>
<!-- Donate Box End -->

Não se esqueça de alterar algumas entradas do html acima com suas informações de banco, url do pix, e frases para convidar as pessoas para doar.

Feito tudo isso, agora é só clicar em salvar o modelo e conferir o resultado abrindo qualquer postagem no seu blogger que ela aparecerá logo no final do conteúdo.

Ela ficará conforme imagem abaixo
criar-widget-de-doacao-no-blogger

Conclusão

Esse é o tutorial sobre como criar um widget de caixa de doação que você pode aplicar, se há dúvidas e você não compreendeu o tutorial.

Basta comentar na seção de comentários abaixo, se você estiver disposto a fazer uma doação, saiba que qualquer valor será bem vindo! Obrigado! =D

Radialista, Ator, Locutor, e produtor de audio. Já são mais de 15 anos de experiência na área da comunicação. Saiba mais

Postar um comentário

O site mantém sistema de comentários na maioria dos artigos para estimular a troca democrática de informações e aprofundar a discussão sobre assuntos que frequentam o blog. Saiba Mais