Blog Template 2.0: Blogger Table of Content Widget. <body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d5560732631221352938\x26blogName\x3dBlog+Template+2.0\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://blogtemplate20.blogspot.com/search\x26blogLocale\x3den_US\x26v\x3d2\x26homepageUrl\x3dhttp://blogtemplate20.blogspot.com/\x26vt\x3d-7942670375567613572', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>
Free Blogger Templates | Home |
.
BlogTemplate20 Free Download Blog Templates
Free Templates
Recent Post(s)
Search Design
Archives
Syndication

AddThis Feed Button

Blog Stats
eXTReMe Tracker
StatCounter tracker
Blogs that link here
Could be useful
Templates Stock
Premium HQ Template
Full Widgetized
Elegant Citrus Fresh
Blue-Dark gradient
Rounded Keko
Fresh Magz Clean
Twitter Style Skin
Travel Logbook
X rated template
BlogArtZine
Cute Girly Cupcake
Brown Magz Style
White Simplicity
Masunurin Simple Rounded
Premium Dashboard
ZinMag News Showcase
Natural Magazine style
Premium RedHat
Money Making Template
Sky dashboard
Premium Blue Sky
Slick Red Web 2.0
Classic w/ Slideshow
Photo Gallery Theme
Theme Showcase
Pro 4 Columns
Neo Simple Green
Club Card Minimalistic
Amature Sexy Template
Feat: Headline Slider
CNN NYT like
Lollipop Woman Stuff
Garland
Papeles Effect
Simple BlueSky
Beach Holiday
Green Light
Glossy Blue
Colorful Transparent
Green Marine
Dark Portfolio blog
Fresh Summer
Valentine Day
Blogy Webby
Azul 2.0
Blogy Freshy
Blogy Illacrimo
Glossy Minimalist
Hello Wiki 2.0
Green Lush Fresh
Kaskus Black
Red Late Show
Red Wine elegant
Blogy Integral
Green Mynix
Red White 2.0
StarCrash web 2.0
Blogy Pro 2 Col.
Blogy Crepusculo
Redish web 2.0
Dark Blue skin
Simple 3 Col.
Beauty Illustration
Fresh Natural
Punk Rock Metal
White Minimalist
K2 Freshy
FireFox Theme
Binary web 2.0
Clear Menu
3 Colomns 2.0
Tabbed menu xml
Tabbed menu classic
iPhone Theme
3 Col Simple
Rounded Corners
Clear Curved Blue
Glossy Glass
Very Web 2.0
Apple Mac skin
Colourful web 2.0
Photoshop CS2 skin
Magazine white
3 Col web 2.0
Blogger Photoblog
PopBlue 3 col.
TypoXP 2.1 skin
Dark Red Glossy
Sandpress 3 col
Elegant Clear web2.0
Elegant Dark web2.0
Rounded tab skin
Fresh blue 2.0
Cute Orange (HOT)
Trendy Blue Marine
Bloggerized AdSense
Orange Yellow Sosuechtig
Blue O2 web 2.0
Premium Blogger
TypoXP2 Standard
18+ Anime Series skin
2 Best Classic skin
NeoSapien New Skin
Simple Glowing Blue Darky
Fresh Green Aura
Ocean Mist Trendy
A new day Elegant
Blue steel 3 columns
Please read our Privacy Policy
Confined space entry dvd
online casino bluebook
online casino gambling guide, to top ranked online casinos and reviews of over 200 gambling related websites. www.onlinecasinobluebook.com also host a casino forum, blog, and casino news articles

Free web 2.0 blogger skins
Spice up your blog by adding our small cool banner inside your blog pages. Simply copy and paste code below. It will not harm your blog, I swear.


Welcome to BlogTemplate20
a blog with free Blogger templates collection.
// Sunday, April 6, 2008

Now you can add a cool widget named BlogToC to display your blog Table of Contents. I found this customizable widget at BeautifulBeta blog. You'll need to do some steps in order to install this widget. But you can customize its look and feel through CSS style sheet.

The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full ToC.

Steps to install this cool widget are:

Go to your Blogger dashboard at edit HTML page. Look for the <b:section> with id=main. This is the section that holds the Blog posts. Change that line as follows:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Then save the template and switch back to Page Elements Tab. Add a HTML page element above your Blog Posts element. Leave the title blank. Add the following html:

<div id="toc"></div>

Then once again save your template.

Add a new page element at you sidebar. Set the title to TOC or you might write it Table of Contents or anything else up to you. And paste this code at contents column:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div><script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Look at the code above. Replace YOURBLOG with your own blog name. Save it again.

Now go to edit HTML page again and add following CSS style. Here it is the part which you can edit to fit your own blog design.

<style type="text/css">#toc { border: 0px solid #000000; background: #ffffff; padding: 5px; width:500px; margin-top:10px;}.toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #ffd595; color: #000000; padding-left: 5px; width:250px;}.toc-header-col2 { width:75px;}.toc-header-col3 { width:125px;}.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:80%; text-decoration:none;}.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:80%; text-decoration:underline;}.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:70%;}</style>

If you are not so understand about editing HTML, then just place it ato the <b:skin> part of the template, or just insert it in the sidebar widget.

Labels: ,



Give us feedback comments
Read 3 comment(s):
  • At April 12, 2008 at 1:46 PM, Blogger Stephen Austin said…
    What I'm looking for is
    A) A way to make the TOC to display all entries chronologically as default without the need for anyone to click on the table head and:
    B) To make the table display permanently without the need for anyone to click on 'Show TOC.'

    If anyone has any insight as to do this, I'd love to hear from them.

     
  • At February 23, 2010 at 9:43 PM, Anonymous Anonymous said…
    discount viagra wholesale stores discount pharmacycolors of premarin pills

    [url=http://www.bebo.com/buylevitraonline1]buy dreampharmaceuticals from levitra online[/url]

     
  • At March 22, 2010 at 7:18 PM, Anonymous Anonymous said…
    run superannuated hat this gratis of instruction [url=http://www.casinoapart.com]casino[/url] totting up at the pushing [url=http://www.casinoapart.com]online casino[/url] commend with 10's of guileless [url=http://www.casinoapart.com]online casinos[/url]. earmark oneself [url=http://www.casinoapart.com/articles/play-roulette.html]roulette[/url], [url=http://www.casinoapart.com/articles/play-slots.html]slots[/url] and [url=http://www.casinoapart.com/articles/play-baccarat.html]baccarat[/url] at this [url=http://www.casinoapart.com/articles/no-deposit-casinos.html]no hop casino[/url] , www.casinoapart.com
    the finest [url=http://de.casinoapart.com]casino[/url] with a chapter UK, german and all for and beyond the world. so after the submissively [url=http://es.casinoapart.com]casino en linea[/url] discontinuity us now.

     
  • Gadget 2.0

    Tracked by ClickAider