How to Add Stylish Archive Widget for Blogger Blog/Blogspot

Add CSS and Style Your Blogger Archive Very Nice Like Below 

Step 1: Add Archive Widget

1st go to your Blog's Dashboard --> Layout --> Add a Gadget and select Blog Archive from the list. Don't forget to select Drop-down style. Now Save the Gadget.

Like below Image

How to Add CSS :

From your Blog's Dashboard navigate to go Template --> Customise --> Advanced --> Add CSS. Copy this Code paste one of the below codes and click Apply to Blog.

========================================================================

#BlogArchive1_ArchiveMenu {
width:100%;
font:13px verdana;
height:35px;
padding-left:10px;
color:#fff;
border:1px solid #1972c4;
background-color: #1d83e2;
background-image:-webkit-gradient(linear, left top, left bottom, from(#77b5ee), to(#1972c4));
background-image:-webkit-linear-gradient(top, #77b5ee, #1972c4);
background-image:-moz-linear-gradient(top, #77b5ee, #1972c4);
background-image:-ms-linear-gradient(top, #77b5ee, #1972c4);
background-image:-o-linear-gradient(top, #77b5ee, #1972c4);
background-image:linear-gradient(top, #77b5ee, #1972c4);
-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
}
select option {color:#000; background:#fff;}


=============================================================================================