(Pic from: forums.realmacsoftware.com)Have you installed Blogger TOC widget in your blog? In such widget, there are 2 critical defects you might not notice until publishing hundreds of posts：
1. The widget will take a long time to load posts (the more posts, the more time).
2. The widget will list recent 500 hundred posts only, as the Blogger feed allow to retrieve up to 500 posts once.
So I made this Blogger TOC widget (sonic version), in order to solve above 2 problems. If not urgent, please allow me to introduce some special features in advance. Or, please just move to section [B. Code Installation] for further installation.
A. Special Features for TOC Sonic Version
1. List Unlimited Posts In Short Time: As mentioned, this widget can show all posts in your blog, even the total amount of posts exceed 500. Besides, the posts will be displayed in order by date IMMEDIATELY without delay.
2. Year Toggle Button: This button can switch the display of all posts in that year, which will help view the posts in earlier years.
3. Month Toggle Button: Same function as point 2, will help view the posts in earlier months.
4. [Load More] Button: Such design is better than "infinite scroll", as visitors can decide (not) to load all posts. Under "infinite scroll", system will continuously read the post dates in the background, which will consume more resources, and might cause unsmooth scrolling.
5. [Load All] Button: Same design to replace "infinite scroll".
6. 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 right now, 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 see the following instruction and refer to the numbered list in CAPITAL LETTERS above:
E: 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.
F: the text "Load More" on button could be modified
G: the text "Load All" on button could be modified
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: the setting for text of month name
C. CSS Code
Please copy the following CSS codes, then paste them below section [B. Installation Code]:
<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;
line-height: 1.6em;
}
.tocPostTitle { /* post title */
margin-left: 35px;
font-size: 16px;
line-height: 1.6em;
}
#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>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:
Yes I like it.
ReplyDelete