Customizing BookLikes Tutorial - Adding Bells and Whistles - Booklikes Challenge Widget

Reblogged from SilverThistle:


It's getting close to the end of the year but there's still time to challenge yourself to read a few more books before 2014 gets here.  If you've imported your bookshelves from somewhere else you may have already completed a challenge and you can use books already shelved as 'Read' for this.  Any books already on your 'read' shelf (or added to the shelf at a later date) are automatically added to your widget for you.


Lets add a Booklikes Challenge Widget to our sidebar to show everyone what massive bookworms we are :)


First things first...You'll have to set up your challenge and decide how many books you'd like to read for it.


The settings for this can be found in the wonderfully named Goodies section.



Once you're in the Goodies section you need to choose the third tab along - 'Reading Challenges.



Now it's a simple case of choosing how many books you'd like to read for your challenge and click start. 



Once you've set your reading challenge by clicking the green 'start' button, you can come back to this section at any time to update your goal or even stop your challenge altogether (but we won't be doing that, will we?)



Challenge accepted!  But we need a super new widget to show off our goals.  Right?  Right.


The widget section is in the Goodies menu too and clicking that will take you to the widget page.  Scroll down the page a bit until you see the Reading Challenge widget.  This will allow you to get the code for your widget.



On the next screen the code you need to copy is already highlighted (in blue) for you. All you need to do is right click on it and 'copy'.  If you misclick and it becomes unhighlighted, just right click on the code and choose 'select all' then copy it from there. 


Almost done.  We just need to paste our code into the sidebar section where we'd like the widget to show. 


Now, I've heard that depending on which operating system or maybe browser you use you may see a different version of the side menu in 'customize' mode, or at least have some bits missing from your menu so if that's the case you might have to get in touch with Booklike's support to find out what needs to be done to fix that for you.


Anyway, assuming it's all gone to plan so far, head to your customize menu to add your widget code.  The section you need to paste your copied code into is right between the bit to choose your blog title colour and the blog subtitle box.  Your code needs to be pasted into the 'widget area' box.



Remember to click save and you have a shiny new widget!!



I'm fussy though, and I'm not fond of the transparent background or the gap at the top.  If you have a transparent sidebar with a busy background (or you're fussy, like me) you might want to change the colour of your widget too, to make it more solid looking.   If you like it as it're all done here!!


If you want to tinker with it some more...


Lets do that!  We'll change the background colour of the widget and while we're at it we can move it all up a notch to fill that gap.  Don't worry though, it's just a copy/paste of a tiny bit of code into your CSS customize menu.


The code you will need is:


div center iframe {
    background-color: #FFFFFF;
    margin-top: -35px;

 As always I've bolded my colour code so you can change it into a colour you'd prefer.  FFFFFF is the hex code for white but you can pick another one here  -


The 'margin-top' number tells the widget to move a little bit upwards within it's section of the sidebar but if you're happy where your widget is placed you can take that bit out.  Just make sure to leave the } symbol at the end of your code.


Done, done, done.  All done.  Finito. 




Hope this helps someone :)



 More tutorials can be found here: TUTORIALS