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 :)
0 comments:
Post a Comment