Customize Blogger Archive Widget

Stylish Blog Archive Widget for Blogger looks pretty good than the default blog archive widget, recently I carried out a research on customize blogger archive widget, I was unable to see any good articles on that regard. So, today am going to show you how to change blog archive in blogger and how to customize blogger archive widget.

In one of our previous post we discussed on How to be a Good Blogger, blogger archive page with thumbnails is recommended for bloggers to include it on their blog, it helps to engage the visitor and make them stay on your blog, once your visitors are able to navigate from one articles to the other it will make them to visit your blog more often and also it will increase your page views. Random Post widget is another trick to keep visitors on your blog; articles that you have published will be randomly selected for your visitors, you may also like How to Post Automatically to Social Media Went Publish a Post.Blogger Archive widget keeps your blog post organize and let your readers easily get what they are looking for on your blog or website. It’s another way of engaging your visitors and making them know that hey you can’t just leave like that, they are so many articles on this blog relating to what you are looking for and you haven’t read them yet.

The default blog archive widget looks very small and may not fit into your blog side bar, and that wouldn’t give your blog a nice look at all, so they is every need for you to customize it the way am going to show you on this article.

Follow the steps below carefully to customize blog archive widget

Step1: Add the blog archive widget to your blog

Go to your blog dashboard and click on <<Layout>> then add a gadget and select <<blog archive>> from the list, select <<Drop-down Menu from the list.

Step2: Add the CSS Code

On your dashboard go to template >> Customize >> Advanced >> Add CSS

Now copy and paste one of the codes below and click on 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;}

Hope this helps

Drop your comments below