Thursday, August 16, 2012

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

When I first started my blog, I knew very little about HTML code and spent a lot of time goggle 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: 2px solid #666; padding: 10px;">
  • 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 compose 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 compose enter: 
<blockquote style="background-color: lightblue; border: 2px solid #666; padding: 10px;">

Switch back to Compose side and :
(insert pic here) XXXX
Your picture will appear above box, select right or left for the side you want 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 back ground:

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. 

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

<span style="background-color: white; color: #222222; 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.&nbsp;</span>

Ok, do you see the area highlighted in red? To remove the white background, all you need to do is go to the HTML side of compose 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 then one background color line..consider it a scavenger hunt!

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.  

Add this code from the HTML side of compose:

<br /><a href="URL from Goodreads of the book" target='_blank'><br /><img src="" /><br /></a><br />
Just want a link:
Add to Goodreads

Then use this code:
<a  href="copy and paste url from goodreads here "> 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=" ">The Sunday Post</a>

This is the code I use. The highlighted blue section is the URL to my newest Sunday Post and where I want to direct people to. I copy and paste it in between the parenthesis. Each week I update it with the newest post link. The text in pink is what appears on their comment box, after I hit enter. 

This code can be used to create a signature link to your blog. So each time you post a comment, you sign with your blog link: Kimba the Caffeinated Book Reviewer

<a  href=" ">Kimba the Caffeinated Book Reviewer</a>

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. 

Labels: , , ,


At July 17, 2013 at 8:59 PM , Anonymous Lindsay Healy said...

Thanks for all these tips Kimba, really kind of you to share them. I think I might try the one with the coloured box of text.

At July 17, 2013 at 9:04 PM , Anonymous megzmaddreadz said...

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 :)

At July 17, 2013 at 9:09 PM , Anonymous Paperback Princess said...

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 :(

At July 17, 2013 at 9:33 PM , Anonymous Tammy Sparks said...

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!!

At July 17, 2013 at 9:57 PM , Anonymous Bea @ Bea's Book Nook said...

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

At July 17, 2013 at 10:01 PM , Anonymous Debbie Haupt said...

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

At July 17, 2013 at 10:02 PM , Anonymous Bookluvrs Haven said...

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

At July 17, 2013 at 10:02 PM , Anonymous Bookluvrs Haven said...

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

At July 17, 2013 at 10:09 PM , Anonymous Tanya M said...

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!

At July 17, 2013 at 10:11 PM , Anonymous Michelle said...

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.

At July 17, 2013 at 10:11 PM , Anonymous Michelle said...

Good idea! I'm going to do that now. :) Thanks again

At July 17, 2013 at 10:54 PM , Anonymous Angelas Anxious Life said...

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

At July 17, 2013 at 11:08 PM , Anonymous kimbacaffeinate said...

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.

At July 17, 2013 at 11:11 PM , Anonymous Sarah Jordan said...

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

At July 17, 2013 at 11:30 PM , Anonymous Judith Cauthan said...

Thanks, very nice job!

At July 18, 2013 at 12:30 AM , Anonymous Expy said...

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

At July 18, 2013 at 12:36 AM , Anonymous Michelle@ Book Briefs said...

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! :)

At July 18, 2013 at 12:47 AM , Anonymous kimbacaffeinate said...

So glad you are enjoying my tips!

At July 18, 2013 at 1:09 AM , Anonymous Renae M. said...

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!

At July 18, 2013 at 1:34 AM , Anonymous kimbacaffeinate said...

:) glad I could help!

At July 18, 2013 at 1:34 AM , Anonymous Primrose said...

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

At July 18, 2013 at 1:48 AM , Anonymous kimbacaffeinate said...

welcome :)

At July 18, 2013 at 1:48 AM , Anonymous Brandy Corona said...

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!

At July 18, 2013 at 2:05 AM , Anonymous kimbacaffeinate said...

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.

At July 18, 2013 at 2:28 AM , Anonymous Heidi said...

Awesome post Kimba! Lots of good, useful tips! Thanks!

At July 18, 2013 at 2:30 AM , Anonymous kimbacaffeinate said...

You are welcome Kimberly I am sharing another tip on Sept 15th.

At July 18, 2013 at 2:30 AM , Anonymous Kimberly said...

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

At July 18, 2013 at 2:33 AM , Anonymous kimbacaffeinate said...

You are so welcome Liesel!


Post a Comment

This blog is an award free zone..however your comments are welcome, needed and loved! I try to respond to all comments via email. Tell me what you think...

Note: Only a member of this blog may post a comment.

Subscribe to Post Comments [Atom]

<< Home