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: 

XXXX

<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="http://i1196.photobucket.com/albums/aa411/kimbathecaffeinatedbookreviewer/goodreads-badge-add-plus_zpsc94610e9.png" /><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="http://www.caffeinatedbookreviewer.com/2012/06/sunday-post-sharing-news-and-books_10.html ">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="http://www.caffeinatedbookreviewer.com/ ">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 bam..you'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.