Como dividir sua postagem em várias páginas no Blogger

 Você está procurando maneiras de dividir suas postagens em páginas? Você pode ter visto alguns blogs populares que dividiram seus posts longos em páginas para manter o interesse dos usuários e isso também ajuda a reduzir a taxa de rejeição . Hoje, neste artigo, mostraremos como dividir suas postagens em várias páginas no Blogger - Paginação de postagem.


Por que dividir qualquer postagem em páginas?

Como já mencionamos acima, ele é usado para aumentar o interesse dos leitores, se o seu post for muito longo, poderá deixar o leitor entediado. Em segundo lugar, também é bom para os motores de busca, pois ajuda os robôs dos motores de busca a rastrear as páginas de forma mais eficaz e fácil.

Portanto, se suas postagens forem muito longas, você deverá usar a paginação de postagem ou quebrar essa postagem. E, aqui hoje vamos ensinar a você essa técnica incrível para dividir as postagens do blogueiro em várias páginas.



Como dividir postagens em várias páginas:

Então, aqui estão as etapas que você precisa aplicar para quebrar a paginação de qualquer postagem do blogger. Antes, seguindo para os passos, você pode conferir a demo aqui .

Em primeiro lugar, faça login na sua conta do Blogger. Em seguida, certifique-se de que o script jquery seja adicionado ao seu modelo e para verificação; vá para Modelos >> Editar HTML .

Então você precisa procurar o plugin jquery que estaria em <head> em seu modelo e seria algo como abaixo de um. Se você não conseguiu ver esse script em seu modelo, simplesmente copie o abaixo e cole-o sob o comando <head>.


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


Agora no template, procure pela tag ]]></b:skin> , e logo acima cole o seguinte código de estilo CSS:


.post-pagination {
    margin: 40px auto;
    alinhamento de texto: centro;
    largura: 100%;
flutuar: esquerda;
}
.button_1, .button_2, .button_3 {
    borda: 2px sólido #f4655f;
    peso da fonte: 900;
    preenchimento: 6px 36px;
    cor:#f4655f;
    transição:facilidade 0,69s !importante;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: nenhum repeat scroll 0 0 #f4655f;
    cor: #ff;
    decoração de texto: nenhuma;
}



Novamente no mesmo template, procure por </head> e logo acima cole o seguinte código jQuery que permite que seu blog divida os posts em páginas:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this ).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','# F4655F');
jQuery('.button_3').css('fundo','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
retorna falso;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3' ).fadeIn('lento');
jQuery(this).css('fundo', '#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
retorna falso;
});
});
</script>


Após colar o código, clique no botão Salvar modelo para salvar as alterações.

Agora, clique no botão New Post e mude para a guia HTML e cole o código abaixo lá.

<div class="content_1">
Adicione conteúdo aqui
</div>
<div class="content_2" style="display: none;">
Adicione conteúdo aqui
</div>
<div class="content_3" style="display: none;">
Adicione conteúdo aqui
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="# ">2</a>
<a class="button_3" href="#">3</a>
</div>


Depois disso, substitua Adicionar conteúdo aqui pelo corpo da postagem ou conteúdo que você deseja para uma página específica. Este código dividirá um post em três páginas.

Quando terminar, clique no botão Publicar para tornar sua postagem ao vivo para o público.

O código acima dividirá sua postagem em três páginas; se você deseja aumentar ou diminuir o número de páginas, você deve ter conhecimentos básicos de HTML ou então deixar suas dúvidas na caixa de comentários. Voltarei às suas dúvidas e o ajudarei nisso.

Foi útil? Se foi, então não se esqueça de compartilhar este artigo com seus outros amigos.


Postar um comentário

Postagem Anterior Próxima Postagem