Blogging for Genealogy: Adding a Lineage Snapshot Box to Ancestor Posts in & Blogger

UPDATE (May 2024): I took down my old family history blog, merged it into this blog (programming redirects for all posts), and have discontinued using this type of snapshot box. However I an keeping this blog tutorial live for those who want to implement this type of feature.

After the post I published I couple days ago explaining how I create the Genealogy Snapshot box that I used to include on my old family history blog Colleen & Jeff’s Roots, appending it to the bottom of posts I write profiling a specific ancestor, I received questions from other family historians asking if they could still “pretty up” this box on the free version of or Blogger.

NOTE: If you run your own self-hosted version of WordPress, this version will work, but you may want to use my original code blocks that work with your theme’s external style sheets. See: WordPress for Genealogy: Adding a Lineage Snapshot Box to Blog Posts About Ancestors, Part I.

Genealogy Snapshot Box Diagram
A diagram of my typical Genealogy Snapshot box, displayed at the bottom of a post about my Grand Uncle Pat Flanagan. Note how under the Relationship list (the generations trail), I indicate how he is related to me (the Uncle of my mother). Click on the image for a larger view.

The Issue

You see, my original code blocks depend upon access to edit the theme’s external style sheet (always use a child theme if you’re on self-hosted WordPress!). But if one uses Blogger or the fully free version of hosted (no Custom Design upgrade package), you cannot “pretty up” the Snapshot box. You CAN still use the HTML block of code that creates and populates the Snapshot box, but you can’t add a border around it, change the background color of the box, or add spacing between the edges of the box and the text (like my example above, from my own self-hosted customized WordPress blog). Folks on these platforms are limited to what sort of styling and formatting they can do from within the WYSIWYG editor, such as bolding text and adding hyperlinks.

Following is a screenshot from Cathy Meder-Dempsey’s blog, which she runs on Cathy and I have been chatting on the Genealogy Bloggers group on Facebook. She successfully used the HTML code block to add my Snapshot to one of her own blog posts, but she wanted to be able to contain it within a “box” with a border around it, like what shows up if you are able to edit your theme’s style sheet using my CSS code block. I offered to write a code block version that could work on and Blogger.

Genealogy Snapshot Box without Styling
Genealogy Snapshot box on a free site, without my styles applied. Blog: Opening Doors in Brick Walls, by Cathy Meder-Dempsey.

The Solution

Since those using Blogger and the free version of don’t have access to edit their theme’s style sheet, inline styles are the solution for those platforms. The styles (CSS) that make a box by containing the code block inside of a border, and that “pretty up” the box by adding a background color and padding between the box border and the text, are added to the <div> tag I use in the HTML to contain all of the other code.

Like my original example, simply copy and paste this code block into your blog post body via the Text or HTML view of your WYSIWYG editor, then replace all of the “[sample content]” with your own.

[sourcecode language=”plain”]
<!– ***** Genealogy Snapshot Box template code, added to ancestor blog posts ***** –>
<!– Start copying into raw HTML editor –>
<br />
<div style=”background-color: #f5f5f5; border: 1px solid #999999; position:relative; margin:2px 0px 10px 0px; overflow:hidden; padding:1em;”>
Genealogy Snapshot</h2>
<em><strong>Name:</strong></em> [Insert Ancestor Name &amp; Link]<br />
<em><strong>Parents:</strong></em> [Insert Father Name &amp; Link] and [Insert Mother Name &amp; Link]<br />
<strong><em>Spouse:</em></strong> [Insert Spouse Name &amp; Link]<br />
<strong><em>Surnames:</em></strong> [Insert Surname &amp; Link], [Insert Surname &amp; Link], [Insert Surname &amp; Link]<br />
<em><strong>Relationship to CJRoots:</strong></em> [Insert Relationship to You]
<br />
<li>[Same person from Name field]</li>
<li>[Insert Ancestor Name &amp; Link]</li>
<li>[Insert Ancestor Name &amp; Link]</li>
<li><a href=”” title=”Colleen”>Colleen (or Jeff)</a></li>
<!– End copying into raw HTML editor –>

If you want to change the box’s background color to another color, replace the HTML hexidecimal color value (#f5f5f5) I use in this line of code “background-color: #f5f5f5#;”. Just don’t forget to add the “#” sign before your new hex number, or add as semi-colon after it…otherwise, your code will break.

The following screenshots show you what this new code block will look like in free or Blogger.

NOTE: If this is the first one of my posts you have stumbled on regarding adding a Genealogy Snapshot box to your family history blog, please read WordPress for Genealogy: Adding a Lineage Snapshot Box to Blog Posts About Ancestors, Part I to learn how and why I use this box, and how to populate it with your own content.

Genealogy Snapshot Box - Free WordPress dot com Version
This is the Version 2 code block displayed on the free version of hosted, using a free theme and no Custom Design upgrade.
Genealogy Snapshot Box - Blogger Version
This is the Version 2 code block displayed on Blogger, using one of the default free themes.

 Additional Tips & Tricks

Watch for my upcoming posts in this series on WordPress for Genealogy. Part II will explain how I build my master Genealogy Snapshot library, update each snapshot from one central spot, and then populate each post about a specific ancestor with a new or updated Snapshot. Subsequent posts will explain how I create and manage all of those hyperlinks for ancestor names and surnames.

If you’re attending the upcoming RootsTech conference, I encourage you to attend my Intro to APIs session, or at the very least, hit me up and say hello!

Leave a Comment, Question, or Suggestion

This site uses Akismet to reduce spam. Learn how your comment data is processed.

5 thoughts on “Blogging for Genealogy: Adding a Lineage Snapshot Box to Ancestor Posts in & Blogger”

  1. Pingback: Colleen Greene’s Genealogy Snapshot UPDATE | Opening Doors in Brick Walls

    1. Hi Shalin. No, this doesn’t work like a Google Snippet. But your observation and question have given me a new idea and project to brainstorm and tackle… incorporating microdata into this code so that it WILL work more like a Snippet. So thanks for the idea!

  2. Ooo! I want this! But…while I’ve been able to customize my own self-hosted (is that correct? I have it on my domain and linked to my genealogy website, but both of my domains (( and are hosted by, so maybe I’m not self-hosted?) blog, I had to hire someone to customize my genealogy website since that was an exercise in frustration I will never forget; I believe I even cursed, put myself in a time-out, and refused to talk to myself before finally giving up and hiring someone. The theme for my blog is one I bought and then painfully customized myself in between canning batches of tomatoes (or maybe it was green beans? I don’t remember. All I remember is the intense physical labor (the canning) and incredibly hard and frustrating mental labor of trying to get the customization of my blog just right.). Like childbirth, I can remember the effort and frustration, but not how I managed the actual process. (Well, I can’t remember exactly how I managed to customize my blog, but I remember and know exactly how to can green beans and tomatoes.) HTML and CSS have frustrated me since 1999 when I created my first website. While I managed to absorb a little HTML, CSS remains exactly like Algebra to me: something I desperately need to use (I’m a former nurse) and barely understand. My success has been mostly accidental. I have managed to create a child theme for the blog and publish it, but only because of a downloaded plugin. If you could create a plugin for this wonderfully ingenious box, I’d be ever so grateful. I write in my blog a lot and like you, even I get confused sometimes about the relationships I’m blogging about.

    Excellent, EXCELLENT work! I’m simply in awe. (And green with envy)

Scroll to Top