Adding RefTagger to a Blogger Blog

A few days ago someone asked if we would make it possible to use RefTagger on a Blogger blog. I was happy to let him know that RefTagger works very well with Blogger, and I explained to him two ways to get it up and running on his blog in just a couple of minutes.

It occurred to me that not everyone who has a blog is used to messing with code and editing template files, so I thought I’d do a brief tutorial here on the blog.

If you use Google’s Blogger and would like to add RefTagger to your site, here are two methods for setting it up.

Method 1: Adding a Page Element

Perhaps the simplest way for beginners to get RefTagger up and running is to add a page element. From your Blogger dashboard, click “Layout.” You’ll be taken by default to the “Page Elements” tab. Click “Add a Page Element” at the bottom of the page (not the one in the sidebar), and choose “HTML/JavaScript.” Leave the title blank, and paste in the customizable code that you get from the RefTagger page. Then click “Save.” Blogger should add the new page element to the bottom of your layout page automatically. If it appears in your sidebar, simply drag it to the very bottom of the footer. If you make any changes, make sure to save it before leaving the page.

When you’re done, your page should look something like this:

Method 2: Modifying Your Template File

The alternate method is to manually add the code before the closing body tag in your template file. From your Blogger dashboard, click “Layout.” Then click “Edit HTML.” Scroll all the way to the bottom of the code and paste in the customizable code that you get from the RefTagger page right before the closing body tag (i.e., right before </body>). Then click “Save Template.”

That’s it. RefTagger should now be up and running on your Blogger blog.

If you have any trouble or would like to see a tutorial for another blogging platform, leave a comment on this post or send an email to reftagger@logos.com.

On Facebook? Join the Discussion

