Add a Archive Calendar Widget to Your Blogger:Digital Tech Inspiration

One of the most famous widgets which is rarely seen in a Blogger blog is of course a archive calendar widget, in which dates are linked to posts published on that particular date.

Thanks to Phydeaux3 as we now have this widget for Blogger too.

This tutorial has mainly four steps, three are common to everyone and in the fourth step, styling of the widget will be done. You can see a demo by clicking on the button below:

LIVE DEMO

Instructions to Follow:

STEP #1:

Now add the regular Blogger Archive widget (if you do not already have one in your blog) like image shown below click [+] add button.

A window will appear, edit the properties of the archive widget according to this image:

STEP #2:
Now go to Template click on Backup/Restore button to download your template as a back up, if anything goes wrong.

Click on Edit HTML button then Proceed, tick on Expand Widget Templates

Search for the code below (Ctrl + f):

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

The id can also be BlogArchive2 instead of BlogArchive1.

Till…….

</b:widget>

Replace above code with the below original hack (Copy & Paste), be careful while replacing.

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<b:if cond='data:style == "HIERARCHY"'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>

<b:include name='quickedit'/>

</div>

</b:includable>

<b:includable id='toggle' var='interval'>

</b:includable>

<b:includable id='flat' var='data'>

<ul>

<b:loop values='data:data' var='i'>

<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

</li>

</b:loop>

</ul>

</div>

</caption>

</tbody>

</table>

</tr></table>

</div>

</div>

</b:includable>

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

</b:includable>

<b:includable id='menu' var='data'>

Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format

</b:includable>

<b:includable id='interval' var='intervalData'>

Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format

</b:includable>

</b:widget>

STEP #3
Again search for the below code in the template:

</head>

Paste below code ABOVE/BEFORE the search code:

//STYLE CODE WILL COME HERE - SEE STEP #4

Now Save the template.

Now here's the styling part of the tutorial; select the best theme for your blog applying below codes:

STEP #4
Go back to Layout -> Edit HTML.

Now copy the code of the style you want it on your blog (and replace the code in RED in STEP #3 with any one style):

Style - Dusty Blue

Style for Dark Templates

Style - Plain White

Style - Blue/Black

So execute steps correctly and you are done. Now the calendar widget will appear on your blog with your own selected style. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.