Archives dynamiques en sidebar gauche ou droite

Suite à une question d'Alice concernant :
l'affichage des archives en Sidebar avec la nouvelle plate-forme Overblog, ici un petit exemple simple qui permet d'afficher les archives sous forme d'une arborescence du type :


ARCHIVES
  |
  |_ 2011 (+)
  |
  |_ 2012 (-)
     |
     |_ Juin 2012
     |
     |_ Juillet 2012
     |
     |_ Août 2012
     |
     |_ Septembre 2012
     |
     |_ Octobre 2012
  |
  |_ 2013 (+)

Ceci est une modification de code dans votre thème alors avnt de l'utiliser, je vous conseille de sauvegarder le HTML original du thème en faisant un copier et un coller dans votre éditeur de texte favori.

Les variables d'affichage Overblog utilisées pour cet exemple :

VARIABLE	AFFICHE QUOI ?	Résultat exemple
{{ Lang.Get('Archives') }}	Le titre du widget Archives	Archives
{{ Lang.Get('Archives') \| upper }}	Le titre du widget Archives en majuscules	ARCHIVES
{{ Archive.Year }}	L'année de publication du post/article	2012
{{ Month.Name \| datel("MMMM") \| title }}	Le mois de publication en anglais	August
{{ Lang.Get(Month.Name) \| datel("MMMM") \| title }}	Le mois de publication en français	Août
{{ Month.PostCount }}	Le nombre de posts pour le mois	8
{{ Month.PostCount(' post',' posts' }}	Le nombre de posts pour le mois étendu	8 posts
{{ Month.Url }}	Le lien vers la liste des posts pour un mois	monblog.overblog.com//archive/2012-08
{% list Blog.Archives %}...{% endlist %}	renvoie la liste de toute les archives	Boucle dans un tableau en mémoire
{% list Archive.Months %}	renvoie la liste de tous les posts pour les archives d'un mois donné	Boucle dans un tableau

Alors maintenant le source HTML qui marche de paire avec un SCRIPT Javascript :


<div class="votre-style-pour-la zone-archives" >
 <div class="votre-style-pour-afficher-le-titre-archives"> <h2> <span>{{ 
 Lang.Get('Archives') }}</span> </h2> </div> <div class="votre-style-pour-le-
 widget-archives"> <ul id="archivelist"> {% list Blog.Archives %} <li 
 class="arch_year"> <a href="#" class="plustext" 
 onclick="javascript:switch_arch('{{ Archive.Year }}')"> {{ Archive.Year }} 
 </a> <ul id="arch_{{ Archive.Year }}" class="arch_month" {% if loop.index == 1 
 %}style="display:block;"{% endif %}> {% list Archive.Months %} {% if 
 Month.PostCount > 0 %} <li> <a href="{{ Month.Url }}"> {{ Month.Name | 
 datel("MMMM") | title }} </a> <span class="number">{{ Month.PostCount 
 }}</span> </li> {% endif %} {% endlist %} </ul> </li> {% endlist %} </ul>
 </div>
</div>

Et à ajouter juste avant la balise </BODY> de votre thème, le script javascript.


<script type="text/javascript">
    function switch_arch(year) {
        'use strict';
        var archiveYear, archiveMonths, displayStyle;
        displayStyle = '';
        archiveYear = document.getElementById('arch_' + year);
        if (typeof (archiveYear) !== 'undefined') {
            if (archiveYear.style.display !== 'none') {
                
                // Cacher les années sans posts
                archiveMonths = archiveYear.getElementsByTagName('li');
                if (!archiveMonths.length) {
                    archiveYear.parentNode.style.display = 'none';
                }
                // Gestion du click
                displayStyle = 'none';
            }
            archiveYear.style.display = displayStyle;
        }
        return false;
    }
    
    $(document).ready(function(){        
  	$('.plustext').click(function() {
  		return false; 
	});
  });

{% list Blog.Archives %}
	{% if Archive.Year != "now"|date("Y") %}
		switch_arch('{{ Archive.Year }}');
	{% endif %}
{% endlist %}  
</script>