Moonlight Reader's most excellent post regarding a reader's personal literary canon got us all thinking about the books that mean the most to us and/or define us as people and readers.
As I've been in a scripting mind space lately, I additionally started thinking about whether or not a BLer could display their personal canon on their blog pages, which is the basis for this tutorial. But, this applies to anyone on BookLikes who wants to make widgets for the BL blog OR their personal blog; it just so happens that I'm customising mine for a book canon.
The following widgets are available, and they all more or less follow the same guidelines below:
Follow button - (Follow my booklikes blog graphic)
Shelf widget - this is the one this tutorial is specific to; you can make more than one of these too, if you'd like to display multiple shelves.
Reading challenge widget - this gives you the progress bar/# of books box on your blog
Giveaway widget - what it says: a box on your blog page announcing a book giveaway
Reading in Progress - Customisable to one book you're currently reading, so would need manual updating; gives you a progress bar like what you see on your dashboard.
Quote widget - this will pull the last Quote post you created (it must be a quote post - not a text post) and put it in a box on the side of your blog page
Discussions Widget - pulls the last user-defined-number of posts you've made in discussion groups; updated automatically.
My Latest Posts Widget - same as above: you define the number, and it pulls that number of latest posts you've made and makes teasers for them.
My Profile Widget - Allows your visitors to see a bit of data on you - data you can turn on or off. Includes Country/# of Followers/Following/# of shelves/books reviewed, etc.
Reading List Widget - Customisable to show your most recently created lists (if any)
Author Widget - I'm guessing this is most useful for authors, but also fun for diehard fans of certain authors. Search out your author name, name the list, define # of books to display, etc.
As I said earlier, they all follow more or less the same instructions - each is customisable (or not) in its own way, but all require you to go to the same page, get some code and paste it in your blog and that's what these instructions cover. So, to begin:
Go to your Dashboard menu (the green one) and choose "Goodies".
From the Goodies page, select the "widgets" tab:
The widgets page is going to list all the widgets I've listed above and their customisable fields. Whatever widget you want to make is going to be made on this page. So for the the shelf widget, scroll (if you need to), down just a bit - it's the second one on the page: Shelf Widget
As you can see, the customisable fields are all pretty self-explanatory. Play around a bit if you'd like; the preview updates as you make changes, so you can see what the finished product will look like. Once you're happy with the look, press the "Get Code" button directly under the preview. You'll get something that looks like this (but not exactly - because customisation):
If yours isn't highlighted automatically, highlight all the text in this box - make sure you get ALL of it, and use your Edit - Copy function to copy it.
From here you need to leave this page and go to the Settings page. Again this also applies to all the other widgets. So, from the green dashboard menu, choose Settings:
On the settings page, you want to choose the "Blog" tab from the line of tabs that runs along the top of the page:
Once you're on the blog settings page, you have to scroll WAY down the page.
Further down...
A little bit further...
Until you see "Theme: Customise"
Click the "customize" button, and you'll be taken to a split page: the first 25% will be a black bar running down the left hand side, and the other 75% will be a sort-of preview of your blog page (I say sort of because it's propagated with fake posts). What we care about is what is in that black bar, and it's almost at the very bottom of it, so more scrolling...
You're looking for the box titled "Widgets area".
Now, stay with me, this can sound complicated but it isn't.
This box might be empty or it might not be. If you've used widgets before, there's going to be other text in this box. If this is your first time, the box is likely empty.
Care must be taken about where you paste your new widget code. If you paste it in the middle of stuff that's already there, you'll break your widgets and probably get some crazy stuff showing up on your blog page.
Each widget's code begins with a bracket ( < ) and the word 'iframe' and ends with 'iframe' and a ( > ) bracket. Just make sure anything you paste into this box is before or after an 'iframe' tag text block.
Where you paste it determines where it appears on your blog. If you paste it beneath your Reading Challenge widget, for example, then it's going to appear beneath your Reading Challenge box on your blog page.
Most of the blocks of widget code will have a title= in them and this is the easiest way of identifying which block of code creates which widget. So in the screenshot to the left, you can see "title=My Profile" (it runs across two lines) - that's my profile widget. If I paste my shelf widget code above that, it will appear above my profile on my blog page.
So, place your cursor in the box and use the arrows on your keyboard (it's the easiest, if tedious, way to navigate the small little box; you can expand the box by pulling down its lower right corner, but it can be fiddly). Once you have your curser in a clear space, paste the code in for your shelf widget.
If getting this right worries you - the safest thing to do is either place your cursor at the very top of the box, or at the very, very bottom and paste the code there. Both ways will ensure that you don't paste into existing code.
Once you've done that, click the "Save" button located at the top of the black bar. The image below shows you what - generally - the shelf code looks like in place (yours will be different because it's your custom settings) and where the "Save" button is.
Once you've save it - you're done. Go to your BookLikes blog page and you should find it there, along the left or right side, depending on which template you're using. This is mine - or, maybe not. I think I've hit BookLikes limit on image sizes per post. But, you can see your own once you try it. :)
Happy widgeting - please let me know if you have any questions in the comments below, or in the How To BookLikes group.
One last note: This code should also work on your own outside-of-BookLikes blogs but I cannot comment on how easy or difficult it is to do this. Each blog platform varies, but if you're interested, check out your blog platform's documentation for how and where to place this code to see your BookLikes shelves/widgets on your personal blog.