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 !
Code | Function | How 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 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.