logo
Wrong email address or username
Wrong email address or username
Incorrect verification code
back to top
Search tags: mbdtutorials
Load new posts () and activity
Like Reblog Comment
show activity (+)
text 2017-05-24 04:48
How to: Shelves. Part 1 of possibly 100

A few Booklikers have struggles with shelves and it's something I've been wanting to do but have been overwhelmed just thinking about it.  

 

Linda Hilton, though, got me started as she had specific problems and questions that gave me a point of reference to begin.

 

This is by no means a comprehensive tutorial, it will be added to over time, and if you have specific issues with shelves, please post them in the How To BookLikes Group, (or in the comments below) and I or someone else will do our best to get them answered.

 

I'm going to presume everyone knows how to get to their BookLikes shelves.  By default, BookLikes displays your shelves as, well, shelves.  This is fine, but sometimes you need to extra power seeing your shelves in list view allows, so if you see shelves, please change the view to lists by clicking on this button:

 

 

Once you're in your list view - take a moment to check out the differences.... then click the "Settings" button on your toolbar:

 

 

This will take you to your shelf settings where you can choose things like your default view, default sort order, etc. etc.  But for the purposes of this tutorial we're focusing on the shelves themselves, so scroll a bit until you get to the list of shelves towards the bottom.

 

What is going to follow is a giant graphic of that section with notations about each function.  It just seemed the clearest way to explain all the different bits:

 

 

Notes:  

Exclusive statuses - these are shelves that allow you to mark a book without also setting it as Read, Planning to Read, or Currently Reading.   The best example of the usefulness of this is dictionaries .  Most of the time, you don't actually read, cover to cover, a dictionary.  Creating an exclusive shelf called Reference allows you to shelve it without having to mark your intention of reading it.   There are many other examples of these types of books, so you can create as many exclusive shelves as you'd like.  The checkbox for set as status allows you to move your shelves back and forth between exclusive and non-exclusive (in case you change your mind someday and decide to read the OED cover to cover).

 

click and drag - please note that older browsers and computers might struggle with this - if you think you're tech isn't a young whipper snapper any longer, use the Position numbers instead (although if you have a lot of shelves, yes, they're a pain).

 

I included the visible columns part of the page in the image above for two reasons.  1. It's where you can decide what to display in your list view, and 2. to highlight the multiple "Save Changes" buttons.  Now, I don't know for sure but rather to be safe than sorry, use the Save Changes button that applies to each section of the settings page.  So if you make changes to the table -visible columns section, use that save button.  If you make changes to the exclusive statuses, use that save button.

 

I suspect they're all the same but the sheer number of them make me concerned that they're not.  So, like I said, better safe than sorry.

 

Hopefully that will start us off.  Let me know.  ;-)

Like Reblog Comment
show activity (+)
text 2017-05-24 03:58
How to: Using BookLikes Widgets

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.  

Like Reblog Comment
show activity (+)
text 2017-05-22 03:40
How to: Adding BL linked book covers and/or text links into the body of your posts.

I think a lot of us know how to do this, but I think there are an equal number of BL'ers out there that don't know about this useful tip for putting BL-linked book covers and title/author links into the body of your posts.

 

It's easy, but it's not obvious at all.  It's also not the most stream-lined process, if you think about it, but it works really well and here's how to do it.

 

Create your post and use the "+" to Add Book, up at the top (I'm calling this the BookLikes book bar for the sake of this tutorial) to add a book from either the BookLikes database or your bookshelves.  Even though you don't necessarily want the book there, you need it there temporarily - you'll remove it later (unless you're me, in which case you'll forget every time and have to go back to remove it).

 

Once your book is added up in the BookLikes bar, hover your mouse over it and you'll notice three small buttons appear on top of the cover (depending on how busy the cover art is, one or all of these can be hard to spot).  I used a coverless book to make them easy to see:

 

 

 

When you're ready to insert your cover or your link, make sure the cursor is where you want them to go, and click on the appropriate little popup button.  They will instantly produce a cover or a link in your post, wherever the cursor is.

 

Once you're finished, use the 'x' to remove the book cover from your BookLikes bar, unless you want two cover images of the same book in your post.

 

Observations:

1.  You can do this for as many books as you'd like - just add them to the book bar first.  If you want to add more than 10, you'll have to remove them as you go, since 10 is the limit for books added to the BL book bar at any one time.

 

2.  You can edit the text title/author link.  When you hover over it with your mouse it'll look like it's going to take you to the link, but just ignore that and click in the part you want to edit: the cursor will move there and you can edit without losing the link.  I usually replace the '-' booklikes uses between the title and author with 'by' so it reads nicer.

 

3.  You can move both the text link and the cover around, but it's easier to move the text link. The text link moves the same way any other text can be moved: cut/paste or highlight/drag.  If you're not comfortable with html enough to feel like you can fix any errors, don't move the cover - just delete it from the post and then place it in its new spot from the BL book bar.  

 

4.  You can treat the cover link the same way you'd treat any other image:  click on it to highlight it and change its justification (left, right, center, justified) or change it's image attributes using the image button in the format bar.

 

That's all there is too it - when you're finished, just remember to use the 'x' to remove any covers from the BL bar that you don't want to keep in the finished post.

 

Happy posting.  :)

 

 

