TWEAKED ARCHIVE GADGET (BLOGGER)

Tweaked ARCHIVE GADGET (BLOGGER)

TWEAKED ARCHIVE GADGET

Do you ever feel constrained with Blogger? Like you can't have all the cool stuff? All things considered, ideally today I can help you feel somewhat more substance with Blogger. Tweaking for Blogger isn't generally simple, particularly when the code is made "in the background" so you can't generally change the HTML.

In the event that you've been taking after Ashley@NoseGraze, you'll realize that she as of late discharged another growing file gadget for WordPress! IT IS SO COOL. I was desirous of the chronicle gadget she had on her blog for a very long time! SO upbeat that she discharged it to every one of us :) Unfortunately, I can't make the Blogger document contraption as cool as Ashley's, yet it's really close. This is what it would appear that on a default configuration test blog:

The blue shading appeared above will naturally change in view of what the connection hues are set for in your blog. As a matter of course, I made the foundation of the year header, light dark. In the event that you need to change that, you'll have to alter the foundation shading in the main style (at this moment it's #F5F5F5).

In the event that you need to leave the year header foundation shading as light dark, then you don't have to change anything in the CSS.

Before we begin, ensure you have this line of code in the head label area of your layout (it's Font Awesome)

That line of code will make the bolts show up in your chronicle.

At long last! Here's the CSS we will work with. In case you're not certain how to 

add CSS to your blog, take after this instructional exercise.

/* Archive Year Header */

#ArchiveList ul > li > a.post-number connection {

text dimension: 18px;

width: 100%;

edge: 0;

cushioning: 0 15px;

line-tallness: 38px;

foundation shading: #F5F5F5;

box-estimating: outskirt box;

letter-separating: 1px;

}

/* Archive Month Header */

#ArchiveList ul li a.post-tally link{

text dimension: acquire;

width: auto;

edge: 0 5px 0;

cushioning: 8px 25px;

line-stature: 1;

foundation: straightforward;

content change: capitalized;

}

#ArchiveList .zippy{

perceivability: covered up;

}

#ArchiveList ul li a.toggle {

position: outright;

beat: 0;

left: 0;

width: 100%;

show: square;

stature: 38px;

z-file: 5;

}

#ArchiveList ul li a.toggle {

position: outright;

beat: 0;

left: 0;

width: 30px;

stature: 24px;

show: square;

z-file: 0;

}

#ArchiveList .flip {

position: relative;

}

#ArchiveList ul .zippy{

shading: white;

perceivability: obvious;

content shadow: none;

}

#ArchiveList ul .zippy:before {

content: '\f105';

textual style family: FontAwesome;

position: total;

best: 3px;

left: 12px;

cushioning: 4px;

line-tallness: 1;

text dimension: 12px;

shading: #8C8C8C;

}

#ArchiveList ul .flip open:before {

content: '\f107';

position: outright;

beat: 3px;

left: 10px;

}

#ArchiveList ul li{

cushioning: 0 !imperative;

content indent: 0 !imperative;

edge: 0 !imperative;

position: relative;

}

#ArchiveList ul .post-tally interface {

cushioning: 10px 0;

show: inline-square;

edge: 0 5px 0;

}

#ArchiveList ul .posts li {

edge: 0px 10px 30px !vital;

content change: none;

}

#ArchiveList ul {

edge: 0 2px !critical;

}

span.post-number {

position: total;

right: 10px;

best: 10px;

shading: #8C8C8C;

}

ü Also, that is it! Fill me in as to whether you have any inquiries in the remarks :)