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 |
|
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.
No comments:
Post a Comment
What's your opinion about the widget above?