Date dans un cadre calendrier

Yooztick et Lise avaient voulu savoir comment la date s’affiche dans un cadre calendrier sur mon blog. Voici pour eux et tous ceux qui voudraient avoir une telle fonction dans leur blog, comment y parvenir.

1. Se connecter sur votre compte, sur « modèle », « modifier le code html » et cochez la case pour « développer des modèles de gadget ».

2. Mettre le code suivant juste avant la balise <b:skin><![CDATA[/*

<script languange='javascript' src='http://images.jackbook4.googlepages.com/jackbookDOTCOM_changedate3.js'/>

Il serait mieux d’héberger le fichier js contenu dans le code ci-haut sur votre propre compte Google Pagecreator. Pour cela, rendez vous sur l’url suivante : « http://images.jackbook4.googlepages.com/jackbookDOTCOM_changedate3.js », enregistrez le fichier dans votre ordi puis hébergez-le sur Google Pagecreator.

2. Ajouter le code suivant avant la balise ]]></b:skin>

.jackbookDOTCOM_date {

background:url(lien vers le cadre du calendrier);

background-repeat:no-repeat;

width:66px;

height:82px;

text-align:center;

float:left;

color:#ffffff;

font-size:10px;

font-weight:bold;

margin:0px;

margin-top:3px;

margin-right:10px;

padding-top:7px;

}

.jackbookDOTCOM_date .day {

font-size:35px;

font-weight:bold;

color:#000000;

padding-top:2px;

letter-spacing:-1px;

}

Remplacez « lien vers le cadre du calendrier » par le lien vers cadre pour calendrier qui convient à votre blog. Le lien pour le cadre calendrier de ce modèle est celui-ci :

http://jackbook4.googlepages.com/summerfruit_dateblock.gif

Il y a possibilité de changer la taille de la police pour la date(font-size:35px), la longeur (height:82px;) et la largeur (width:66px;) du calendrier pour le faire correspondre au votre.

3. Mettre le code en rouge ci-après avant celui en noir.

<b:includable id='post' var='post'>

<a expr:name='data:post.id'/>

<!-- Date Block -->

<div class='jackbookDOTCOM_date'><script>jackbookDOTCOM_changeDate('<data:post.timestamp/>');</script></div>

Enregistrez votre modèle.

4. Aller sur « Paramètres », sur «Mise en forme"

Changer le format des entêtes de date en celui-ci « Jeudi, Juillet 17, 2008 » afin que la date s’affiche bien. Faites en de même pour le format de date et d'heure.

Enregistrez les paramètres et allez voir le résultat.

Vous trouverez des cadres calendriers ici.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.