How The Heck Did You Do That?? Blogger Tips and Tricks #1

August 16th, 2012 Kimberly Blogger Tips and Tricks 33 Comments

16th Aug

How the Heck Did You Do That?!?
When I first started my blog, I knew very little about HTML code and spent a lot of time Google searching and asking fellow bloggers, “How the heck did you do that??” I thought I’d pass a little of what I learned on to you:

1. That little-colored box:

Ever visit a blog where they use this type of box to showcase a book’s synopsis or an awesome quote. It’s very simple to do 🙂 Just follow the steps listed below

  • use the following code:

<blockquote style=”background-color: lightblue; border-radius: 15px; #666; padding: 10px;”>Your Text Here</blockquote>

  • you can change the color to whatever you want, simply by changing the html color number and color. You can get the HTML Number codes here: codes
  • replace the orange number with the color code you want for a border and the color name with the one you would like
  • copy and paste the code above into your post, be sure you are using html. For example on blogger switch from composing to html. (located on top left side of new post page) You can switch back once you are done.

On my posts, you will notice I use the box to highlight the synopsis and book cover. To make your post look like mine follow these steps.
Using Html side of composing enter:
XXXX (paste quote box HTML here)

Switch back to Compose side and :
( click insert image here before XXXX) XXXX
Your picture will appear above box, select right or left for the side you want a cover to appear on.
Highlight XXXX and type title of book and additional desired info.
Next, click on box and type/paste your synopsis into it
2.  Copy/pasting text into/ onto colored background:
Has this ever happen to you? You copy and paste a synopsis or copy and paste from word, only to find the words have a white background. I see it on blogs all the time. It’s easy to fix and I will show you how.

First let me show you what this looks like on the HTML side of Compose:

<span style=”&lt;span&gt;background-color: white; color: #222222; &lt;/span&gt; font-family: arial, sans-serif; font-size: 13px;”>Has this every happen to you? You copy and paste a synopsis or copy and paste from word, only to find the words have a white background. I see it on blogs all the time. It’s easy to fix and I will show you how. </span>

Ok, do you see the area that is bold? To remove the white background, all you need to do is go to the HTML side of composing and removed all the lines that say background-color: white; color: #222222;. Yes, it is that easy, just highlight them and click Delete. For a simple synopsis, there will probably be only one, longer text may have more than one background color line..consider it a scavenger hunt!

IMPORTANT!!  I noticed when copying code from my site the quotes are fancy and do not work well in code. Please replace all of the quotes from the code using your keyboard. 

3.  Add to Goodreads Box or Button: 

Adding a Goodreads Button to your post is a great idea and your followers will love the convenience of it. Authors and publishers appreciate it as well.

First, save Goodreads button image and upload to flicker ot your self hosted blog. Size to desired look then copy image url and add to code below:

Add this code from the HTML side of compose:

<a href=”goodreads book URL” target=’_blank’><br /><img src=”image url for goodreads button ” </a>

Just want a link:
Then use this code:
Add to Goodreads

<a href=”url address to book on Goodreads”>Add to Goodreads</a>

4. You comment on a blog and notice people have links that look pretty like this when they comment:   

Kimba the Caffeinated Book Reviewer
My WoW
The Sunday Post

These are easy to do and they all use the same html code:

<a  href=””>Caffeinated Book Reviewer</a>

the first part is where you put your link between the ” ” and between the > < you place what you want it to say eg. My WoW, Sunday Post, Caffeinated Book Reviewer

It’s the same code and it can be used to create any type of link you want. So after you type your comment, you simply paste this code into their comment box and’ve created a link ! Easy right!

I hope you find these tips useful. I know they have helped me. Create a cheat sheet in MS Word or anywhere you can easily find it. I tried to explain these in simple terms to make them easy to follow, but if you are having problems, please don’t hesitate to tweet, email me or message me on facebook.

Copyright (c) 2011-2013 Caffeinated Book Reviewer
Photo of kimbacaffeinate
About Kimberly
Kimberly is a coffee loving book addict who reads and listens to fictional stories in all genres. Whovian, Ravenclaw, Howler and proud Nonna. She owns and manages Caffeinated PR. The coffee is always on and she is ready to chat. Twitter | Facebook | Instagram

