I want to display my Goodreads giveaway in my sidebar

• 

  jenanita01 · Member · Jan 16, 2015 at 3:19 pm

  • Copy link
  • Add topic to favorites

  I have cut and pasted the code into a widget for my giveaway, but its not working. I am obviously picking the wrong widget?

  The blog I need help with is: (visible only to logged in users)

• 

  lizthefair · Member · Jan 16, 2015 at 4:19 pm

  • Copy link

  Widget code from other sites often doesn’t work exactly as it’s presented on WordPress.com because some of the code used is not allowed on WordPress.com sites. You can read more about that here:

  Code

  That having been said, we can often come up with good workarounds, so if you would share the widget code here, inside the code bracket if you can, I can help you figure out how to best proceed.

• 

  jenanita01 · Member · Jan 17, 2015 at 11:15 am

  • Copy link

  <div id=”goodreadsGiveawayWidget122243″><!– Show static html as a placeholder in case js is not enabled –>

  <style>
  .goodreadsGiveawayWidget { color: #555; font-family: georgia, serif; font-weight: normal; text-align: left; font-size: 14px;
  font-style: normal; background: white; }
  .goodreadsGiveawayWidget img { padding: 0 !important; margin: 0 !important; }
  .goodreadsGiveawayWidget a { padding: 0 !important; margin: 0; color: #660; text-decoration: none; }
  .goodreadsGiveawayWidget a:visted { color: #660; text-decoration: none; }
  .goodreadsGiveawayWidget a:hover { color: #660; text-decoration: underline !important; }
  .goodreadsGiveawayWidget p { margin: 0 0 .5em !important; padding: 0; }
  .goodreadsGiveawayWidgetEnterLink { display: block; width: 150px; margin: 10px auto 0 !important; padding: 0px 5px !important;
  text-align: center; line-height: 1.8em; color: #222; font-size: 14px; font-weight: bold;
  border: 1px solid #6A6454; border-radius: 5px; font-family:”Helvetica Neue”, Helvetica, Arial, sans-serif;
  background-image:url(https://www.goodreads.com/images/layout/gr_button4.gif); background-repeat: repeat-x; background-color:#BBB596;
  outline: 0; white-space: nowrap;
  }
  .goodreadsGiveawayWidgetEnterLink:hover { background-image:url(https://www.goodreads.com/images/layout/gr_button4_hover.gif);
  color: black; text-decoration: none; cursor: pointer;
  }
  </style>

  Goodreads Book Giveaway
  </h2>

  <div style=”float: left;”>
  <img alt=”The Ninth Life by Jaye Marie” src=”https://d.gr-assets.com/books/1421415034l/24345191.jpg” title=”The Ninth Life by Jaye Marie” width=”100″ />
  </div>

  <div style=”margin: 0 0 0 110px !important; padding: 0 0 0 0 !important;”>
  <h3 style=”margin: 0; padding: 0; font-size: 16px; line-height: 20px; font-weight: normal; font-style: normal;”>
  The Ninth Life
  </h3>
  <h4 style=”margin: 0 0 10px; padding: 0; font-style: normal; font-weight: normal;”>
  by Jaye Marie
  </h4>

  <div class=”giveaway_details”>
  <p>
  Giveaway ends January 23, 2015.
  </p>
  <p>
  See the giveaway details
  at Goodreads.
  </p>
  </div>
  </div>
  <div style=”clear: both;”></div>

  Enter to win

  </div>
  </div><script src=”https://www.goodreads.com/giveaway/widget/122243″ type=”text/javascript” charset=”utf-8″></script>

• 

  lizthefair · Member · Jan 17, 2015 at 1:21 pm

  • Copy link

  Thanks!

  Instead of using the image widget, paste the following updated code into a text widget.

  <div id="goodreadsGiveawayWidget122243"><!-- Show static html as a placeholder in case js is not enabled -->
  <div class="goodreadsGiveawayWidget" style="max-width:350px;margin:10px auto;padding:10px 15px;border:2px solid #EBE8D5;border-radius:10px;color:#555;font-family:georgia, serif;font-weight:normal;text-align:left;font-size:14px;font-style:normal;background:white;">
  
  <h2 style="margin:0 0 10px!important;padding:0!important;font-style:italic;font-size:20px;line-height:20px;font-weight:normal;text-align:center;color:#555;">
  Goodreads Book Giveaway
  </h2>
  <img alt="The Ninth Life by Jaye Marie" src="https://jayemarie01.files.wordpress.com/2014/12/ninth-life-copy-e1417879001632.jpg" title="The Ninth Life by Jaye Marie" width="100" align="left" />
  <div style="margin:0 0 0 110px !important;padding:0!important;">
  <h3 style="margin:0;padding:0;font-size:16px;line-height:20px;font-weight:normal;font-style:normal;display:inline;">
  The Ninth Life
  </h3>
  <h4 style="margin:0 0 10px;padding:0;font-style:normal;font-weight:normal;display:inline;">
  by Jaye Marie
  </h4>
  <div class="giveaway_details">
  <p>
  Giveaway ends January 23, 2015.
  </p>
  <p>
  See the giveaway details
  at Goodreads.
  </p>
  </div>
  </div>

  You’ll still need a link to your actual giveaway page, so if you could give me that as well I can incorporate it into the updated code.

  Let me know if you run into any trouble with that!