Blogger'da birçok kişinin de bildiği üzere "Blog Arşivi" adlı bir gadget mevcut. Ancak çok fazla CSS içermediği için oldukça sade bir görünüme sahip denilebilir. Dilerseniz bu gadget için özel bir CSS tanımlayabiliriz. Böylelikle daha güzel bir görünüm elde edeceğimizden şüpheniz olmasın. Öncelikle gadget'lar arasından "Blog Arşivi" adlı gadget'ı aktive edin ve ardından temanızın CSS bölümüne aşağıdaki kodları ekleyin ve diğer adımı da gerçekleştirin. Hepsi bu kadar.

AYRICA: Blogger için “Son Dakika” Eklentisi Yapalım

1) CSS kodlarını temanıza ekleyin.

/* Archive Year Header */
#ArchiveList ul > li > a.post-count-link {
font-size: 18px;
width: 100%;
margin: 0;
padding: 0 15px;
line-height: 38px;
background-color: #F5F5F5;
box-sizing: border-box;
letter-spacing: 1px;
}
/* Archive Month Header */
#ArchiveList ul ul li a.post-count-link{
font-size: inherit;
width: auto;
margin: 0 5px 0;
padding: 8px 25px;
line-height: 1;
background: transparent;
text-transform: uppercase;
}
#ArchiveList .zippy{
visibility: hidden;
}
#ArchiveList ul li a.toggle {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
height: 38px;
z-index: 5;
}
#ArchiveList ul ul li a.toggle {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 24px;
display: block;
z-index: 0;
}
#ArchiveList .toggle {
position: relative;
}
#ArchiveList ul ul .zippy{
color: white;
visibility: visible;
text-shadow: none;
}
#ArchiveList ul ul .zippy:before {
content: '\f105';
font-family: FontAwesome;
position: absolute;
top: 3px;
left: 12px;
padding: 4px;
line-height: 1;
font-size: 12px;
color: #8C8C8C;
}
#ArchiveList ul ul .toggle-open:before {
content: '\f107';
position: absolute;
top: 3px;
left: 10px;
}
#ArchiveList ul li{
padding: 0 !important;
text-indent: 0 !important;
margin: 0 !important;
position: relative;
}
#ArchiveList ul .post-count-link {
padding: 10px 0;
display: inline-block;
margin: 0 5px 0;
}
#ArchiveList ul ul .posts li {
margin: 0px 10px 10px 30px !important;
text-transform: none;
}
#ArchiveList ul {
margin: 0 0 2px !important;
}
span.post-count {
position: absolute;
right: 10px;
top: 10px;
color: #8C8C8C;
}


2) Temanızda yer alan aşağıdaki kodu bulun.

</head>

3) Aşağıdaki kodu, yukarıdaki koddan önce ekleyin.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

Not: Örnek görüntü aşağıda yer almakta olup, inceleme yapabilirsiniz.