• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil » Tutoriels » Comment diviser un article en plusieurs pages sur Blogger

Comment diviser un article en plusieurs pages sur Blogger

Màj le 17 juin 2019

Vous cherchez un moyen pour diviser votre article en plusieurs pages sur blogger? Aujourd’hui je vais vous montrer comment le faire. Il y a plusieurs raisons pour faire la fraction ou bien la division d’un article en plusieurs pages, la première est tout simplement un article trop longue peut décourager le lecteur , la deuxième raison est la réduction du taux de rebond qui est un facteur important pour l’amélioration de votre Seo.

Comment diviser un article en plusieurs page?

Donc, voici les étapes que vous devez appliquer pour diviser un poste en plusieurs pages. Tout d’ abord, Connectez – vous à votre compte sur Blogger. Ensuite , assurez – vous que le script jQuery est ajouté dans votre modèle et pour la vérification; aller à Modèle >> Modifier le code HTML .

Ensuite , vous devez rechercher le plugin jquery dans votre thème, ce plugin ressemble à quelque chose comme ci – dessous . Si vous ne pouviez pas voir ce script dans votre modèle copiez simplement le code ci-dessous et coller le sous la balise <head> .

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

Maintenant , dans votre thème, recherchez le  ]]>  tag, et juste au- dessus coller le code de style CSS suivant:

.post-pagination {
    margin: 40px auto;
    text-align: center;
    width: 100%;
 float:left;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}

Encore une fois dans le même modèle, rechercher </head> et juste au- dessus coller le code jQuery suivant :

<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('background','#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');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#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');
return false;
});
});
</script>

Après avoir collé le code, cliquez sur le bouton Enregistrer le modèle pour enregistrer les modifications.

Maintenant, cliquez sur le bouton Nouveau message pour créer un nouvel article et passer sous l’ onglet HTML puis y coller le code ci – dessous.

article-diviser-plusieurs-pages-blogger

<div class="content_1">
 <strong>Ajouter contenu ici</strong> 1
</div>
<div class="content_2" style="display: none;">
 <strong>Ajouter contenu ici</strong> 2
</div>
<div class="content_3" style="display: none;">
 <strong>Ajouter contenu ici</strong> 3
</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>

Après cela, Remplacer Ajouter contenu ici avec le contenu de votre article divisé en trois parties .

Le code ci – dessus va diviser votre message en trois pages.


Plus de cours et exercices corrigés :

  • Supprimer le champ URL du site Web du formulaire de commentaire WordPress
  • Comment changer le nom d’utilisateur Admin dans Wordpress (3 méthodes)
  • Ajouter une icône de site (favicon) à WordPress facilement
  • 2 méthodes pour nettoyer votre base de données des tables inutilisées
  • Comment déplacer le dossier médias de WordPress vers un sous-domaine?

Interactions du lecteur

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Barre latérale principale

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des cours et exercices corrigés Gratuitement.

Articles récents

  • Limiter la longueur minimale et maximale ‎de vos commentaires sous Wordpress
  • Antispam Bee : meilleure configuration à faire
  • 7 outils numériques pour organiser votre travail
  • Top 4 meilleurs plugins RSVP gratuits pour WordPress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site

© 2022 ·Wpcours.com · Mentions · Contact