customized blog archive gadget for blogger

Do you ever feel that the blogger archive gadget is outdated and looks very basic then you are at the right place. Customizing blogger archive gadget is very simple task and can be done by adding some custom CSS. You can also customize blog archive gadget according to your blog color scheme.
See below picture or you can check my archive gadget for any doubt related to after customization looks.

How To Customize Blogger Archive Gadget?

Step1: Go to Blogger Layout and Add a Blogarchive gadget. If you already have archive gadget in your blog you can skip this step.

Step2: Now go to Theme (Template) > Edit HTML. Click anywhere in the codes and then press Ctrl+F.

Step3: Search for ]]>< and paste below codes just before ]]><

#BlogArchive1 {
padding: 3px;
border: 2px solid #dddddd; -moz-border-radius:15px; -webkit-border-radius:15px;
text-align: center;
}
#BlogArchive1:hover {
padding: 3px;
border: 2px solid #35C0F2; -moz-border-radius:15px; -webkit-border-radius:15px;
text-align: center;
}
#BlogArchive1 h2{
padding:2px;
border: 1px solid #dddddd; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#35C0F2;
}
#BlogArchive1 h2:hover{
padding:2px;
border: 1px solid #35C0F2; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#35C0F2;
}
 .post-count-link{
padding-left: 60px; padding-right: 60px;padding-top: 2px;padding-bottom: 2px;
border: 1px solid #000000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#e2f9ff;
}
.post-count-link:hover{
padding-left: 60px; padding-right: 60px;padding-top: 2px;padding-bottom: 2px;
border: 1px solid #000000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
}
.post-count { display: none; }

Step4: Save Theme , that's all.

Customization: If you want to match the gadget colors with your blog theme. Simply change the blue background text in the codes with your color hex code.