(Pic from: forums.realmacsoftware.com)This version come from [TOC sorted by label], but show like count for each post. Please see the installation procedure as follows.
A. Installation Code
Create a new post --> copy & paste the following codes :
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: Default number 50 means, when exceeding 50, it will show custom "burst text"(such as "HOT") instead of original like count.
H: the default burst text("HOT") could be changed.
I: The image url for "like" logo, could be customized. If the width of the image is different, you might need to change the CSS setting, please refer to section [B. CSS Code].
J: 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
K: 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].
L: If you don`t need the "new post remark" besides label button, just change the setting as "N".
M: If you prefer 1st label remain folded, just change the setting as "N".
B. 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 arera */
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;
}
.tocPost { /* post title area */
margin-left: 35px;
font-size: 16px;
border-bottom: 1px dotted lavender;
padding-bottom: 5px;
}
.tocPostTitle { /* post title */
display: inline-block;
width: 75%;
}
.tocLike { /* like area */
padding-left: 10px;
display: inline-block;
width: 20%;
vertical-align: top;
}
.tocLike img { /* like image */
height: 20px;
vertical-align: middle;
border: none;
box-shadow: none;
}
.tocBurst { /* hot */
color: #000060;
font-weight: bold;
vertical-align: middle;
}
#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.
Since every blog uses different template, and sets different width, if you find the like count move to the next line(or maybe you use custom like image), then the following 2 CSS areas might need to adjust:
- /* post title */ in this area, please adjust the width according to red percentage 75%
- /* like area */ in this area, please adjust the width according to red percentage 20%
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:
C. Reminder
According to [official document]https://support.google.com/blogger/answer/44498?hl=en, 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