ETA:  Well, I did it again - posted and forgot to remove the cover from the book bar.  I am nothing if not consistent.  :P

 

Like Reblog Comment
show activity (+)
text 2017-05-21 08:53
How to: Customising fonts in an individual post.

I've been asked in the How To BookLikes group how to change the font size (or color) in an individual post, as opposed to across your entire blog.  If you have any familiarity with HTML, this is actually easy to do, but these instructions will assume nothing.

 

Please note:  I cannot recreate the 'greater than' or 'less than' symbols in this post, so whenever I'm talking about the html tags below, please remember that they should look like the screenshots, NOT like I type them out.

 

Also, for the sake of keeping this simple, I'm only discussing the 'P' tag and font size and color.  

 

Step 1.  Create a post.   ;)

 

Step 2. Once you've written the body of your post, or at a minimum, the text you want to format, look at the tool bar across the post body and specifically that last button on the right:

 

 

When you click on this button a window is going to pop up in front of your post and show you what it looks like under its kilt, so to speak.  Raw code baby!  But really, not very raw - mostly, if your unfamiliar with html, a lot of brackets around what will be recognisable as your post.

 

 

Look for the text you want to change.  For this example, I'm looking for the next two lines:

 

Big font

 

Small font

  

Which looks like this when it's naked:

 

 

To change the format, we need to add information to the "p" tag.  We'll start with the line that says Big Font.  We're going to change it from:

so that the 'p' tag says 

p style="font-size: 26px;"    (make sure you include the brackets though)  which gives us:

 

Big font

 

and if we change it to, say:  p style="font-size: 9px;"  we'll get:

 

Small font

 

A few notes about size:

'px' = pixels.  You can also use:

'em' = well, em.  It's used by developers, mostly, but 1 em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

 

If you prefer, you can use relative values:

xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size
smaller Sets the font-size to a smaller size than the default font size
larger Sets the font-size to a larger size than the default font size

 

when using relative sizes the tag will look similar to this:  p style="font-size: x-large;"

 

you can also set the size as a percentage of the default font size:

p style="font-size: 200%;" will get you this:

 

200% Font Size

 

 

If I go back to the "source" button my code now looks like this:

 

 

Changing the color:

(Please note:  this tag uses the US spelling of color.  The UK spelling might be recognised by some browsers, but for predictable results, if you're outside the US, make sure you buck your spell checker and use the Yank spelling variation.)

 

Changing the color is the same process, just different wording.  So, if I want blue text the easy, peasy way to do that is to hit the source button, look for the text you want to be blue and change the 'p' tag so it says:

p style="color: blue;"   this gives me:

a blue font

 

Easy right?  Now some people might think this is limiting, only using color names.  It is, but not nearly so much as you'd think.  There are a lot of predefined colours such as:

Slate Blue

Indian Red

Olive

 

Check out this list of all the pre-defined colours currently supported by all browsers.

 

But if you want total control, you can have that.  For those that want to get down to the nitty gritty, the following are also supported:

 

Hexadecimal values:  these are the web codes for each color on the spectrum and they are a combination of 6 letters and/or numbers preceded by a hash tag.  So they look like this:

#000000  (black) or

#FFFFFF (white) or

#df2020 (red)

Hex will look like this:  p style="color: #df2020;"

 

RGB values:  red, blue, green

RGBA values:  same as RGB, but you can add a transparency value

 

RGB will look like this:  p style="color: rgb(0, 255, 0);"    (this is green)

RGBA values will look like this:  p style="color: rgba(0, 0, 255, 0.3);"   (this is blue with 30% opacity)

 

HSL and HSLA values are also supported, but that's nerdy even by my standards, so rather than bore you with it, you can read more about it here.

 

Here's what that code looks like:

 

As a grand finale, here's how you'd make your fonts both custom sized and colourful:

 

Big, Purple Font!!

 

 

A VERY IMPORTANT NOTE!!!

Make sure if you do this that you NEVER forget the semi-colon.  If you don't see the results you expect, check your syntax very carefully and make sure that semi-colon is at the end.  IF YOU USE MULTIPLE VALUES - color and size, make sure there is a semi-colon after each:  one after the size and one after the color, as in the screenshot above.

 

Have fun and remember - people have to read your posts, hopefully without eyestrain, so keep it classy!  ;-)

Like Reblog Comment
show activity (+)
text 2016-09-27 08:06
Customized blog pages: Changing the colors of the tiny like/comment/reblog icons at the bottom of your blog posts.

Disclaimer: This one is not easy - well there's an easy way and there's a hard way.  I don't recommend the hard way unless you really want these icons changed.

 

