A New Badge--Add Your Own Covers!

[Julia_C]

Add this new custom badge to your website or blog and show readers your cover. When clicked it leads readers directly to your product page.

Step 1: Copy and paste the code below into your web page or blog.

Step 2: Replace the 2 locations in the code that now appear as XXX’s with your title’s EAN number (located on your product details page.) Be careful not to add extra characters or spaces.

Step 3:  Add your cover. On BN.com, pull up a search page to show your cover as a thumbnail. Right click on your cover image then scroll down and click on properties. A pop up window will appear. Copy and paste the Address (URL) into the location in the code below that says image-url-goes-here. Again be careful not to add in extra characters or spaces.

Here's the code you'll need:

<a style="display:block; width:180px;" title="I'm a PubIt! Author! Buy my book on BN.com" rel="nofollow" href="http://search.barnesandnoble.com/books/product.aspx?EAN=XXXXXXXXXXXXX&cm_mmc=Pubit-_-Badge-_-Blog-_-XXXXXXXXXXXXX" target="_blank">

<p style="background:url(http://img1.imagesbn.com/pimages/pubit/resources/pubit_badge_custom.jpg) no-repeat; width:180px; height: 152px;">

<img src="image-url-goes-here" width="70" border="0" style="margin: 23px 0 0 7px;" />

</p>

</a>

[JenniferBecton]

I can get the thumb of my book, but the PubIt badge part is missing. What am I doing wrong?

[Julia_C]

Try removing the spaces between the lines of code. Some blog editors add in break symbols.

Hope this helps!

[cebj25]

I can get it to work perfectly well on my Wordpress blog, but not on Blogger or Webs.com. The picture isn't aligned, it's either below the "I'm a Pubit author" or overlapping it.

Cool idea though.

[Julia_C]

I got it to work in Blogger! Blogger adds tags to mark the spaces. If you take out the spaces before you paste it into the editor, the tags aren't added.

Hope this helps!

[ScottNicholson]

Which spaces, Julia? All of them?

Scott

[Gooberella]

Excellent! Thanks

Angel in a Fur Coat 

[Julia_C]

The spaces between the lines. Like this:

<a style="display:block; width:180px;" title="I'm a PubIt! Author! Buy my book on BN.com" rel="nofollow" href="http://search.barnesandnoble.com/books/product.aspx?EAN=XXXXXXXXXXXXX&cm_mmc=Pubit-_-Badge-_-Blog-_-XXXXXXXXXXXXX" target="_blank">

<p style="background:url(http://img1.imagesbn.com/pimages/pubit/resources/pubit_badge_custom.jpg) no-repeat; width:180px; height: 152px;"><img src="image-url-goes-here" width="70" border="0" style="margin: 23px 0 0 7px;" /></p>

</a>

[Lindsay_E]

Thank you for this excellent badge. Got it to work in one try!

Lindsay

Cel & Anna: A 22nd Century Love Story

www.celandanna.com

[OUBob]

I've tried this over and over until I'm blue in the face!  I cannot get this to post the badge.  I can get a link to my book but that's it.  I tried copying/pasting your link below and inserting my book number and thumbnail cover and I still get a link to my book and nothing else.  What am I doing wrong?

Thanks for your help.

OUBob

[kattyge]

I have been trying forever, but cannot get this to work.

I can only get the book cover to show, but not the publit background.

I've tried deleting spaces between the paragraphs and I've followed directions to a "T"

I've never had this much trouble with a widget before.

Not sure what I'm doing wrong

[hawkssr]

Am not succeeding at this

[davidd68]

How does this badge help me?

[ChrisHoward]

Removed spaces, added image URL and links to the book.  Works great. Thanks!

Chris

[MSM23]

Help!  I got the image to look fine by taking out all the extra spaces as shown in this thread.  Thanks for getting me that far.

However, when I try to click on the links, I just get a clicking sound and an exclamation point next to the little hand.  I assume that means it's not recognizing the URL embedded in the html.

Any ideas?  I have gone over it closely, matched it up to the samples in this thread, and even copy/pasted it into a browser and it worked.

Thanks in advance.

[BradMurgen]

The key is making sure to remove any space that might be added after each line break.

When I tried using this on Blogger, however, my cursor was not changing to the hand that denotes a clickable element, even though the link was there.  Maybe because the link is tied to the paragraph element as opposed to the background image?  Anyway, to get around this I just added some css style tags to the paragraph element to change the cursor to the hand you should have.

So I used the below.  The two types of cursor tags should cover all the major browsers.

<a style="display:block; width:180px;" title="I'm a PubIt! Author! Buy my book on BN.com" rel="nofollow" href="http://search.barnesandnoble.com/books/product.asp​x?EAN=XXXXXXXXXXXXX&cm_mmc=Pubit-_-Badge-_-Blog-_-XXXXXXXXXXXXX" target="_blank"><p style="background:url(http://img1.imagesbn.com/pimages/pubit/resources/p​ubit_badge_custom.jpg) no-repeat; width:180px; height:152px; cursor:hand; cursor: pointer;"><img src="image-url-goes-here" width="70" border="0" style="margin: 23px 0 0 7px;" /></p></a>

[Dee4DIT]

Hi Julia,

I just wanted to thank you for the badge you provided with the code and all. I was able to get it on the site I run for author D.I. Telbat and we are happy with it! Thanks a lot!

Dee

[TaylorDodge]

Thank you. I added this to two of my sites. I'm attempting to adjust the size on one of them but it seems an effective option. It's a great addition to the site too. Thank you for sharing your hard work w/ all of us