Collapse and style Blog Archive in Blogger. Very small trick.

Preface

Blogger Blog Archive comes by default in expanded mode and inherits fonts and colours general styles of the whole template. What if we want to display it collapsed and to style it a little bit differently?

The small tricks below were applied to my current work (which is in progress) and these tricks are the resaults of rather blind and fast researching / experimenting than of deep investigation. But it works!

Making Blog Archive collapsed ever

At first I was trying to change a couple of things in the widget code itself and... did not manage. I tried to replace class "expanded" to class "collapsed", it worked but worked improperly. I tried yet few more things and in the end decided not to reinvent the wheel but googled briefly to see what other people had already achieved. One variant I found, was about to change drastically the code of the widget, I decided to refuse it. Another variant suited me completely: short javascript code that helps to achieve a desirable effect. Here below is the code:

  
if ( $('.archivedate').hasClass('expanded')) 
{ 
$('.archivedate').removeClass('expanded'); 
$('.archivedate').addClass('collapsed'); 
} 

I have found this script here (Courtesy Prayag Verma).

Changing colour of triangle

Second thing I wanted about Blog Archive is to change triangle colour and size. By default the archive triangles (which are simple HTML entities) inherit main font colour and size. So, in my case it was grey and of 1em font size. I tried to apply custom CSS styles to class "zippy", it worked but improperly. That caused me to go easy way: to add custom class and style it. So I did: added class "zippy-custom" and styled it. See this part of code (note: Expand Widget Template must be ticked and expanded):

  
  
    
      ▼ 
    
  
    
      
        
          ◄ 
        
          ► 
        
      
    
  

A new class "zippy-custom" was added to span. In CSS stylesheet I applied orange colour and font-size 0.9em declarations and got what I wanted. That's it. Now Blog Archive looks this way:

Zoomed in page view: