Blog Archive links Collapsed by Default Hack

blog archive widget hack

If you are using the Hierarchy style for your Blog Archive widget then you must have faced the problem of auto expansion of drop-down list of a particular month which is currently in the calendar or to which the opened post belongs. This simple hack solves that problem by making all the nodes in the hierarchy to be collapsed by default(As seen in the above picture ). This can be simply added by the One Click Installer or manually.

Demo

Prerequisites for this to Work
Before you apply this remember that you have to have a Blog Archive Widget present and the Style has to be set to Hierarchy (as shown in picture below )

blog archive widget config blogger

Applying this to your Blog

To add using One Click Installer Method

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script>
if ( $(‘.archivedate’).hasClass(‘expanded’) )
{
$(‘.archivedate’).removeClass(‘expanded’);
$(‘.archivedate’).addClass(‘collapsed’);
}
</script>
Blogger Templates

Or just add the following Code in your Blog (preferably before the </body> tag in the Edit HTML of the Template tab )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>  
if ( $('.archivedate').hasClass('expanded') ) 
{ 
 $('.archivedate').removeClass('expanded'); 
$('.archivedate').addClass('collapsed'); 
}
</script>

What this code does
It firstly checks if a element having class name “archivedate” also has a class “expanded” present in it. If this turns out to be true then it removes the “expanded” class and adds a class named “collapsed” .

If you face any problem implementing it in your blog then feel free to ask via comments.a_demo_four {
width:auto !important;
cursor:pointer !important;
padding-right:20px !important ;
text-align:center !important ;
font-weight:bold !important ;
border: 1px !important ;
background-color: #3bb3e0 !important;
font-family: ‘Open Sans’, sans-serif !important;
font-size: 12px !important;
text-decoration: none !important;
color: #fff !important;
position: relative !important;
padding: 10px 20px !important;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229))) !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
}

18 Replies to “Blog Archive links Collapsed by Default Hack”

  1. Hey Prayag! Works great, thanks! The only thing I noticed is that the little triangle button (that signifies collapsed or not) stays "expanded", is there any way to fix this? Not a big deal though!

  2. Hey thanks for this, but the code is little buggy.

    The triangle of the code is already down whenever we open the archive though the content is collapsed. It does not look good.

    Second how can we collapse only the months and not the year?

    Would be grateful for the response.

    Warm Regards

  3. Hi,

    Works well, I'm having some trouble finding a way to do the opposite (Like Ganesh asked in 2014)

    I would like to display the 6 most recent posts in the header of any page in a Blogger blog.

    The archives widget, with a hierarchy style unfortunately doesn't work, any posts which were published in the same month are expanded and displayed, but other months are collapsed and not visible until the href="javascript:void(0)" is triggered by the user clicking on the dropdown ►.

    Is there a way to do this?

  4. Thanks for your simple and useful tip… was frantically googling for tutorials but the others seemed complicated/didn't work.

    Also, I took away this tag under 'BlogArchive1' because some of my posts didn't have titles, so now all the posts will be displayed.

Leave a Reply

Your email address will not be published. Required fields are marked *