33 Responses to “How The Heck Did You Do That?? Blogger Tips and Tricks #1”

  1. peggy

    This post just answered so many questions I had! I think I will print this out and laminate! Thank you so much for sharing your knowledge.

    • kimbacaffeinate

      Glad you found it helpful, and remember to retype the “” if you copy paste 🙂

  2. R.V. Doon

    Hey Kimba,

    You have a lovely blog and we have books and caffeine in common. I hope this comment gets through after so long. I’m a self published author, and I’ve been trying to get the Good Reads button on my blog’s book pages. Yours are the only instructions I’ve found, but they’re not working for me.

    I end up with a little picture and not the badge. Plus the tiny picture I get doesn’t work. I right clicked on the button and put it’s picture in Photobucket. I copy and paste the book’s url, and the photobucket url, and then I put in the third line of code as you’ve written it. I pasted this on my WP blog post and the badge doesn’t come up.

    I see you’re still using it and it’s working. I can’t figure out what I’m doing wrong. I’m not a genius on computers or coding.

    I’ve copied your code with the exception of my photobucket and book url. Any suggestions? I’d love to use it but I’ve spent way too much time trying with no results. Since you’re on WP am I missing a step? So far I’ve burned up 5 cups of coffee, and its after midnight. Any help would be appreciated. Thank you.

    • kimbacaffeinate

      I would try copying my button image and making your own photobucket button and pasting yours were mine is. Then just paste book url in.

    • kimbacaffeinate

      I sent you an email with my code, I hope it helps, let me know 🙂

  3. kimbacaffeinate

    the word light blue simply states the color. So add color # by replacing my color # and type name of color where mine says light blue.

  4. Brandy Corona

    Thank you so much! I’m such a newb when it comes to HTML! Thanks for making things easy! I’ve been wondering about the box for awhile!

  5. Primrose

    Oooh I’ve been trying to figure this out for a long time. Thanks!

  6. Kimberly

    I definitely was about to ask this on one of your blog posts 🙂 Thanks for sharing!

  7. Renae M.

    What a great idea to post this! I get a lot of questions on things like this, but I never make the effort to actually do what you’ve done. Thanks, Kimba!

  8. Michelle

    This is such a great post idea and I love the title of it. I have bookmarked it in my blogger tips email folder and I know I will be saving the future ones as well.

    Hope you are having a great week kimba! 🙂

  9. Expy

    This trick has eluded me for months. Finally, I know now! Thank you for the blogpost!

  10. Sarah Jordan

    Kimba, thank you so much for sharing your knowledge. I have added the Goodreads button to my blog and would never have figured that out without your generous help.!

    Sarah’s Book Shelves

  11. kimbacaffeinate

    In html I do :
    Blockquote code

    Then I switch to compose and before the xxxxx I add photo then select left or right. I then write write title where xxxxx is.

  12. Angelas Anxious Life

    OMG! I have been wondering about the goodreads button for a while now!

  13. Michelle

    Good idea! I’m going to do that now. 🙂 Thanks again

  14. Michelle

    Thanks! I only know HTML when I don’t need it…and every time something goes wonky in a post everything flies out of my mind and I’m clueless again. I’m so tempted to bookmark this post now, lol.

  15. Tanya M

    brilliant, thanks for sharing. I just had figured out the link in a comment but I didn’t know how to put the box around the synopsis. I love that!

  16. Bookluvrs Haven

    And I just tried out the link tip on my comment. Awww… it looks soooo beautiful. LOL

  17. Bookluvrs Haven

    Erin and I have spent countless minutes, hours, days trying to figure out the synopsis box and overlapping book cover look. Thank you so much for sharing this information. You have no idea how happy we are to finally find out how to incorporate this look on our review posts.

    – Lily @
    Bookluvrs Haven

  18. Debbie Haupt

    Kimba, I’m so tech-addled that I often just admire others and accept that mine will never look like others, the hints are great even though still a bit greek to me, but I am going to try one or two or three 🙂
    thank you

  19. Bea

    I still have trouble with html but you actually make this sound easy! Thanks.

  20. Tammy Sparks

    Wow, I’m so excited about the Goodreads button code! I’ve been looking all over Goodreads for that button but couldn’t find it. I’m especially happy that it works in my WordPress blog, because a lot of stuff you can do on Blogger can’t be done on WordPress, which is very frustrating. Thanks so much for these tips Kimba!!

  21. Paperback Princess

    Kimba how do you have it so the block quote for the synopsis is kind of attached to the cover. Your code is working but it’s always going under the book cover 🙁 It shows fine on my Compose page but when I preview it shows that it’s sitting under and not next to 🙁

  22. megzmaddreadz

    Thanks so much!! I’ve always wanted to be able to put something like that around a synopsis for a book and now I can 🙂 Really appreciate it 🙂