Mélusine et Lut m'ont souvent demandé comment mettre un système de numérotation des pages qui permette à ce qu'en cliquant par exemple sur le numéro 5, on aille à la page 5 du blog (le 5ème article récemment publié).
Je suis tombé ce matin sur une astuce de
Mohamed Rias qui permet d'arriver à cette fin. Voyez l'image pour vous en convaincre.
Vous pouvez aussi voir l'astuce en live sur
Blogger accessories.
Comment intégrer la numérotation des pages pour naviguer au travers des articles sur Blogger ?
1. Se connecter sur son compte, puis aller sur "mise en page", "modifier le code html" (pas besoin de cocher sur "développer des modèles de gadget".
2. Mettre le code suivant avant la balise ]]></b:skin>
.showpageArea {font-size: 11px;
width:470px;background:
url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top; padding-top:10px;padding-bottom:10px;padding-right:15px;padding-left:30px; color:#003366;text-align:left;
}
.showpageArea a {
color:#0F0;text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
color:#0F0;border:1px solid #FFF;margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
color:#FE8314;border:1px solid #0071A5;background-color:#FFF;}
.showpagePoint {
color:
#FE8314;
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:
#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
color:#
FE8314;
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#cc0000;
}
Vous pouvez enlever l'url de l'image si vous préférez ne pas la mettre.
3. Trouvez la portion les codes suivants :
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>4. Mettre la partie ci-après juste après </b:section>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 2; var displayPageNum = 3; var upPageWord = 'Précedente'; var downPageWord = 'Suivante';var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/"></a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpage"> Pages ('+(postNum-1)+'): </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script><div style='text-align:right;font-size:10px;color:000000;margin-top:15px;'> <a href="http://rias-techno-wizard.blogspot.com/">Blogger accessories</a><a href='http://blogger-au-bout-du-doigt.blogspot.com/2008/08/numeroter-les-pages-sur-blogger.html'>Obtenir ce Widget ~ </a>
</div>Dans le code ci-haut, vous pouvez changer les lignes en rouge à votre souhait.
1 : var pageCount =
2;
Le chiffre en rouge représente le nombre d'article qui sera affiché sur une page. Vous pouvez changer le nombre pour afficher plus de 2 articles sur la page ou moins de 2 articles (1, pas O).
2 : var displayPageNum =
3;
Le chiffre en rouge ci-haut représente le nombre de page à afficher entre Précedente et suivante.
Par exemple, si vous choisissez 7, vous aurez quelque chose du genre :
Précendente 1,2,3,4,5,6,7 Suivante
3 :
var upPageWord = 'Précedente'; var downPageWord = 'Suivante
Vous pouvez changer le terme précedente et suivante par ceux que vous désirez.
Enregistrez le modèle.
Si vous avez mis un Widget libellé, vous remarquerez que tous les articles s'afficeront sur les pages de libellé quand on clique sur l'un d'eux. Pour remedier à ce problème :
5. Cocher sur la case "Développer des modèles de gadget"
6. Trouver la ligne de code suivante :
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
Dans ce widget, trouvez la portion de suivante :
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
Remplacez le code ci-haut par celui-ci :
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=2"'>
<data:label.name/>
<span dir='ltr'>(<data:label.count/>)</span>
</a>
</b:if>
Le chiffre en rouge représente le nombre d'article à afficher sur une page libellé. Changez-le par un autre si vous désirez et enregistrez le modèle.
A+
