🔊 Audima: os visitantes do seu site podem ouvir os posts

Estou apaixonada por esse recurso que deixou todos os meus milhares de posts audíveis com um simples código. Provavelmente você já viu, neste ou em outro site, o player com o texto Ouça este conteúdo.

O cadastro do seu blog é feito gratuitamente pelo site: audima.co/startnow. Existe uma versão paga também, mas eu estou testando apenas a versão gratuita que funciona muito bem.

Depois que você preenche todos os dados, o Audima vai passar o código HTML que insere o JavaScript no seu blog:

<!-- Start Audima Widget Injection --> <div id="audimaWidget"></div> <script src="//audio.audima.co/audima-widget.js"></script> <!-- End Audima Widget Injection -->

Inserindo no Layout do Blogger

No Blogger, você pode adicionar como widget/gadget lá no Layout, posicionando acima do post.

Eu consegui centralizar o player escrevendo style="margin-left:auto; margin-right:auto;" dentro da <div>:

<div id="audimaWidget" style="margin-left:auto;margin-right:auto;">

Também consegui tirar a borda com border:0 !important;:

<div id="audimaWidget" style="border:0 !important; margin-left:auto;margin-right:auto;">

Para fazer as personalizações direto na folha de estilos, personalize o seguinte seletor:

.audima-position-default#audimaWidget {border:0 !important; margin-left:auto; margin-right:auto;} </b:skin>

Inserindo no Tema HTML do Blogger

Em um dos meus blogs, o template não aceitou o audima acima do post, o player ficou, estranhamente, atrás do post, então eu tive que adicionar no topo da coluna da direita.

Outra opção é adicionar direto ao código fonte. Nesse caso sugiro procurar por <div class='post-header-line-1'> e adicionar o código dentro dela:

<div class='post-header-line-1'> <b:if cond='data:blog.pageType == "item"'> <!-- Start Audima Widget Injection --> <div id='audimaWidget'> <script src='//audio.audima.co/audima-widget.js'> </script> </div> <!-- End Audima Widget Injection --> </b:if> </div>

Quando essa classe aparece duas vezes em seu código, geralmente significa que uma se refere ao template desktop e outra ao template mobile, por isso você pode inserir duas vezes.

Se seu template não tiver essa classe, você pode inserir no início de <div class='post-body'>, para aparecer no início do post na versão desktop. Na versão mobile vai aparecer no rodapé:

<div class='post-body'> <!-- Start Audima Widget Injection --> <div id='audimaWidget'> <script src='//audio.audima.co/audima-widget.js'> </script> </div> <!-- End Audima Widget Injection --> </div>

Você pode inserir em outra parte do código ou até mesmo em outra posição dentro do post, isso só depende do seu domínio de HTML e do conhecimento do código do seu próprio blog.

Até mais!

Foto: Pixabay