Two Easy Blog Hacks — Image Tags

Here are two helpful and easy snippets of code I use to make my blog pretty (and functional)!

An Image Aligned to the Side of the Post with a Border

Sometimes I like to stick an image in the middle of a post and wrap the text around it, like this:

It looks nice and gives the post a magazine or newspaper feel. Just a few added bits of HTML and CSS.

Put the image tag in like so, or upload the image and insert it into the blog post on your blog dashboard. Make sure you put it next to the beginning of a paragraph, next to the first word of that paragraph.

<img src="http://imageuploadedhere.com" />

After that last set of quotation marks, which hold the URL to your image, and before the backslash, add the alignment tag:

align="left"

This juts the image up against the left side of the post. You also put it on the right side, that part is up to you.

Now for putting a border next to it, so the words won’t be stuck up against it, looking a little crowded, like this:

The words are stuck up against the edge of the image. This is not very attractive, despite the fact that a man is fighting a bear over a piece of food and it’s actually pretty funny. Don’t worry, I’m about to show you how to fix it and I’m sure the man and the bear resolved this issue and learned how to share.

First, add this tag the same way you did with the align tag:

class="image-border"

Now you just need to tell it what to look like with some CSS code. Add this CSS code to your blog theme’s style sheet (the file with the .CSS extension):

.image-border {
border-right: 10px solid #ffffff;
}

Be sure to save the .CSS file.

This gives you a 10-pixel-wide padding on the right side of the image. If your image is aligned on the right, change that to border-left. You can also adjust the amount of pixels for a thicker or thinner border, or change the color #ffffff to match the background of your blog.

Your full image tag will look like this:

<img src="http://imageuploadedhere.com" align="left" class="image-border" />

Add Hover Text to an Image

Hover text is useful when you want to save space on a page, but still describe an image. For example, not everyone knows what this is:

So if you have your icon on your sidebar and you want people to know what it is or what to do with it, just add this to the image HTML:

title="Add your description or instructions here."

Hover over the RSS icon above to see.

Linked and given a hover tag, the image code looks like this:

<a href="http://theurl.com"><img src="http://imageuploadedhere.com" title="Add your description or instructions here." /></a>

Figuring out Your Odd Little Blog

Maybe we have some things in common.

Maybe you started out blogging with a carefree, hobbyist approach in your spare time. Maybe a few years or months down the line, you decided to get serious about it. You get the happy feelings when hit “Publish”, because you just wrote something awesome and you know your readers are gonna love it. You love writing and having other people read your writing.

This relationship is getting serious and you want to take it to the next level.

So, you start taking steps toward making this into your lucrative hobby, or a main source of income. You’re excited about writing and sharing your passion with the world.

Inevitably, doubt might start to creep in. This is actually something you will have to battle more in the future too, so get used to it. You will have the good as well as the bad.

One of the biggest issues I ran into was how I didn’t think I would get anywhere without a popular niche. I talked about this in my post: The Freelance Writer/Blogger and the Oddball Niche, starring me. The comments after the post turned out to be extremely helpful.

I’ve since decided not to start a new blog just to focus on one niche. AGB has been around for a while now, (the original database from a previous domain in August 2009, and I bought this one in November of that year) and it actually does have a running theme, even way back then when I wasn’t trying to.

My interests mixed together into a unique theme that happened naturally, and that’s how it should be.

Okay, I’m going to sort this out a little better! If you’re confused or doubtful, here are somethings you can do:

~ Write a description of your blog, a short version and a longer version. You can use the long one for your about page and the short version for a little bio on other websites. I recently had to write a good short version for Passion Fruit Ads:

An art & literary blog by a budding author/freelance copywriter/blogger/mom who also loves anything weird, pretty and/or tasty. You’ll find heart and substance as well as materialistic and humorous fun.

This description fits my blog and sounds interesting to moms, writers, artists AND people who also like weird, pretty things and food. The heart, substance, materialism and humor are things that tie it all together and basically describe my voice and overall theme as a blogger.

Even if your description seems very broad, you will still find your audience with people who can relate to you.

~ Find your voice instead of trying to nail down a niche. Ultimately, your writing style is what sets you apart. The style of graphics you include, the way you use sentence fragments or run-on sentences (not entirely bad if you’re blogging), etc, should all reflect your natural personality. Basically, be yourself as much as possible.

~ Be patient. If you’ve decided not to have a niche blog and you want to be successful (have your cake and eat it too), you will need to be extra patient. It takes time to build up a strong legion of readers no matter what kind of blog you have, but if you’re blazing your own trail, it will take even longer.

You also still have to write awesome/interesting/helpful posts, so make sure you do that. Write/post stuff you would want to read or look at.

Healthy Skepticism vs. Cynicism

“Cynicism is not skepticism. Cynics intend to project their internal pain onto others by seeking to destroy all that is possible and good. Skeptics seeks to understand, even when they have doubts, fears, concerns and apprehensions. Do what you wish, but if you’re a cynic don’t expect to last long on this page. Healthy skeptics, I always look forward to your contributions and questions.” — Mike Klingler

Wizard and Dragons Light Giveaway

For the first ever giveaway not through any shop or anything (just me!), I’m giving away this firey-wizard-battling-dragons-statue/night light. Batteries included.

I’m trying to clear out some old stuff and I was going to try to sell it on ebay, but the cape that was billowing from the wizard’s back broke off (see bottom pic). The part where the cape connected was small compared to the cape itself and what it was attached to, and it still looks cool without the cape, so I left it off. I’ll send the cape along with it, in case you want to try to reattach it later.

The camera on my phone isn’t the best, so it was hard to capture it lit up in the dark. It’s powered by 3 AA batteries, which are brand new and going along with it.

You can enter from today, Saturday July 14th to Midnight on Friday July 20th. I’ll announce the randomly chosen winner on Saturday the 21st. Use Rafflecopter below to enter!

a Rafflecopter giveaway