Par : Zak Mccry décembre 28, 2012


Pour obtenir cette effet de page sur blogger au lieu de l'ancien système 
"message plus ancien" et "plus récent" suivez ces différentes étapes

 Étape 1:

-connectez vous sur votre compte blogger puis allez dans présentation puis sur modifier le code HTML

ATTENTION !  
Sauvegarder en téléchargeant le modèle dans son intégralité (en cas de soucis)


Grâce à la touche CTRL+F 


  • Localiser cela:
]]></b:skin>

  • Puis collez ceci juste avant:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}



Ensuite Sauvegarder votre modèle

Étape 2

  • Retourné sur Présentation puis Ajouter un Gadget


  • HTML/JAVA SCRIPT


  • Dans ce Gadget collez le code suivant:
<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=2;
var displayPageNum=4;
var upPageWord ='Précédent';
var downPageWord ='Suivant';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';





for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

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+'&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){
  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">'+thisNum+'</span>';
}else{
 if(p==0){
   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++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';


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;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);



var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
 }

 if(title!='') postNum++;
 htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&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){
  upPageHtml = labelHtml + upPageWord +'</a></span>';
 }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
 if(p==0){
  html = labelHtml+'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++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

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 type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
 document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>


Étape 3



  • Changez les éléments en bleu à votre convenance exemple:
Changez le 2 en chiffres que vous voulez cela correspond au nombre d'articles par pages
Changez le 4 en chiffres que vous voulez cela correspond au nombre de pages a affiché en bas
Changez le Suivant en NEXT

{ 12 Commentaires... Lis les commentaires ou commentes }

  1. Merci beaucoup! De tout les codes que j'ai essayé seul le votre fonctionne! Merci.

    RépondreSupprimer
  2. Mais de rien

    d'autre code HTML pour embellir votre blog sont à venir ici n'hésitez pas a repassé

    et a laissé votre blog je pourrais le mettre dans les blog amis !

    encore merci

    RépondreSupprimer
  3. Bonjour, Merci beaucoup pour ce code, par contre est-il possible de modifier la taille des numéros et l'espacement entre eux ?
    Merci

    RépondreSupprimer
  4. Bonjour, alors j'ai cherché une solution pour toi (je te tutoie) vue que j'ai remarqué que nous avons le même age lol alors j'ai vue ton blog tu la bien intégrés mais logiquement il est d'origine censés être espacé de façon plus espacé c'est parfois les templates qui impact sur le widget mais cela dit je t'ai trouvé une solution pourrais te plaire.




    PS: je l'ai moi même ajouté comme tu peux le voir ici il fonctionne
    PS2: j'ai mis ton blog dans les amis :p
    PS3: je ferais paraitre ce type de code en article car posté le code HTLM directement dans le commentaire ne marche pas et je mettrais en avant les modifications possibles dans l'article

    (couleurs taille etc etc)

    RépondreSupprimer
  5. hello Oh c'est super sympa, merci beaucoup

    RépondreSupprimer
  6. tu me dira si tu arrive sur la nouvel version et si tu aime :p

    RépondreSupprimer
  7. ce sera publié sur cette page ? Merci en tt cas

    RépondreSupprimer
    Réponses
    1. c'est déjà fait :) tu la sur l'accueil si tu veux c'est

      Numérotation de page sur blogger 2

      Supprimer
    2. Je suis vraiment désolée, je ne comprends pas très bien, dans mon cas je veux juste espacer les chiffres par rapport à ce que j'ai déjà, je ne veux pas de cadre autour de chaque chiffre ni d'autres couleurs...

      Supprimer
    3. Justement comme je le disais (sur le premier code il y'a justement des cadres autour)

      mais les templates (c'est a dire les modèles choisis modifie cela (retire le cadre et colle un peu le numéro des pages))

      (donc non sur celui là ce n'est pas possible mais tu peu utilisé le nouveau et rendre le cadre transparent par rapport a ton propre fond par exemple)

      Supprimer
    4. ah, je viens donc de supprimer les codes de la première version à la fois ds le css et dans le widget et j'ai juste ajouté un widget avec le nouveau code mais ça ne marche pas :(

      Supprimer
    5. Logiquement si tu a supprimé l'ancien dans le css et dans le widget sauvegarde et ensuite suis la manipulation pour le second code

      et si tu veux remplace les 191970 par le mot transparent et dit moi si sa marche et si ça te convient mieux :)

      Supprimer

Merci à vous !

- Copyright All right reserved by ZAK MC-CRY - ZMC N'héberge aucune vidéo. © Zak Mc-cry Gaikokujin - Powered by ZAK MC-CRY