List Of Contents Widget v 1.1 | With Post Summary

This widget is still special for blogspot. The differences between Loc version 1.1 with the older version is on "post summary" and "read more" link display.

With this newer version of LOC widget, you can display post summary, read more link and all items can be displayed by LOC v.1.0.

1.List Of Contents Widget Demo :

YOU CAN SEE THE DEMO AT THE RIGHT SIDE OF THIS BLOG (ON THE TOP OF SIDEBAR) !!

2.List Of Contents Widget Codes :

<div style="overflow:auto;

height:300px;
border:1px solid #990000;
font-family:Arial Narrow;
background:#ffffff;
font-size:75%;
">

<ul style="
list-style-type:decimal-leading-zero;
margin-left:5px;
">

<script src="http://javascriptloc.googlecode.com/files/loc2.js" style="text/javascript">
</script>

<script style="text/javascript">
var numchars=100;
var newLabel=5;
var displayDate = true;
var displayPostcut = true;
</script>

<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loc"></script></ul></div>

3.How To Install List Of Contents Widget v.1.0 On Your Blogspot?

Follow the direction below :

1. Log in to your blogspot account.

2. Click "Design".

3. Click "Page Element".

4. Click "Add Gadget" on the column you like to place the widget.

5. Scroll down on the pop up window to find "HTML/Javascript" menu, then click it.

6. Copy list of contents widget codes and then paste on the area for HTML/Javascript".

7. Change the red codes with your blogspot name.

8. Click "Save" and then view the result.


4.How To Customized LOC Widget v.1.1 Appearance ?

Learn The Table Below !

.

Code	Function	How To Customize ?
var newLabel= 5;	"New !" label display controller	Change the number 5 with other number you want. To remove the label, change 5 with 0.
var displayDate=true;	Post Date display controller	Change true with false , if you want to remove the post date.
var numchars=100;	The number of Post Summary characters display controller	Change 100 with other value , if you want to increase or decrease the amount of characters are displayed.
var displayPostcut=true;	Post Summary display controller	Change true with false , if you want to hide the Post Summary.
height : 300px;	Set LOC Widget height	Change 300 with other number you want.
font-family: Arial;	Specify font family for post titles and post publishing date	Change the word Arial with other name of font family. Example : Edwardian Script ITC, Times New Roman, Arial Narrow etc.
font-size : 75% ;	Specify the size of LOC Widget font	Change the number 75 with other value number you want. You can use other font size formatting, like px or pt
border :1px solid #990000;	Set the border for LOC Widget Table	Change 1 with other number. To remove, change it with 0 Change solid with dotted if you want dot pattern for loc table border. Change #990000 if you want to change the border color
UL Customization
list-style-type:decimal-leading-zero;	Specify the style of post title list.	Change decimal-leading-zero with other name of list style type. Example: decimal , circle , square
margin-left:5px;	Set left margins for ul	Change number 5 with other number you want to add left margins wide of loc widget. To reduce the margins, use "-" (minus) code. Example: - 5px; .

Notes : You can add other styling codes are used in CSS. For example : background, width, color, margin, padding, etc.