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-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 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:
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=”<span>background-color: white; color: #222222; </span> 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 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!
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.
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 photobucket or flicker. 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>
Add to Goodreads
<a href=”url address to book on Goodreads”>Add to Goodreads</a>
These are easy to do and they all use the same html code:
<a href=”http://www.caffeinatedbookreviewer.com/”>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 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.