7 Jan 2015

How Can You Style the Blog Archive Drop-down Menu Widget

On In ,

2 Comments

default blog archive drop down menuPreviously we have seen how to style the Blog Archive Widget with a Scrollbar. It was for the Flat List style. Take a look at the drop-down menu style. The default Blog Archive Drop-down menu widget will look like this: (screenshot on the right side). As you can see, it is really a small one. Here I am sharing you the results when I tried to style it with some CSS: One is blue-colored and the other is white. It is styled according to the width of your sidebar.

Blog Archive Drop-down Menu Widget for Blogger

Step I: Adding the Blog Archive Widget to Your Blog

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

configuring the blog archive widget

Step II: Adding CSS

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



For Blue:

#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;}



For White:

#BlogArchive1_ArchiveMenu {width:100%; font:13px verdana; height:35px; padding-left:10px;}


2 comments:

Your comments are always appreciated! However advertisements will not be approved. Thanks.