Blogging for Genealogy: Adding a Lineage Snapshot Box to Ancestor Posts in WordPress.com & 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 WordPress.com 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.

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 WordPress.com (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 WordPress.com. 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 WordPress.com and Blogger.

The Solution

Since those using Blogger and the free version of WordPress.com 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;”>
<h2>
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 />
<ol>
<li>[Same person from Name field]</li>
<li>[Insert Ancestor Name &amp; Link]</li>
<li>[Insert Ancestor Name &amp; Link]</li>
<li><a href=”https://www.blogger.com/people/robledo-colleen/” title=”Colleen”>Colleen (or Jeff)</a></li>
</ol>
</div>
<!– End copying into raw HTML editor –>
[/sourcecode]

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 WordPress.com 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.

 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!