After the post I published I couple days ago explaining how I create the Genealogy Snapshot box that I use on my 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.
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.
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. You can also grab the code from my GitHub channel.
<!-- ***** 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 & Link]<br /> <em><strong>Parents:</strong></em> [Insert Father Name & Link] and [Insert Mother Name & Link]<br /> <strong><em>Spouse:</em></strong> [Insert Spouse Name & Link]<br /> <strong><em>Surnames:</em></strong> [Insert Surname & Link], [Insert Surname & Link], [Insert Surname & 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 & Link]</li> <li>[Insert Ancestor Name & 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 -->
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!
5 thoughts on “Blogging for Genealogy: Adding a Lineage Snapshot Box to Ancestor Posts in WordPress.com & Blogger”
Pingback: Colleen Greene’s Genealogy Snapshot UPDATE | Opening Doors in Brick Walls
Thank you Colleen for going to the extra trouble to help. I’m so happy with the way mine turned out after I added the code for your “pretty box.”
Thanks for the tutorial. Isn’t this like snippet for Google?
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 schema.org microdata into this code so that it WILL work more like a Snippet. So thanks for the idea!
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 ((www.onlyarethusa.com and http://www.lemon-knapp.org)) are hosted by simplyhosting.net, 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)