3.1 Writing Neat Articles: Table of Contents, Buttons, Tables, and Sitemap

This lesson is different: the code is written directly in the article editor, not in the Layout. You will create a table of contents, buttons, tables, a contact form, and a Sitemap page, then choose a comment system.

In This Lesson

1. 1Code inside articles
2. 2Creating tables
3. 3Sitemap page
4. 4Comment system

Code Inside Articles

Article code is written while you are writing a post or page. There is one important rule: most of it must be bolded.

Place it inWhile writing in New post or New page in Blogger (not in the Layout)

Code written directly in the body of the post. {getToc} creates an automatic table of contents from subheadings. {getButton} turns a link into a button. $ads={1} and $ads={2} place Post ADS 1 and 2 ads exactly at that point. {contactForm} installs a contact form. {leftSidebar}, {rightSidebar}, {fullWidth} set a left sidebar, right sidebar, or no sidebar for that post only.

Figure 2. Article code must be bolded, except buttons that are turned into links.

Ready-to-paste code

{getToc} $title={Table of Contents}

{getButton} $text={Download Form} $icon={download} $color={#1057c8}

$ads={1}

$ads={2}

{contactForm}

{leftSidebar}   {rightSidebar}   {fullWidth}

Steps

1. All code except getButton must be bolded. Write the code, select the text, then click the B (Bold) button. In HTML mode it looks like <b>{getToc} $title={Table of Contents}</b>.
2. getButton: write the code, select the text, then turn it into a link (chain icon or Ctrl+K) to the destination address. Center the paragraph so the button is centered.
3. getToc: use the Heading format (not just bold text) for subheadings so they appear in the table of contents.
4. contactForm: best suited for a Page named Contact.

What each part of the code means

Part	Meaning
$icon	cart, contact, download, gift, info, link, paypal, preview, share, whatsapp
$color	Button color in hex code, for example #1057c8.
$size={1}	A larger button (any value).
$info	Small caption text inside the button.
$title	Table of contents title. If empty: Table of Contents.

Figure 1. Table of contents (collapsed) and button. Icons appear on the real blog.

Creating Tables

The Blogger editor has no table button, but the HTML method is easy: copy, then replace the contents.

Place it inWhile writing New post or New page: click the pencil icon in the toolbar then select HTML view

The Blogger editor has no table button, so tables are created with HTML code. The template automatically tidies tables: column headers have a dark blue background, rows alternate, and wide tables can be scrolled sideways on mobile with a "Swipe" hint.

Ready-to-paste code

<table>
<tr><th>Instrument</th><th>Risk</th><th>Return</th></tr>
<tr><td>Deposit</td><td>Low</td><td>4% - 5% per year</td></tr>
<tr><td>Stocks</td><td>High</td><td>Variable</td></tr>
</table>

<table>
<tr><td><b>Package</b></td><td><b>Price</b></td></tr>
<tr><td>Basic</td><td>$5.00</td></tr>
<tr><td>Pro</td><td>$15.00</td></tr>
</table>

Steps

1. Open New post. Click the pencil icon in the toolbar, then select HTML view.
2. Paste one of the codes above where the table will appear, then replace the contents. Add a row by copying one <tr>...</tr> line.
3. Switch back to Compose view to check, then click Publish.
4. Don't use <thead>. In this template, column headers with thead appear faded and almost unreadable. Use one of the two methods above.

What each part of the code means

Part	Meaning
<tr>	One row.
<th>	Header cell. If all cells in the first row use th, that row becomes a column header with a dark blue background.
<b> in the first row	Second method: if all cells in the first row contain bold text, that row is also recognized as a column header.
<td>	Content cell. May contain text, links, or images.
<th> at the start of another row	Becomes a row header (light blue background).
Old attributes	border, width, cellpadding, and the like are removed automatically, so they don't need to be written.

Figure 3. Result in the template: both methods produce a dark blue column header

NoteA table containing only one image (one cell) is not modified, because it is treated as an image layout.

Sitemap Page

A Sitemap makes it easy for readers and search engines to find all your articles.

Place it inBlogger → Pages → New page → pencil icon → HTML view. Then add its link in Header Menu or Footer Menu in the Layout

A page for readers containing all articles grouped by label, complete with dates. This page also adds internal links so search engines can more easily find old articles. The list is loaded automatically from the Blogger feed, so new articles are included immediately without you changing anything.

Figure 5. Flow for creating a Sitemap page from New page to the menu.

Ready-to-paste code

<div id="peta-situs">Loading article list...</div>
<script>
(function(){
  var box=document.getElementById('peta-situs'),step=150,max=1000,all=[],start=1;
  function esc(s){return String(s).replace(/[&<>"]/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]})}
  function load(){
    fetch('/feeds/posts/summary?alt=json&max-results='+step+'&start-index='+start)
      .then(function(r){return r.json()})
      .then(function(d){
        var e=(d.feed&&d.feed.entry)||[];all=all.concat(e);
        if(e.length===step&&all.length<max){start+=step;load()}else render();
      })
      .catch(function(){box.textContent='The article list could not be loaded. Reload this page.'});
  }
  function render(){
    if(!all.length){box.textContent='No articles yet.';return}
    var g={},keys=[];
    all.forEach(function(e){
      var l=(e.link||[]).filter(function(x){return x.rel==='alternate'})[0];if(!l)return;
      var c=(e.category&&e.category[0]&&e.category[0].term)||'Unlabeled';
      if(!g[c]){g[c]=[];keys.push(c)}
      g[c].push({u:l.href,t:(e.title&&e.title.$t)||'(untitled)',d:((e.published&&e.published.$t)||'').slice(0,10)});
    });
    keys.sort(function(a,b){return a.localeCompare(b)});
    var h='<p><b>'+all.length+' articles</b> in '+keys.length+' categories. <a href="/sitemap.xml">sitemap.xml</a></p>';
    keys.forEach(function(k){
      h+='<h3>'+esc(k)+' ('+g[k].length+')</h3><ul>';
      g[k].forEach(function(p){h+='<li><a href="'+esc(p.u)+'">'+esc(p.t)+'</a> <small>'+esc(p.d)+'</small></li>'});
      h+='</ul>';
    });
    box.innerHTML=h;
  }
  load();
})();
</script>

Steps

1. Open Pages → New page. Fill in the title, for example Sitemap.
2. Click the pencil icon in the toolbar, select HTML view, clear its contents, then paste the entire code above. Don't switch back to Compose view before saving, because the editor can break the script.
3. Click Publish. The page address is usually /p/peta-situs.html.
4. Layout → Footer Menu (or Header Menu) → Add a Link: Name Sitemap, URL /p/peta-situs.html.
5. For Google: Blogger already creates an automatic sitemap at yourblogaddress/sitemap.xml (articles) and yourblogaddress/sitemap-pages.xml (pages). Submit those addresses in Search Console → Sitemap. The Sitemap page above is for readers, not a replacement for sitemap.xml.

What each part of the code means

Part	Meaning
step=150	The number of articles requested per fetch.
max=1000	The limit on the number of articles displayed. Increase it if you have more than 1000 articles.
Grouping	Uses the first label of each article. Articles without a label go into Unlabeled.

Figure 4. Result: articles grouped by label (sample test data)

NoteA single article with several labels appears only under its first label. The group title follows the label name exactly.

Comment System

Choose the comment system that suits your readers.

Place it inLayout → Main Posts → Edit → the Comments section, the Label field (the field name may differ slightly in your Blogger)

Chooses the comment system used on articles. If the field is left empty, Blogger comments are used.

Ready-to-paste code

$type={blogger}

$type={disqus} $shortname={your-disqus-name}

$type={facebook} $lang={en_US}

$type={hide}

Steps

1. Open Main Posts → Edit, find the Comments setting.
2. Fill in the Label field with one of the codes, then Save.

What each part of the code means

Part	Meaning
blogger	Default Blogger comments.
disqus	Requires $shortname from your Disqus account.
facebook	$lang is optional for language, for example en_US.
hide	Hides comments.

ExerciseWrite a short article with three subheadings (Heading format), add a bolded {getToc}, one table with the first row containing <th>, then one download button.