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.

Comments

  1. John Murphy says:

    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. Phil, thanks for this post.
    I added RefTagger to my blog a few weeks ago & it is brilliant.

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

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

  5. 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. 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. Phil,
    You’re my hero!
    I hate it when I don’t click “done spellchecking”.
    Lesson learned.
    This is an amazing tool.

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

  9. 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. 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. 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 says:

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

  13. 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. How do I add this to Typepad?

  15. 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. 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. 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 says:

    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. 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. 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 says:

    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. 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. 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. 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. Hmm. Here’s what I see: http://screencast.com/t/Sj8DVwepZz. What browser are you using?

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

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

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

  29. Any headway?

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

  31. 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. Okay. Thanks for the follow-up. Glad it’s working properly for you now!

  33. 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. 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. 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. 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. Thanks for this great tool, I didn’t mind creating the links manually, but this definitely saves time!

  38. 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. 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. 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. 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. Thanks for reporting this, Sheri. We’ll look into it and hopefully have a fix very soon.

  43. 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. We’re looking into this and will let you know when it is fixed.

  45. 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. 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. 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. 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. 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. You’re welcome. Glad you’re enjoying it! You’ll find the info you need to customize the styles here and here.

  51. 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. If you’re having trouble, give our RefTagger forum a try.

  53. 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. 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. 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. 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. 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. How do I add the reftagger to a facebook note? Anyone knows?

  59. 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.

    • 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.

      • 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 says:

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