Blogger Table Of Content(TOC) Sonic Version --(3) Like Count, Sorted By Date

(Pic from: forums.realmacsoftware.com)The former 2 TOC versions (sorted by date & label), come with basic function, but still could play the role of blog guideline or sitemap. From now on, the latter versions will come with additional functions.

This time, we add "like count" for each post, which can help visitors judge the value of one post, or if it`s popular. Such TOC could be a better guideline to visitors, and decrease the bounce 0B6semvf0Cp63SS1DNC1tcTZ3X00/toc-label-sonic-en-min-140410.jsrate.

Here please let me introduce the special features of this version. Or, please move to section [B. Installation Code] for the installation procedure.

DEMO PAGE

A. Special Features

1. Fast Loading Time: 2 years ago I ever made another version of [TOC + Like Count], but without "waterfall" technology, so the loading time is very slow. But version come with "waterfall" technology, you could feel the sonic speed.

2. Three statistics: The value of like count, actually comes from 3 different counts:

• share count
• comment count
• like count

So in TOC, if one posts shows 20 likes, it means the sum of "share count + comment count + like count".

3. Custom "Burst number": If there is a limit on 50, and when exceeding 50(says 51), I name it as the term "burst", and 50 is the "burst number". In this TOC widget, if setting a "burst number", when like count exceeding the number, it will show custom "burst text" instead of original like count.

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 :

F: The number of posts to load at one time. By default number 50, the loading time will be fast enough. Even lowering 50 to 30, you might not feel the difference.

G: Default number 50 means, when exceeding 50, it will show custom "burst text"(such as "HOT") instead of original like count.(please refer to [A. Special Features] --> [3. Custom "Burst number"])

H: the default burst text("HOT") could be changed.

I: the text "Load More" on button could be modified

J: the text "Load All" on button could be modified

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: The image url for "like" logo, could be customized. If the width of custom image is different from the original one, you might need to change the CSS setting, please refer to section [C. CSS Code].

M: the setting for text of month name

C. CSS Code

After the codes in section [B. Installation Code], please copy & paste the following CSS codes :

<style>
.tocYearTitle { /* Year Button */
display: inline-block;
float: left;
width: 70px;
padding: 5px;
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;
}
.tocYearTitle: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;
}
.tocYearTitle:active {
position: relative;
top: 1px;
}
.tocYear { /* Year Area */
margin: 0px 5px 30px;
}
.tocYearToggle { /* year toggle */
margin-left: 100px;
}
.tocMonthTitle { /* month button */
display: inline-block;
font-size: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
color: #000060;
cursor: pointer;
margin: 5px 0px 15px;
text-shadow: 2px 2px 4px #999;
}
.tocMonthTitle:hover {
text-shadow: 0 0 10px #000060;
}
.tocMonthTitle: active {
position: relative;
top: 1px;
}
.tocMonthToggle { /* month toggle */
margin-bottom: 20px;
}
.tocDayNo { /* date */
float: left;
font-size: 16px;
}
.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;
}
#tocMore { /* load button area */
margin: 40px 0px 40px 100px;
}
.tocMore { /* load button */
display: inline-block;
margin-right: 50px;
width: 140px;
padding: 10px;
cursor: pointer;
color: #3a8a9e;
font-family: arial, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
-moz-box-shadow: 0px 10px 14px -7px #899599;
-webkit-box-shadow: 0px 10px 14px -7px #899599;
box-shadow: 0px 10px 14px -7px #899599;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
background-color:#ededed;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
text-decoration:none;
text-shadow:0px 1px 0px #e1e2ed;
}
.tocMore:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
background-color:#bab1ba;
}
.tocMore:active {
position:relative;
top:1px;
}
#tocInfo { /* info area */
text-align: left;
margin-top: 40px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 14px;
font-style: italic;
text-shadow: 1px 1px 1px lavender;
}
</style>

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:

DEMO PAGE