63 Responses to “Adding RefTagger to a Blogger Blog”

  1. John Murphy June 26, 2008 at 4:41 am #

    Thanks for the blog post, Phil. I wanted to try RefTagger but didn’t have the time to figure out where to put the coding on blogger. I pasted it in just like you explained and it works great!

  2. John Finkelde June 26, 2008 at 7:04 am #

    Phil, thanks for this post.
    I added RefTagger to my blog a few weeks ago & it is brilliant.

  3. Stan McCullars September 15, 2008 at 3:55 pm #

    Wow! I can’t believe this is possible.
    I noticed that Colossians and Ephesians don’t seem to be referencing on my site.

  4. David Nelson September 15, 2008 at 8:26 pm #

    When I open Dashboard, Layout is not an option. I have: Posting, Settings and Template.

  5. Phil Gons September 15, 2008 at 8:37 pm #

    Hmm. Perhaps you never updated to the new blogger.
    You should still be able to use the second method. It’s likely that you’ll find the place to add the code under the Template tab.
    Let me know if I can help further.

  6. Phil Gons September 15, 2008 at 8:44 pm #

    Stan,
    I took a look at your site, and it appears that your code has some stuff in it that is interfering with RefTagger’s ability to recognize some of your references.
    The code span class=”blsp-spelling-error” id=”SPELLING_ERROR_2″ is wrapped around “Eph” breaking it’s connection with 6:10-18. The same thing is going on with your Colossians reference. If you strip out that unnecessary code, RefTagger will tag these properly.
    Hope this helps.

  7. Stan McCullars September 16, 2008 at 3:18 am #

    Phil,
    You’re my hero!
    I hate it when I don’t click “done spellchecking”.
    Lesson learned.
    This is an amazing tool.

  8. Phil Gons September 16, 2008 at 8:08 am #

    I think you can probably find a better hero, :) but I’m glad that did it for you. Enjoy!

  9. Jessie September 21, 2008 at 1:13 pm #

    Hi Phil
    I am very new to the ‘blogosphere, but I am thoroughly enjoying and growing in the Lord as I learn new things every day. I am also excited by all the new tech stuff I am learning. Even my very computer tech son is impressed. The real reason I am writing is to thank you for this wonderful tool. I have been copying and pasting from another site or typing out directly, which takes some time. I have just pasted it into my blogger blog, and itimmediately converted every Bible ref to your style. I know this will help further the Gospel of Christ as we each move in our lives for Him.
    In Jesus, Jessie

  10. Jessie September 23, 2008 at 3:31 am #

    Hi again.
    I just want to say that I have managed to now add the RefTagger tool to my blog. This is an awesome tool and such fun to play around with. Thank you so much for this.
    In Jesus
    Jessie

  11. bjnotbk October 3, 2008 at 3:27 am #

    Phil,
    thank you for bringing this to my attention. This is an incredible tool and a blessing. You rock brother.
    Blessings!
    bjnotbk

  12. Phil Gons October 3, 2008 at 7:52 am #

    You’re very welcome. Glad you’re finding it helpful!

  13. marci October 7, 2008 at 8:42 am #

    could you check out my blog to see what i’m doing wrong. i can’t figure out why it picks it up only sometimes. thanks

  14. William Guice October 8, 2008 at 9:00 am #

    How do I add this to Typepad?

  15. Phil Gons October 8, 2008 at 9:17 am #

    The only option that I’m aware of that works is to use an Advanced Template that let’s you edit the code and paste the customizable RefTagger code into the footer right before the closing body tag.

  16. route 66 christian music group . . . October 30, 2008 at 10:59 am #

    Hey Phil you’re a genius! Thank you very much for sharing this cool code with others. It’s brill and a real ministry in itself.
    God bless . . .
    Bob

  17. Jeff Jenkins October 30, 2008 at 12:17 pm #

    I have been using RefTagger on my own blog site, and it has been very helpful. Thank you for developing this program, Phil, and kudos on a job well done! Most people are too lazy to look up a bunch of Scripture verses, and this way, they can see it right away! I think this is helpful for causing people to become a bit more familiar with Scripture, as well, because it exposes them to what the verse actually says.

  18. Rachael Starke November 11, 2008 at 9:08 pm #

    Hi Phil,
    Thanks so much for this great tool, which is so great at other people’s sites, but not, yet, mine. :) The code actually displays in the body of a new blog post, but when I try and preview it – nothing. I am beginning to mutter decidedly unbiblical things. I’ve tried both methods you’ve described for Blogspot. Any thoughts? Blessings, brother.

  19. Phil Gons November 11, 2008 at 9:24 pm #

    Hi, Rachael, I’d be happy to try to help. What I’ve done with some other Blogger folks is have them add philgons@gmail.com as a contributor to their blog and then, once I accept, make me a temporary admin. I’d be happy to do that for you if you’d like.

  20. JTR November 23, 2008 at 7:14 pm #

    This is awesome! I adding it to my blogger and told everyone I know who blogs!! GREAT!! Very kind of you to offer it for free for those of us who blog on a shoestring, and a thin shoestring at that!

  21. Rachael Starke December 14, 2008 at 1:57 pm #

    Hi Phil,
    I’m so sorry it’s taken me this long to see this! I’ll do that tonight, (if I can figure that part out! :) )
    rs

  22. Rick Shott December 31, 2008 at 2:08 pm #

    I saw this on Desiring God and thought that it would be a great addition to my website, especially the devotionals. It does a fine job of creating links, but it does not do pop-ups. I am not sure why. I have a test post up, if you would like to look at it, as previous posts were hand linked.
    Thanks
    Rick

  23. Rick January 30, 2009 at 2:16 pm #

    Hi,
    I was wondering if you have looking into the popup windows not appearing in blogger, that I noted. I am using the code now and it links over to the appropriate web page, but no popup. I am using Firefox, but IE failed to make popups as well.
    Rick

  24. Jaycen February 11, 2009 at 6:33 am #

    Functional-wise, the code works. However, the tooltips don’t appear anywhere in proximity to my verse reference that calls them. It appears either way of to the right or down below.
    I have moved the js code around in my template and it makes no difference, it still appears no where near the verse that it references.
    Jaycen

  25. Phil Gons February 11, 2009 at 6:45 am #

    Hmm. Here’s what I see: http://screencast.com/t/Sj8DVwepZz. What browser are you using?

  26. Jaycen February 11, 2009 at 6:50 am #

    Thanks for the reply! I’m using IE7 (Ver. 7.0.5730.11) and my screen resolution is 1680×1050.

  27. Jaycen February 11, 2009 at 8:29 am #

    Here’s what I see…. http://screencast.com/t/6XXTrpdM1

  28. Phil Gons February 11, 2009 at 9:45 am #

    Hmm. Yep. I’m seeing the same thing in IE7. I’ll get this reported, and we’ll look into it.

  29. Jaycen February 13, 2009 at 5:16 am #

    Any headway?

  30. Phil Gons February 13, 2009 at 8:54 am #

    I haven’t heard anything yet. Let me check again for you.

  31. Jaycen February 16, 2009 at 10:49 am #

    Phil,
    I think the issue resided more with the XML theme I was using as opposed to the code itself. I have re-themed my blog and all appears to be well. Thanks for the time.

  32. Phil Gons February 18, 2009 at 10:24 am #

    Okay. Thanks for the follow-up. Glad it’s working properly for you now!

  33. Ray April 7, 2009 at 7:28 am #

    It seems the this blog is out of date because in my blogger it doesn’t have elements but gadget. Can you help further??

  34. Phil Gons April 7, 2009 at 9:17 am #

    Gadget is just the new name for Page Element. The instructions should still work the same. Let me know if you need further help.

  35. Mark May 2, 2009 at 1:06 am #

    I have not posted a blog yet. I was composing a blog and did a preview but the bible verse references do not show in the preview when I hoover over the verse. Will they show only after I post it or do you think I did something wrong with the RefTagger code? I used method #1 for loading the code.

  36. Phil Gons May 2, 2009 at 7:15 am #

    Hmm. I’d think it would show up in the preview, but this might not be the case. I wouldn’t hurt to go ahead and publish a blog post to see if it’s working properly. You can always delete the post once you’re done. If it doesn’t seem to be working, we’ll do some troubleshooting and see if we can’t get it up and running for you.

  37. Tobias June 6, 2009 at 12:23 am #

    Thanks for this great tool, I didn’t mind creating the links manually, but this definitely saves time!

  38. Disciple July 1, 2009 at 11:02 pm #

    Hey, this is the best method for a tooltip I’ve come across yet. Thank you for creating a seamless integration from my blog site.
    I do have a couple questions for you though…I noticed that although I use FF as a browser and everything naturally works great, I find that IE does not seem to recognize changes I make in the css style. I took a peek at some of the other sites mentioned and noticed that IE does recognize changes there. So, I looked at their source page and found that they added another line pointing to an external css style sheet in their script! Does the java script not allow IE to render the overridden default css style?
    Also, I noticed that the scripture references in my pages show up colored the same as the link color of my template css. Is there any way to change the link color of the scripture reference only? I’ve tried adding in various changes to the css but to no avail.

  39. Phil Gons July 2, 2009 at 9:32 am #

    The custom CSS should work fine in IE and Firefox. See an example here: http://www.biblestudymagazine.com/interactive/goliath/. You might need to do a hard refresh (hold down shift) to clear out your cache. You can point to an external stylesheet or just add all of the appropriate styles to your site’s main stylesheet.
    We give you full control over that in the CSS. Just define the classes .lbsTooltipFooter a:link, .lbsTooltipFooter a:visited, .lbsTooltipFooter a:hover (together or separately) to be whatever you want.

  40. Disciple July 2, 2009 at 12:54 pm #

    Thanks, Phil, for your reply.
    I checked out the source page of the site you mentioned. It did work in my IE so I wondered what was different. I compared the two side by side and saw very little difference between the two so, I commented out my styles and pasted theirs in. Same ole, Same ole, it worked in FF but not in IE! I did notice some additional styles included in theirs that were not part of my original styles…ie: (.tooltip a:link; etc..). These were in addition to the styles I got…ie: (.lbsTooltip a:link; etc..). I wondered if these were related, so I commented them out and now FF nor IE renders the popup correctly! Did they get some styles from a different place than “http://bible.logos.com/Content/ReferenceTagging.css”? I don’t have any way to put a stylesheet on another server to point at, otherwise that would have been my second choice.
    In any case, I figured out a way to change the scripture reference colors on my page another way, without them taking on the same color as my other links! You mentioned (.lbsTooltipFooter a:link, .lbsTooltipFooter a:visited, .lbsTooltipFooter a:hover) but these are the links in the footer of the popup…I was talking about the scripture reference on my page that RefTagger renders as a link! As far as deleting out my cache…that’s just too old! I been playing with this for 10 years and keeping my cache directory empty is a common chore nowadays.
    I’m assuming something else in my stylesheet is interfering with the popup in IE. Personally, I get to a point where IE just get’s me so frustrated that I just place a disclaimer against it and for FF and let it be so! Over the years, I have found IE to be one of the most pugnacious browsers on the market…it’s just too bad it comes default on most computers…people just don’t realize what their missing by using IE!
    Thanks Phil, RefTagger is a very nice piece of code!

  41. sister sheri July 3, 2009 at 8:18 pm #

    This is amazing…
    Sometimes on my blog RefTagger adds “NIV” after the reference and sometimes it doesn’t.
    It will look like
    Romans 1:1 NIVNIV
    or
    Romans 1:1 NIV
    or
    Romans 1:1
    It’s not a big deal… just wondering?

  42. Phil Gons July 4, 2009 at 9:45 am #

    Thanks for reporting this, Sheri. We’ll look into it and hopefully have a fix very soon.

  43. Disciple July 6, 2009 at 5:31 am #

    Bingo Phil…I found out what’s causing IE to not render the changes made in the css styles sheet. Apparently, the instructions for inserting the line:
    Logos.ReferenceTagging.lbsCssOverride = true;
    were not specific enough for IE. When inserting this line, IE prefers it to be listed first as opposed to just:
    somewhere between the line
    <script type=”text/javascript”>
    and
    </script>
    I added it in like anything else that would be added in, at the bottom before the closing of the script. Apparently, IE has an issue with that!
    Now if anyone comes across this problem, they might try this as well.

  44. Phil Gons July 6, 2009 at 3:30 pm #

    We’re looking into this and will let you know when it is fixed.

  45. Rick Ianniello October 11, 2009 at 5:23 am #

    Phil – I’m a Libronix lover and longtime user of reference tagger but for the life of me I just cannot figure out how to not have the “L” show up sending anyone that clicks on that to Libronix … which of course fails if they don’t have it … which of course they should but …

  46. Phil Gons November 13, 2009 at 11:29 am #

    Rick, just uncheck the box next to “Insert an icon linking to the verse in Libronix DLS.” Alternatively, remove these two lines of code:
    Logos.ReferenceTagging.lbsAddLibronixDLSLink = true;
    Logos.ReferenceTagging.lbsLibronixBibleVersion = “ESV”;

  47. Diane Dekker February 3, 2010 at 10:52 am #

    I copied the text from Reftagger but there is no paste button to paste it into the box that opens up on the layout page. Is there another way to paste or do I just have to copy it by hand?

  48. daniel February 23, 2010 at 4:50 am #

    This is the best thing i ever done to my blog… so Thank you…bt,Please, include our language(indonesian verse > ITB or IBIS)… God bless!

  49. Sunny March 3, 2010 at 11:03 am #

    Hello Phil,
    Thank you so much for this wonderful tool! :-)
    I LOVE IT and so do my readers/subscribers.
    One question:
    How do I customize RefTagger colors so it will blend better with my site?
    Bless you!
    Sunny

  50. Phil Gons March 3, 2010 at 1:52 pm #

    You’re welcome. Glad you’re enjoying it! You’ll find the info you need to customize the styles here and here.

  51. Eliezer March 3, 2010 at 8:45 pm #

    Hi, I added the code to my blog but..how do you make it work? when you write an entry and you add a link to a Bible verse..what code do you put so that it pops out?
    Thank you,

  52. Phil Gons March 4, 2010 at 8:49 am #

    If you’re having trouble, give our RefTagger forum a try.

  53. William Birch March 25, 2010 at 6:47 pm #

    I have two blogger blogsites: http://classicalarminianism.blogspot.com/ and http://jacobusarminius.blogspot.com/ and use ref tagger in the NKJV for both sites. However, when using IE, for the Classical Arminianism site, Scriptures pop up in the HCSB, but remain NKJV for the other site. Why? What have I done wrong? Can you please help me. Thank you so much.

  54. William Birch March 26, 2010 at 8:05 am #

    As per my former question, concerning IE and the links on one of my blogs, it must be something awry with my IE on my laptop. I viewed my blog through IE on two different computers and it worked fine. I don’t know what must be done for my laptop where IE is concerned, but everything is fine. Thank you.

  55. Phil Gons March 26, 2010 at 10:43 am #

    Hmm. I can’t reproduce this with IE 7 or IE 8. Which version of IE are you using? You might need to clear your browser cache.

  56. Lance May 15, 2010 at 9:06 pm #

    I am building a website with a blog on it via Yola.com. It seems Blogger is the platform they blog on, but creating blogs is much different than shown above. While creating a post, there is an option to do custom HTML. All of my HTMLing works fine in the platform, except RefTagger. Any info?
    Thanks!

  57. Stormbringer May 29, 2010 at 1:00 pm #

    Sure, after I post a comment, NOW I think of a question for you. How do you turn it off? That is, if I am going to put in a Scriptural quote in large type and give the reference, I don’t want RefTagger getting involved in that situation. So, is there a deactivation on an “as not needed” basis?

  58. Elena June 3, 2011 at 8:17 am #

    How do I add the reftagger to a facebook note? Anyone knows?

    • Jayson Bradley June 7, 2011 at 9:21 am #

      Elena,

      Reftagger doesn’t currently have a Facebook app.

  59. Melanie October 21, 2011 at 2:46 pm #

    Hello Phil,

    Thank you for making such a wonderful tool available, and for showing how to use RefTagger with Blogger. I have known about RefTagger for maybe a year or so, but I always thought it would be difficult to incorporate it into my blog. As a result, as of last night’s three-hour writing session, I have been manually creating hyperlinks (i.e., typing the scripture reference into the body of the blog, looking up the scripture on BibleGateway.com, copying the URL, going back to my blog entry then creating the hyperlink). After reading your instructions on using RefTagger with Blogger, I am going to use your MUCH easier method going forward. I spend a lot of time writing, including on my rather extensive personal website, and have decided to blog on a weekly basis rather than just whenever the mood strikes. Using RefTagger will save me many hours.

    I have one question before I add the code into my blog’s page element. To date, I have written about 14 blog entries, and there are LOTS of scriptures for which I’ve created hyperlinks. What will happen to those hyperlinks once I’ve copied the RefTagger code? Will they stay as they are, or will the code override the manual links?

    Thanks for providing so many of us with a tool to further spread the Gospel of Jesus Christ.

    Take care, and continue to be blessed.

    • Phil Gons October 21, 2011 at 4:32 pm #

      Thanks for writing, Melanie.

      RefTagger can convert manually added hyperlinks, but currently only does so for hyperlinks to our online Bible site Biblia.com. (BTW, you might want to consider using Biblia.com instead of BibleGateway.com. :) )

      If you want to make sure that your first 14 blog entries get the tool tips, you’d have to strip out the links.

      Hope this helps.

      • Melanie October 22, 2011 at 8:45 pm #

        Hi again Phil,

        Thank you SO MUCH for such a quick reply and for the information. I added RefTagger code to an html page element and wrote a test blog. The links worked BEAUTIFULLY! I then went back to check the manually created links on the most recent post to see whether they still linked the same as before, and they did. RefTagger will save me MANY hours and as a result, writing will be even more enjoyable.

        With regard to stripping out the links on my previous posts, I’ve decided to leave them for now. Though I love the way RefTagger looks when the scriptures are hovered over (nice and clean and not requiring a mouse click), there are so many manually created links in my previous posts that it would take quite a bit of time to remove them. I may do it in the near future, though, for consistency sake.

        I’m thankful to God for showing me something new in accomplishing His plan for me, and thankful for you and your software!

        Have a blessed day and keep up the great work!

  60. Matt Reno April 26, 2012 at 1:04 pm #

    Can you use reftagger with the “Dynamic View”? I can’t figure it out. Thanks!