Dans le tutoriel d'aujourd'hui, je vous propose une pagination numérotée au design moderne qui vous permettra d'une part d'améliorer la navigation dans votre blog et d'autre part de résoudre certains problèmes liés à l'affichage de la pagination ou des articles dans les pages de libellé et de catégorie.
Donc, si vous rencontrez des problèmes d'affichage de votre pagination actuelle dans les pages de libellé ou que le nombre d’articles affiché ne correspond pas à celui qui est attribué dans les options de configuration des articles, les étapes qui suivent vous permettront de corriger ce problème.
Installer la nouvelle navigation dans Blogger
Insérer le code HTML/JavaScript
Connectez-vous à Blogger
Cliquez sur "Thème"> "Modifier le code HTML"
Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.
Dans votre code HTML, cliquez à l'intérieur du code et appuyez sur Ctrl et F en même temps, ou (Cmd et F pour Mac). Une petite barre de recherche doit apparaître en haut.
Cherchez la balise suivante :
<b:includable id='post' var='post'>
Collez ensuite le code suivant juste au-dessus de la balise précédente.
<b:includable id='page-navi'>
<div class='pagenav'>
<script type='text/javascript'>
/* JS Pagination - Univers Blogger
*/
var pageNaviConf = {
perPage: 8,
numPages: 5,
firstText: "Première page",
lastText: "Dernière page",
nextText: "Suivant",
prevText: "Précédente"
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var
m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var
g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var
n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var
d=2;d<=e;d++){var
c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var
d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var
b='<span class="pages">Pages '+e+' of '+a+"</span>
";if(c>1){b+='<a
href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a
href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span
class="current">'+i+"</span>"}else{b+='<a
href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a
href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a
href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var
b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var
d=b.indexOf("/search/label/")+14;if(d!=13){var
c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script
type="text/javascript"
src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script
type="text/javascript"
src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
<div class='clear'/>
</div>
</b:includable>
Dans le code suivant :
var pageNaviConf = { perPage: 8,
Le chiffre 8 correspond au nombre d'articles qui seront affichés sur chaque page. Vous devez le modifier avec le nombre d'articles qui figurent dans les options de configuration des articles dans la section mise en page.
Vous pouvez choisir le nombre d'articles à afficher dans chaque page à condition d'effectuer les mêmes modifications dans la page de configuration de vos articles.
Maintenant, cherchez le code suivant :
<b:include name='nextprev'/>
Remplacez-le avec ce code :
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/> <b:else/>
<b:if cond='data:blog.pageType ==
"archive"'><b:include
name='page-navi'/></b:if> <b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/> </b:if>
</b:if>
La dernière étape consiste à personnaliser notre pagination avec quelques balises de style CSS.
Insérer le code CSS
Cherchez le code ]]></b:skin> et insérer le code CSS suivant juste au-dessus :
/* CSS Page Navigation */
.pagenav {
clear: both;
margin: 10px 0 10px;;
padding: 15px;
text-align: left;
text-align: center;
letter-spacing: 2PX;
font-weight: 400;
font-size: 12px;
color: #fff;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif,Georgia,serif;
}
.pagenav span, .pagenav a {
padding: 10px 15px;
display: inline-block;
background-color: #fff;
color: #2c82c9;
font-size: 15px;
margin: 0px 4px 8px 4px;
transition: all .2s ease;
border-radius: 10px;
}
.pagenav .pages {
background-color: #2cc990;
color: #fff;
transition: all .2s linear;
}
.pagenav a:hover {
background-color:#2cc990;
color:#fff;
transition: 0.5s
}
.pagenav .current {
background-color:#2c82c9;
color:#fff;
}
.pagenav .pages {display:none;}
Vous pouvez personnaliser les couleurs afin qu’ils soient assortis aux couleurs de votre thème à l'aide des outils d'inspection disponible dans les navigateurs tels que chrome et Firefox.
Résoudre les problèmes liés au nombre d’articles affiché dans les pages de libellés
Dans cette section, on vous proposera une solution à un problème fréquent dans les thèmes Blogger. En effet, il se peut que le nombre d'articles affiché dans les pages de libellés ou de catégories soit supérieur à celui que vous avez spécifié lors de la configuration des articles.
Supposant que vous avez choisi d'afficher 8 articles dans la fenêtre de configuration des articles dans la section mise en page.Si vous cliquez sur un libellé ou catégorie et que le nombre d'articles affiché ne correspond pas à celui indiquer dans la configuration des articles (8 articles dans notre exemple), alors suivez les étapes qui suivent pour résoudre ce problème.
Cliquez sur "Thème"> "Modifier le code HTML"
Dans votre code HTML, cliquez à l'intérieur du code et appuyez sur Ctrl et F en même temps, ou (Cmd et F pour Mac). Une petite barre de recherche doit apparaître en haut.
Cherchez le code suivant :
expr:href='data:label.url
Vous devez le remplacer à chaque fois (vous allez le trouver dans plusieurs endroits) avec le code ci-dessous :
expr:href='data:label.url+"?&max-results=8"
Changez maintenant le chiffre 8 avec le nombre d'articles que vous souhaitez voir afficher dans les libellés. Si par exemple vous souhaitez afficher 6 articles, votre code devrait ressembler à ça :
expr:href='data:label.url+"?&max-results=6"
Enregistrez votre thème et visualisez les résultats
Voilà ! C’est tout pour ce tutoriel consacré à la création d'une pagination simple et élégante dans Blogger et la résolution des problèmes fréquents de navigation.
Merci à vous et n'hésitez surtout pas à partager ce tutoriel sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.