Tout d'abord, il faut ajouter un widget via l'interface de présentation :
Ensuite copier/coller ce code html/javascript dans le gadget "Configurer HTML/JavaScript" :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-fr.js"></script>
<script>
var archiveName = "archive";
/* nom de la page des archives, exemple : http://my.blogspot.com/2010_12_24_archive.html */
var theme = "humanity"; /* default : "base" */
/* pour changer la couleur du calendrier indiquer ici le nom du theme jquery que vous trouvez ici : http://jqueryui.com/themeroller/ (onglet "Gallery) */
var thisMonth, thisDay, thisArchiveDate;
var thisDomain = document.location.protocol+'//'+document.location.host + '/';
var thisMonthNbPost = 0;
$(document).ready(function(){
var link = $("<link>");
link.attr({
type: 'text/css',
rel: 'stylesheet',
href: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/'+theme+'/jquery-ui.css'
});
$("head").append(link);
var currentUrl = document.location.href;
var currentDate = null ;
var indexDateFromUrl = currentUrl.indexOf("_"+archiveName+".html");
if(indexDateFromUrl!=-1){
currentDate = currentUrl.substring(indexDateFromUrl-10,indexDateFromUrl);
}
$("#datepicker").datepicker({
onSelect: function(dateText, inst) { document.location = "/" + dateText + "_"+archiveName+".html"; },
dateFormat: 'yy_mm_dd',
defaultDate : currentDate,
maxDate : '+0',
showButtonPanel: true,
currentText: 'Aujourd\'hui',
beforeShowDay: function(date) {
thisMonth = parseInt(date.getMonth())+1;
thisMonth = (thisMonth<10)? "0"+thisMonth : thisMonth;
thisDay = parseInt(date.getDate());
thisDay = (thisDay<10)? "0"+thisDay : thisDay;
thisArchiveDate = thisDomain +date.getFullYear() + "_" + thisMonth + "_" + thisDay + "_"+archiveName+".html";
/* test si il ya un article ce jour là */
if($('.BlogArchive a[href^="'+thisArchiveDate+'"]').size()>0){
return [true,''];
}
return [false,''];
},
onChangeMonthYear: function(year, month, inst) {
thisMonthNbPost = $('.BlogArchive a[href^="'+thisDomain +year + "_" + ((month<10)?"0"+month : month) + "_"+'"]').size();
setTimeout(function (){
$(".ui-datepicker-title").append(" <small class='nbPostThisMonth' title='"+thisMonthNbPost+" messages ce mois-ci'>"+thisMonthNbPost+ "</small>");
},0);
}
});
});
</script>
<style type="text/css">
.ui-datepicker, .ui-datepicker .ui-state-active{
display : block;
overflow: hidden;
background: transparent !important;
border : 1px solid white !important;
}
.ui-datepicker .ui-state-active{
font-weight : bold !important;
color : black !important;
}
.ui-datepicker-prev, .ui-datepicker-next{
cursor:pointer;
}
.BlogArchive{
display:none;
}
.nbPostThisMonth{
float: right;
background: url(http://lh6.ggpht.com/_hMucZ6fziyo/TR3f7LJAVtI/AAAAAAAAKUk/s1Y3wo0RAb8/message_balloon_24.png) no-repeat center;
width: 24px;
height: 24px;
line-height: 20px;
color: black;
}
</style>
<div id="datepicker"></div>
Résultat final
Adblock
Kill-flash
SmoothScroll
) ou que vous soyez, sans avoir besoin de modifier votre smartphone, ni même d’installer d’application.