Friday, December 20, 2013

Hover over Words to Get the Meaning for Blogger and WordPress

Retrieved Dec. 20, 2013 from here
I'm working on a blogging project with my first-year high school students. During this experience, there are a lot of things that I have to learn. As a sharing fan, I decided to write a series of posts to document every skill I acquired and every tool I explored to accomplish the aims of this project and meet my students' needs. Among many things that my students need is a way to find the meaning of the new words that they encounter in the required tasks. I thought of some ways like linking the class blog to an online dictionary, and embedding a Bing or Google widget to translate the whole site, but they didn't work well with my students. 

Today, I found a code that enables my students to hover over the difficult or new word to get its meaning while reading. I tried this code on both Blogger and WordPress and it worked well with me. To do this, please follow the steps below:
  • In the post you want to embed this feature, click the "HTML Tab" in Blogger and "Text Tab" in WordPress.
  • Copy the following code and paste it there: 
  • <span style="cursor:help;" title="DEFINITION">WORD</span>
  • Note: Click here to copy the link because this blog is right-click protected.
  •  Highlight "Word" and write the word you want to translate.
  •  Highlight "Definition" and write the meaning of this word in the language you want.
  • Go to the "Compose" mode in Blogger or "Visual" mode in WordPress and hover over the word to see what will happen.
  • Here is an example:

    I hope this tip would be helpful!
    If you have more ideas about how to get the meaning of new words while reading, please share them with me. 

    No comments:

    Post a Comment