List Of Contents Widget v.1.0

You can use this widget to make an automatic update list of contents for your blog. This widget is special to call and display blogspot/ blogger post data. The appearance can be customized, include the background, size, font etc.

1.List Of Contents Widget Demo :

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

2. Click Here To Get LOC Widget v.1.0 codes !

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

Follow the direction below :
  • Log in to your blogspot account.
  • Click "Design".
  • Click "Page Element".
  • Click "Add Gadget" on the column you like to place the widget.
  • Scroll down on the pop up window and find "HTML/Javascript" menu, then click it.
  • Copy list of contents widget code (choose one from two codes above) and then paste on the area for "HTML/Javascript".
  • Change the red codes with your blogspot url.
  • Click "Save" and then view the result.

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

Learn The Table Below !
.
CodeFunctionHow To Customize ?
displayNewLabel= 1; "New !" label display controller Change the number 1 with other number you want.
To remove the label, change with 0.
displayPostDate= true ;Post Date display controllerChange true with false , if you want to remove the post date.
height : 300px;Set LOC Widget heightChange 300 with other number you want.
font-family : Arial ;Specify font family for post titles and post publishing dateChange 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 fontChange 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 ulChange 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.

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 !













.
CodeFunctionHow 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 controllerChange true with false , if you want to remove the post date.
var numchars=100;The number of Post Summary characters display controllerChange 100 with other value , if you want to increase or decrease the amount of characters are displayed.
var displayPostcut=true;Post Summary display controllerChange true with false , if you want to hide the Post Summary.
height : 300px;Set LOC Widget heightChange 300 with other number you want.
font-family: Arial;Specify font family for post titles and post publishing dateChange 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 fontChange 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 ulChange 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.