2009-12-10

Categorized |

Better Than Blogger Thumbnails

Thursday, December 10, 2009

The reason these thumbnails are better than the one you get when you upload a picture with Blogger's upload feature is, anytime someone leaves your blog for any reason, a chance of them not coming back, comes into existence. Using the code below will keep people from leaving your blog to see a larger image of your thumbnail. This is the same code that I used in making a mouse-over gallery, the only thing different is, two different size images will be used. Make a small copy of your large image to be used as a thumbnail, upload both images to a host like Photobucket or Tinypic, and then paste the direct links to the images in the appropriate places in the code.

Here is the code you should copy and save somewhere.

<img src="SMALL DIRECT IMAGE LINK" onmouseover="this.src='LARGE DIRECT IMAGE LINK';" onmouseout="this.src='SMALL DIRECT IMAGE LINK';" />


You can add "align="left" or "align="right" at the end of the code, like so /align="right"> , to post with text next to your image, as in my example below (where I used fill text).


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

That's all there is to it :)
Twitter Delicious Facebook Digg Stumbleupon Favorites More

2 Responses to “Better Than Blogger Thumbnails”

sixmats said...
December 11, 2009 8:41 PM

This is interesting, but I'm having a hard time making this work. Where does the link go in the code?


Paul Ketchum Jr. said...
December 11, 2009 10:36 PM

Sixmats, everything should look like this when you are done...

<img src="http://i49.tinypic.com/294kvog.jpg" onmouseover="this.src='http://i47.tinypic.com/283zwl.jpg';" onmouseout="this.src='http://i49.tinypic.com/294kvog.jpg';" align="right" />

A link to a small picture goes in the first and last section (use the same link twice), and a link to a large picture goes in the middle section.


Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

News

Loading...

Recent

Comments

Enter your email address:

Delivered by FeedBurner