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.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://locrelink.googlecode.com/files/loc.js" style="text/javascript">
</script>

<script style="text/javascript">
var displayDate=true;
var newLabel=1;
</script>

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

OR USE THE CODES BELOW :

<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 style="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4f(46(p,a,c,k,e,d){e=46(c){45(c<a?\'\':e(4c(c/a)))+((c=c%a)>35?47.4h(c+29):c.4e(36))};49(!\'\'.48(/^/,47)){4a(c--){d[e(c)]=k[c]||e(c)}k=[46(e){45 d[e]}];e=46(){45\'\\\\w+\'};c=1};4a(c--){49(k[c]){p=p.48(4g 4b(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}45 p}(\'2U(2c(p,a,c,k,e,d){e=2c(c){2d(c<a?\\\'\\\':e(2f(c/a)))+((c=c%a)>35?2h.2T(c+29):c.2S(36))};2e(!\\\'\\\'.2i(/^/,2h)){2j(c--){d[e(c)]=k[c]||e(c)}k=[2c(e){2d d[e]}];e=2c(){2d\\\'\\\\\\\\w+\\\'};c=1};2j(c--){2e(k[c]){p=p.2i(2g 2R(\\\'\\\\\\\\b\\\'+e(c)+\\\'\\\\\\\\b\\\',\\\'g\\\'),k[c])}}2d p}(\\\'m a="g";m b="l";m c="f";m e="t";m f="o";m g="w";m h="c";m i="i";m j="e";m k="r";m l="d";1L 1M(M){m l=1O;P(m y=0;y<l;y++){m n=M.Q.T[y];m A=n.1Y.$t;m K;z(y==M.Q.T.O)X;P(m v=0;v<n.I.O;v++){z(n.I[v].W==\\\\\\\'20\\\\\\\'){K=n.I[v].G;X}}A=\\\\\\\'<a G="\\\\\\\'+K+\\\\\\\'" W="1B" 1E="1A">\\\\\\\'+A+"</a>";z(y<1t){L=H}24{L=1x}m B=n.Y.$t;m 1y=B.C(0,4);m V=B.C(5,7);m 15=B.C(8,10);m p=1v 1s();p[1]="1u";p[2]="1z";p[3]="1F";p[4]="1G";p[5]="1D";p[6]="1C";p[7]="1r";p[8]="1H";p[9]="1f";p[10]="1h";p[11]="1e";p[12]="1q";s.q("<U D=\\\\\\\'18-1i:17;\\\\\\\'>"+A);z(L==H)s.q(\\\\\\\'<u D="x-E:1m%; x-F:J 1b; 19:#1j;"> 1k !</u>\\\\\\\');z(1l==H)s.q("<13/><u D=\\\\\\\'x-E:1N%; x-F:J 1I;\\\\\\\'> 25: "+p[26(V,10)]+" - "+15+", "+n.Y.$t.C(0,4)+"</u>"+"<13/>");s.q("</U>")}s.q("</2b>");s.q("</1X>")}m Z=b+f+h+g+i+l+a+j+e+c+f+k;m 14=Z;m S=14;m N=S;m R=N;s.q(\\\\\\\'<u ><1d><a G="1T://\\\\\\\'+R+\\\\\\\'.1S.1g" D="x-E:1R%;1c :1a; 1U:0 1W 1V 17;1Q-1P:1K 1J #2a; 18:-28 0 1Z -23;1c:1a; x-F:J 1b;1n:16; 1p-1w: 16;19:#1o;">22 21 27 29</a></1d> </u>\\\\\\\');\\\',2Q,2P,\\\'||||||||||||||||||||||2L|||2K|2M||2N||2O|||2V||2e|2W|34|37|38|39|33|32|2Y|2X|3b|2J|30|31|3a|2D|2q|2p|2r|2o|2t|2u|2m|2k|2n|2l|2s||||2I|2E|2v|2F|2G|2H|2C|2B|2x|2w|2y|2z|2A|2Z|3u|3N|3S|3O|3P|3Q|3L|3K|3F|3E|3G|3H|3J|3I|2g|3R|41|40|43|42|44|3Y|3U|3T|3V|3W|3Z|3X|3M|3C|2c|3k|3j|3l|3m|3n|3i|3h|3d|3c|3e|3f|3g|3o|3D|3p|3y|3x|3z|3A|3B|2f|3w|3v|3r|3q|3s\\\'.3t(\\\'|\\\'),0,{}))\',4d,4K,\'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||46|45|49|4c|4g|47|48|4a|4L|4M|4N|4J|4I|4E|4D|4F|4G|4H|4O|4P|4W|4X|4Y|4Z|4V|4C|51|4Q|4R|4S|4T|50|4A|4l|4m|4n|4k|4o|4p|4j|4d|4b|4e|4h|4f|4B|4x|4y|4z|4q|4w|4v|4r|4s|4t|||4u|4U|5l|5E|5F|5G|5I|5H|5C|5B|5w|5K|5v|5x|5y|5A|5z|5J|5V|5S|5U|5W|4i|5T|5Q|5M|5L|5N|5O|5P|5R|5D|5t|5b|5a|5c|5d|5e|59|58|53|52|54|55|57|5u|56|5f|5g|5p|5o|5q|5r|5s|5n|5m|5i|5h|5j|5k\'.4i(\'|\'),0,{}))',62,369,'|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||return|function|String|replace|if|while|RegExp|parseInt|62|toString|eval|new|fromCharCode|split|136|write|url|nambln|var|document|span|com|href|family|tgl|substring|json|baru|judul|link|true|br|font|auto|for|feed|novitanikahdenganari|get|entry|ari|break|253|rel|published|bln|li|hr|length|novita|none|2px|style|September|width|Narrow|strong|November|margin|color|solid|background|top|New|decoration|displayDate|BDBDBD|newLabel|text|December|July|Array|January|990000|target|_blank|false|February|external|size|thn|August|March|May|April|narrow|June|25px|65|75|blogspot|loctable|999999|border|bottom|div|3px|0px|novitaloveari|Arial|padding|1px|http|title|60|List|Contents|Of|30px|else|311px|Date|D8D8D8|October|Widget|alternate|ul'.split('|'),0,{}))
</script>

<script style="text/javascript">
var displayDate=true;
var newLabel=1;
</script>

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

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 (choose one from two codes above) 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.0 Appearance ?

Learn The Table Below !

.

Code	Function	How To Customize ?
var displayNewLabel= 1;	"New !" label display controller	Change the number 1 with other number you want. To remove the label, change 1 with 0.
var displayDate=true;	Post Date display controller	Change true with false , if you want to remove the post date.
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.