Get Creative Commons Widget with Image in Sidebar

In my previous post Protect your WordPress Blog, I’ve dealt with methods of protecting your WebLog from Plagiarism. However I noticed that most people find trouble in uploading the Creative Commons image in the sidebar. One can use plugins, but it’s a paid service. So, I started looking for a way to get the creative commons widget with the image in sidebar without having to pay anything. My search for a good explanation led me to this page: Creative Commons on WordPress. But this page didn’t suit my needs. They’ve just uploaded a few of the images and have asked the users to use them along with a link to creative commons. But what about those who want an image not in their list? Or people who want an image which when clicked will direct the reader to the Creative Commons license?

Well, there’s a way…

I’ve selected an Attribution-Noncommercial-No Derivative Works 2.5 India License.
The image is as follows:
I’ve chosen the following one:

On choosing a banner, you’ll receive an HTML code. Mine was like this.

<a rel=”license” href=”http://creativecommons.org/licenses/by-nc-nd/2.5/in/”><img alt=”Creative Commons License” style=”border-width:0″ src=”http://i.creativecommons.org/l/by-nc-nd/2.5/in/88×31.png”/></a><br/><span xmlns:dc=”http://purl.org/dc/elements/1.1/” property=”dc:title”>The Faster than Light WebLog</span> by <a xmlns:cc=”http://creativecommons.org/ns#” href=”http://fasterthanlight.wordpress.com” property=”cc:attributionName” rel=”cc:attributionURL”>Sanket Totewar</a> is licensed under a <a rel=”license” href=”http://creativecommons.org/licenses/by-nc-nd/2.5/in/”>Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 India License</a>.

Select the whole code and choose the ‘copy‘ option. Then go to the ‘Widgets‘ page under ‘Design‘ for your blog. Choose your ‘sidebar‘ and insert the widget ‘text‘. You may also consider placing this with the Copyscape code (as I’ve done on my Bllog). In the ‘Text Edit‘ section just ‘paste‘ this code in the space provided. Click on ‘Change‘ and ‘Save Changes‘. Now click on ‘Text Edit‘ again. You’ll see that WordPress has edited the code to the following one.

<a rel=”license” href=”http://creativecommons.org/licenses/by-nc-nd/2.5/in/”><img alt=”Creative Commons License” style=”border-width:0;”></a><br><span>The Faster than Light WebLog</span> by <a href=”http://fasterthanlight.wordpress.com” rel=”attributionURL”>Sanket Totewar</a> is licensed under a <a rel=”license” href=”http://creativecommons.org/licenses/by-nc-nd/2.5/in/”>Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 India License</a>

Then we need to edit it a bit. Change
<img alt=”Creative Commons License” style=”border-width:0;”>
to
<img style=”border-width:0;” src=”http://i.creativecommons.org/l/by-nc-nd/2.5/in/88×31.png” alt=”Creative Commons License” />

The code then looks as follows:

<a rel=”license” href=”http://creativecommons.org/licenses/by-nc-nd/2.5/in/”><img style=”border-width:0;” src=”http://i.creativecommons.org/l/by-nc-nd/2.5/in/88×31.png” alt=”Creative Commons License” /></a><br><span>The Faster than Light WebLog</span> by <a href=”http://fasterthanlight.wordpress.com” rel=”attributionURL”>Sanket Totewar</a> is licensed under a <a rel=”license” href=”http://creativecommons.org/licenses/by-nc-nd/2.5/in/”>Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 India License</a>

Click on ‘Change‘ and ‘Save Changes‘. And open your blog in another window. Hurrah, now you can see the image as well. The image also acts as a link. If you click on it, you’ll be directed to the license page.

Thank you for reading this post. Your comments, pingbacks, ratings, reviews and any other contributions are greatly appreciated.