If you use a custom background that's dark, those tiny icons at the bottom of each post indicating how many likes, comments and reblogs a post has are likely invisible.  Here's how to make them visible. 

 

Heads up: this is gonna be a LONG post.  I'm taking a shortcut here and there by tagging previous posts, but it's still an involved process.

 

The Easy Way:

 

This is going to put a semi-transparent box behind the reblog / comments / likes icons that runs the width of the post, but is separate.  It's arguably not the most attractive option but it is the option that is the easiest.

 

1. Go to Settings / Blog / Customise / Edit HTML.

 

2. Using the instructions for  Customized blog pages: how to create a background for comments and how to change the font color of side links - follow steps #1 and #2.  

 

Note: If you've done that tutorial before and want this background to be different, follow those directions, but change the name of the style you're creating from .commentsbg to .tinyicons or whatever you'd like.  It's just the same general steps.

 

3.  Now search for the section of the HTML that looks like this:

 

 

Don't count on your line numbers being the same as mine, but they should be in the same ballpark.  The string/tag that is in line 301 above - put that exact same line in your HTML, just below where it says div class = "post-info".

 

Note:  If you've used a different name for your style in Step 2, make sure you use that name instead of "commentsbg".

 

When you type that div tag in, the system is going to automagically create an end tag right next to it.  Either delete that end tag or cut it - you need to move it down to where I have mine, after that last % endif %.  In the screenshot, it's at line 314; yours may vary.

 

 

4.  Click the Save button.

 

Tiny icons visible.

 

 

The Hard Way

 

This involves editing or re-creating those tiny icons.  They're transparent, which makes editing their color, frankly, something of a pain in the ass (one word: anti-aliasing).  I'm not going to get into how to do that here; I'm just going to take it as read that if you've come this far and want to keep going you either already know how to do it or are willing to figure it out.  This is, in fact, the whole reason why this is The Hard Way.

 

1.  Once you've re-created or edited the tiny icons to your satisfaction, create a new post* in BookLikes - trust me on this.  Make it a text post; call it whatever you want, doesn't matter.  (I titled mine "Blog image stuff" so I could find it.)  In the body of the post, upload your new image.

 

*(or, if you've already done this because you've used the Customized blog pages: Changing the Follower/Following 'buttons' at the top of the page. you can just edit that post and stick the images in there.)

 

2. Tick the back to edit after saving changes box, then click "Save as Draft" (alternatively, you can save it with a really old post date so people don't see random weird posts from you in their newsfeed).  

 

3.  After the post saves and reloads the edit post page, click "Preview".  This will show you the post in a new tab. 

 

4. From that preview, right click on one of your new icon images (the reblog one would be the best to start with, since it comes first in Step 5) and either:

A. Choose Copy Image Address, or

B. Choose Open Image in New Tab, then click on that tab and copy the URL in the address box.

 

5. From the Dashboard menu: Settings/Blog/Customise/Edit HTML.  Once you're in the Edit HTML split-window, look for the section of code that starts like this:

 

6. In line 302 on the screenshot, you need to replace the part of img class="set-middle" that starts with {{ blog.templateURL.  Highlight everything in that line between the quotes (").  Start with {{ and highlight through .png. Once it's highlighted, paste in that URL you copied in step 4.

 

You need to repeat Step 4 and Step 6 two more times:

Once for the likes icon: copy the URL for your likes icon then paste it in the img tag that comes directly after {% if post.likeCount %} - making sure to paste it in carefully between the quotes like you did the first time.

 

Finally for the comments icon: copy the URL for your comments icon then paste it in the img tag that comes directly after

{% if post.commentCount and blog.commentsBooklikes %} - making sure to paste it in carefully between the quotes like you did the first time.

 

This is what mine looked like when I was done (Note: I did not change my reblog icon because it's a pain and nobody reblogs my posts anyway.)

 

 

 

7. Click Save

 

You can view your blog page and check out how those new/edited icons look, but below are the instructions for changing the color of the little numbers next to them.

 

Changing the tiny numbers' color

This is done in the Custom CSS box under Dashboard/Settings/Blog/Customise, at the bottom of the left side of the Customise Theme area.

 

1.  In the Custom CSS input box, scroll to the bottom of any text that might be there, add a blank line or two, and paste the following:

 

div.post-info {
padding-top: 20px;
font-size: 10px;
font-family: "Helvetica Neue", Arial, Tahoma, Verdana, sans-serif;
font-weight: bold;
color: #FFFFFF;
}

 

If you leave that as-is, your text will be white.  If you want another color, change the hex code (FFFFFF) on this line:

 

color: #FFFFFF;

 

to the hex code that represents the color you want. See HTML Color Picker - W3Schools for a list of hex codes/colors.  Make sure the ; (semi-colon) stays at the end of the line.

 

Click Save and now you can see your reblogs, likes and comments.

 

Party on.

More posts
Your Dashboard view:
Need help?