Melusine m’avait demandé comment mettre un calendrier interactif sur blogger de tel sorte qu’en cliquant sur une date donné, les messages publiés à cette date puisse s’afficher. Après avoir cherché quelque temps sur le net, je suis tombé sur ce calendrier confectionné par Phydeaux, il y a deux semaines. Après l'avoir testé sur Test pour I.D.R.I, et vu qu'il marche, je peux mainetant le publié. Mais, il ne peut être intégrer que dans le nouveau blogger. Le modèle classique ne sont pas supporté .
1ère étape : Allez dans votre modèle, puis sur “ Modifier le code HTML ” et laissez “ Développer de modèles de gadget ” NON SELECTIONNE (Par défaut c’est toujours comme ça).
Recherchez dans votre modèle le code suivant :
Sélectionnez-le et remplacez-le par celui-ci (Copiez puis collez le code ci-après à la place du premier)
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->
<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configurez votre widget – Modifier l’archive – liste condensée – Le nouveau message d’abord – Choisissez n’importe quel format pour le mois et l’année
</b:includable>
<b:includable id='interval' var='intervalData'>
Configurez votre widget – Modifier l’archive – liste condensée – Le nouveau message d’abord – Choisissez n’importe quel format pour le mois et l’année </b:includable>
</b:widget>
]]></b:skin> et </head> juste avant la balise <body>
]]></b:skin>
Mettez le code à ce niveau
</head>
Voici ce qu'il faut mettre :
<!-- Blogger Archive Calendar -->
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];
// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();
//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}
function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
var link = entry.link[0].href;
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);
}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}
function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
}
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
}
function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}
//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'></script>
<!-- End Blogger Archive Calendar -->
/* Footer
----------------------------------------------- */
</head>
Voici un exemple pour avoir un calendrier de couleur comme en image au début (je l'ai choisi car convenant le mieux au blog de melusine 123 )
/* Calendar
----------------------------------------------- */
/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0}
/* The Archive Select Menu */
#bcaption select {}
/* The Heading Section */
table#bcalendar thead {}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #000; font-family:Tahoma; font-weight:normal;}
/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;}
/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#FFFF99;border:1px outset #000!important}
/* Table Footer Navigation */
table#bcNavigation {width:95%;}
table#bcNavigation a {text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}
6. Allez sur "éléments de la page" et configurez le widget "Archives de blog" de la manière suivante :
Pour le format de la date, vous pouvez mettre n'importe quel format. Choissisez d'afficher les nouveaux messages premier.
Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.
Je me demandais si tu savais mettre juste avant le titre de chaque billet, le titre vers le billet précédent et vers le billet suivant.
RépondreSupprimerJe te mets un exemple parce que je ne sais pas si je suis très claire.
http://www.guim.fr/blog/2007/10/nokia-se-moque-.html
Tu vois, il a le lien vers l'article précédent, l'article suivant quand il y en a un et la page home.?
Je te répond par mail pour te montrer comment c'est fais sur le blog de guim. Il y a aussi possibilité de le faire sur blogger, sauf que le titre ne s'afficheront pas. on pourra juste mettre post précédent, suivant, etc.
RépondreSupprimergrâce à toi, j'ai un article en chantier.
Je cherchais ce calendrier depuis des lustres.
RépondreSupprimermerci merci ton blog est encore et toujours excellent :)
salut j'ai suivi tes instructions mais y a un probleme de taille
RépondreSupprimerfinalement tout est ok donc encore merci beaucoup :$
RépondreSupprimerJ'aurais vraiment été peiné si tu n'était pas parvenu à installer ce calendrier.
RépondreSupprimerL'article a été spécialement écrit pour toi.
Bon bonne chance avec ton blog.
Super t Plein d'astuces gebials ! Bravo encore !on blog !!
RépondreSupprimererf, moi ca marche pas :/
RépondreSupprimerEn fait, le code s'enlève tout a suite après que je l'ai mit. Je fais enregistrer, je vais voir si ca marche, et quand je reviend dans le code html pour voir ce qui cloche je vois qu'il n'y ai plus !
help ?
(sinon ton blog devient de mieux en mieux ! )
Je crois que tu dois être entrain de sélectionner "Développer des modèles de gagdet". Ne le fais pas.
RépondreSupprimernan, la case est décoché.
RépondreSupprimerA noter que ca foire sur mon blog-test mais aussi sur mon vrai blog, qui a lui un template de base...
Là, je ne vois pas vraiment quoi te dire mon cher PelOmar.
RépondreSupprimerRefait toute la démarche du début à la fin sans trop de presser et de façon méticuleuse, j'espère que ça ira.
S'il te plaît, juste une précision, l'essaye tu sur des modèles 3 colonnes ?
Bonjour Rodney,
RépondreSupprimerJe suis depuis peu passée de Canalblog à Blogger, par contre je n'arrive pas à installer un calendrier de navigation (et ça me manque) car dès que je veux enregistrer le nouveau modèle avec tous les codes que tu donnes, ce message apparaît :
Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : The reference to entity "alt" must end with the ';' delimiter.
Merci si tu peux m'aider
Bonjour Rodney,
RépondreSupprimerJ'ai un gros problème, c'est que je n'arrive pas à installer la calendrier de navigation sur mon blog. J'ai bien mis tous les codes que tu as indiqués et là où il fallait et quand je veux enregistrer le modèle, ça me met un message d'erreur.
Pourrais tu m'aider
Agnès
Bon bin j2 mois plus tard je galère pareil qu'Agnès. Pourtant 'ai tout bien mis au bon endroit... J'ai droit à ça comme message d'erreur : "Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
RépondreSupprimerMessage d'erreur XML : The reference to entity "alt" must end with the ';' delimiter."
J'ai le même message d'erreur qu'Agnès et Barbara. Que faut-il faire ?
RépondreSupprimerCe commentaire a été supprimé par l'auteur.
RépondreSupprimerje pnse que c'est parce que vous n'avez pas décoché "Développer de modèles de gadget"
RépondreSupprimerNon ce n'est pas ça le problème, la case est bien décochée par défaut.
RépondreSupprimermerci JC
Barbara
Bonjour à tous et bravo pour ce site fourmillant de bonnes idées.
RépondreSupprimerPour celles et ceux avec le fameux message d'erreur : The reference to entity "alt" must end with the ';' delimiter.
il vous faut accoler au caractère & les 4 caractères suivants amp;
Sinon il y a mauvaise interprétation du code.
L'erreur peut se reproduire, non seulement avec &alt mais avec &callback. Faites la même manipulation, ajouter amp; juste devant &
bonjour, est ce qu'il faut accoler les amp; à chaque fois qu'on rencontre ce caractère dans le template?
RépondreSupprimer@20
RépondreSupprimerNon, à ma connaissance, il ne faut ajouter amp; au caractère & qu'avec les entités &alt et &callback.
bonjour,
RépondreSupprimerchez moi non plus çav ne marche pas.
à partir de l'étape 3 ça coince pour moi car impossible de trouver :
RépondreSupprimer/* Footer
----------------------------------------------- */
ou encore juste avant
"machin avec b et skin" (j'mets ça comme ça sinon il veut pas prendre mon commentaire !!!)
et machin avec head..
ni l'un ni l'autre... alors??? comment faire...
bonjour j 'ai crée un blog et je souhaiterais mettre ce calendrier. Quand je fais la première étape, je ne vois pas le texte à trouver. Comment savoir si la version de blog que j'utilise est compatible avec ce calendrier ?
RépondreSupprimermn blog c est http://leblogdecdf.blogpsot.com
d'avance merci
Pour avoir le blog archive, tu dois nécessairement déjà insérer un widget archive du blog. Pour cela, va sur mise en page, tu ajoute un nouvel élément "archive du blog" et puis tu reviens suivre les instructions données ici
RépondreSupprimer@ leblogdecdf : au fait, qui t'a fait ton blog ?
RépondreSupprimerJe le demande parce que la structure de l'url des articles est très différentes des la majorité des blogs sur blogger. Alors que les urls des nos articles ont l'adresse du blog, suivi de l'année, du mois puis de 40 premiers mots contenus dans l'article, par exemple ça :
http://blogger-au-bout-du-doigt.blogspot.com/2007/10/mettre-un-calendrier-de-navigation.html
les urls de tes articles ont l'adresse du blog, la première catégorisation (document), la deuxième (doctrine), puis le titre constitué avec un sous tiré au lieu d'un tiré. exemple :
http://leblogdecdf.blogpsot.com/Documents/Doctrines/Doctrines_Introduction.htm
Dis nous comment tu as fais ça, cela te vaudra un article avec un lien vers ton blog sur celui-ci.
c'est moi qui ai fait ce blog mais je n'ai rien fait de particulier. J'ai juste choisi un modèle et j'essaie de l'améliorer de jours en jours
RépondreSupprimerBonjour Rodney
RépondreSupprimerPeux tu m'aider?
j'essaie de mettre l'agenda sur un blog 3 colones mais j'ai le problème décrit par PelOmar ( octobre 2007),le premier code ( celui du bloc archive ) ne s'enregistre pas. existe-t-il une solution ?
merci pour ta réponse
Je trouve l'installation de ce calendrier trop compliqué pour moi! J'ai réussie à intégrer plusieurs gadgets que tu as suggéré Rodney, en suivant tes instructions ingénieuses, mais celui-ci... oufff! J'ai trop peur de faire une gaffe! :P
RépondreSupprimerJ'ai cependant trouvé un petit gadget intéressant pour ceux qui ne veulent pas trop se compliquer la vie... il s'insère simplement dans un gadget JavaScript de Blogger. Pour ceux qui voulaient le titre de l'article au lieu de la date... c'est parfait!
Le bidule en question est sur ce site:
http://www.feedflash.net/index.fr.php
Tu peux passer jeter un coup d'oeil sur mon blog!
http://passionhorticulture.blogspot.com
Ce commentaire a été supprimé par l'auteur.
RépondreSupprimer