(Pic from: forums.realmacsoftware.com)Last version [Sorted by Date] could display the information about post title, publication frequency. This version "sorted by label", can help visitors search the post they need easily.
About what "Blogger TOC sonic version" widgets series can do, please refer to [Sorted by Date]. Here please let me introduce the special features of "sorted by label" version. Or, please move to section [B. Installation Code] for the installation procedure.
A. Special Features
1. Fast Loading Time: since the group of posts from 1 single label could be loaded promptly with 1 click, by default the TOC will be folded, to conserve the system resource.
2. Label Toggle Button: This button can switch the display of the group of posts from that label.
3. Custom New Post Amount:For instance, if setting the amount as 15, then the recent 15 posts will be remark as "new post".
4. Exclude Specific Label:It might not be necessary to list some specific labels in TOC, such as "message board", "admin", as visitors might not need those kinds of posts.
5. Custom CSS:The visual style of this TOC widget can be customized in all parts, to make layout of your list unique from others.
B. Installation Code
Create a new post --> copy & paste the following codes:
Do not publish the post yet, above codes are main part of the program, still we need to copy the CSS code. If you don`t need to modify the parameters, please move to section [C. CSS Code].
If you want to customize the parameters, please refer to the LETTER NAME above:
E: Red number 15 means the recent 15 posts will be remark as "new post".
F: The blue text is remark for the new post. If you would like to show image instead of text, then replace the text with image url (http://...).
G: Please fill in all the label names you would like to exclude, and separate them with commas (","). After the last one, don`t leave any comma. If you don`t need to exclude any label, please just leave
H: The effect to show/hide the posts. The default text "fadeToggle" means the effect of [fade in] & [fade out]. It could be changed to "slideToggle", meaning the effect of slide in] & [slide out].
I: If you don`t need the "new post remark" besides label button, just change the setting as "N".
J: If you prefer 1st label remain folded, just change the setting as "N".
C. CSS Code
After the codes in section [B. Installation Code], please copy & paste the following CSS codes:
<style>
.tocLabelTitle { /* label button */
display: table-cell;
width: 200px; /* width of label button */
padding: 5px 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
-moz-box-shadow: 0px 10px 14px -8px #276873;
-webkit-box-shadow: 0px 10px 14px -8px #276873;
box-shadow: 0px 10px 14px -8px #276873;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color: #599bb3;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.tocLabelTitle:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tocLabelTitle:active {
position: relative;
top: 1px;
}
.tocLabel { /* label area */
margin: 0px 5px 15px;
}
.tocLabelToggle { /* label toggle */
display: none;
margin: 20px 10px 30px;
}
.tocPostNo { /* post no. */
float: left;
font-size: 16px;
width: 25px;
text-align: right;
line-height: 1.6em;
}
.tocPostTitle { /* post title */
margin-left: 35px;
font-size: 16px;
line-height: 1.6em;
}
#tocInfo { /* info area */
text-align: left;
margin-top: 30px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 14px;
font-style: italic;
text-shadow: 1px 1px 1px lavender;
}
.tocLabelNewText { /* new post reminder for label */
display: table-cell;
color: #990000;
font-weight: bold;
font-style: italic;
padding-left: 10px;
vertical-align: middle;
-webkit-animation: color-change 1s infinite alternate ease-in-out;
-moz-animation: color-change 1s infinite alternate ease-in-out;
-o-animation: color-change 1s infinite alternate ease-in-out;
-ms-animation: color-change 1s infinite alternate ease-in-out;
animation: color-change 1s infinite alternate ease-in-out;
}
.tocNewText { /* new post reminder */
color: #990000;
font-weight: bold;
font-style: italic;
margin-left: 10px;
-webkit-animation: color-change 1s infinite alternate ease-in-out;
-moz-animation: color-change 1s infinite alternate ease-in-out;
-o-animation: color-change 1s infinite alternate ease-in-out;
-ms-animation: color-change 1s infinite alternate ease-in-out;
animation: color-change 1s infinite alternate ease-in-out;
}
@-webkit-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-moz-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-ms-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-o-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
</style>Please note the red text in line 4, if you would like to customize the width of label buttons, please change the number 200.
Now you could publish this post. If you know how to modify CSS, please refer to the remark in green text which help understand the CSS code in that area. Modifying the CSS could make your layout of list outstanding.
Here is the demo page for reference again:
D. Reminder
According to [official document], it's illegal to use the following characters in labels:
&<>@!+,
If you found something wrong with this TOC widget, please check all your labels, to ensure that above characters are not included in the label names.
No comments:
Post a Comment