Having Photo Fun With Blogging…

Writing HandOkay – sometimes I just like to have fun. In my last post, I had a simple photo of a hand holding a pencil… let’s take a look at it… you see just an ordinary image that I picked up off the Internet… but before I used it, I loaded up my trusty Paint Shop Pro … an old version 7 that I bought many years ago and still does everything I need.

First I resized the graphic to what I wanted… something reasonable in terms of this website – not too big or too small. Then I ‘cropped’ it to exactly what I wanted… then saved the new graphic with the name ‘writing_hand1.gif’ ┬áNext, I rotated the image by 180 degrees, then ‘flipped’ it. I then saved that graphic with the same name, but the number 2 after it.

Now, in HTML source mode, I put the following code:

<img class=”alignright”┬ástyle=”margin: 3px;” title=”Writing Hand” onmouseover=”this.src=’http://benholmesonline.com/images/writing_hand2.gif’;” onmouseout=”this.src=’http://benholmesonline.com/images/writing_hand1.gif’;” alt=”Writing Hand” src=”http://benholmesonline.com/images/writing_hand1.gif” width=”252″ height=”192″ />

You can copy this, and simply change the following:

  • Website location & name of graphic
  • Alt Tag
  • Width & Height
  • Alignment Class – Alignright, Alignleft, Aligncenter

I use a 3 pixel margin both vertically and horizontally so my text doesn’t run right up against the graphic.

Now, for those of you who haven’t already figured out what I just did – move your mouse cursor over the image… then remove it. You’ll see an interesting effect. This took me just minutes to create, yet it will amuse many visitors, and perhaps lower my bounce rate as people search my site for other examples of just nonsensical graphics.

Camp RadioWith any decent graphics program, it’s quite easy to do… and rather fun to come up with new ideas. Other things you can do is change colors, or add a ‘starburst’ lighting effect. You can sharpen or blur the items, you can even add and subtract object in the image. Here’s an example from another site on the right… there’s one additional feature to this bit of code, in that I enclosed the img tag with a <a href> tag… so it looks like this:

<a href=”http://outdoorcampinginfo.com/midlandradio” rel=”nofollow”><img class=”alignright” style=”margin: 5px;” title=”Camp Radio” onmouseover=”this.src=’/images/midlandradio1.jpg’;” onmouseout=”this.src=’/images/midlandradio.jpg’;” src=”/images/midlandradio.jpg” alt=”Camp Radio” width=”275″ height=”250″ /></a>

By doing this, anyone who clicks on the image will end up at Amazon with my affiliate link tagged. This will encourage sales as people will click on images quite frequently. So when you’re putting images on your blog – it’s fine to remember to put in an alt tag – but it’s even more creative to enclose it in a link… The above link, by the way, is a “Pretty Link” – so it’s not obvious that it’s being redirected to Amazon. But if you don’t believe me, go ahead and click on the radio.

Coleman Camping CanopyAnother trick is to use three different images… this creates an interesting effect when the images are properly put together… make sure that the size of each graphic is absolutely equal to the others, then see what I did on the left with a camping canopy. As with the camping radio – this one is linked to my Amazon Affiliate account, so if you click on it, you’ll end up at Amazon. (And hey! If you buy one, I won’t yell at ya! :))

Here’s the relevant code:

<a href=”http://outdoorcampinginfo.com/colemaninstantcanopy” rel=”nofollow”><img style=”margin: 5px;” title=”Coleman Camping Canopy” onmouseover=”this.src=’http://outdoorcampinginfo.com/images/colemaninstantcanopy1.jpg’;” onmouseout=”this.src=’http://outdoorcampinginfo.com/images/colemaninstantcanopy2.jpg’;” alt=”Coleman Camping Canopy” src=”http://outdoorcampinginfo.com/images/colemaninstantcanopy.jpg” width=”300″ height=”189″ />

You’ll notice that you end up losing the first image completely… you can’t go back to it. (of course, you can refresh your browser to see the original image again.)

Now, you don’t have to be a graphics wiz to do these fancy tricks… a good graphics editor will allow you to do quick changes to a graphic… simple color changes, or a ‘sunburst’ on a metal surface, or different lighting effects.

Best Camping Knife
Here’s one of the more difficult graphics I toyed with, a Marine Corps K-Bar knife… I have a good friend who’s former Army – and I thought I’d pull his leg with this graphic. It took a little time to get the wording blended in, and it’s far from perfect, but it’s just another idea of the sort of fun things you can do with graphics.

These nifty tricks really don’t take all that long to do – really complicated ones like the knife above – did take me an hour or so… but most graphic ‘tricks’ I’ve put together only took a few minutes… the writing hand, for example – only took a few minutes to do. I really don’t see this being done very much, or perhaps I’m just not seeing the right sort of websites – but this seems to me to be an unexplored method to engage visitors – and lower your bounce rate.

And a lower bounce rate translates to a higher search engine result page slot – which results in more traffic.

More traffic for you to have a chance at converting to a list subscriber – and once they’ve subscribed – yet one more person whom you may profit from.

All resulting from spending a few minutes with graphic elements on your website.

Now, one last trick you need to know – if you’re a fan of the TinyMCE editor plugin – it has an annoying habit of re-writing your wonderful HTML code. But there’s a simple fix if you’re using the Genesis theme, and Dynamik – which is a wonderful child theme for Genesis – allowing you complete control over your site. If you have this setup, then simply add this:

/** Stop TinyMCE from rewriting HMTL */
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

to your custom ‘functions.php’ file. This bit of code has been a lifesaver to me – since I have a habit of programming my posts in raw HTML. And if you want to use these photo tricks, you may need this piece of code too!

What do you think?

About Ben Holmes

Online since the late '90's, I built my first website in 2001 - coding it on notepad. Times have changed, haven't they? Active on the Warrior's Forum and Facebook - I spend most of my time teaching people how to build their first list - and market to their subscribers. Do you have a list yet?

Leave a Reply

Your email address will not be published. Required fields are marked *