2009-12-10
Categorized | Image Expand
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.
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 :)
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 :)
This post was written by:
Paul Ketchum - who has written 23 posts on Foto Tips Online.
My fiancee, photography, and sharing what I know are my biggest passions in life, so I hope you have found this post useful. If you would like to republish anything found on this blog, I only ask that you give credit to me the author, and that you link back to this blog. Thank you for reading. Please visit my other blog- I Love Romania Travel.
Subscribe to:
Post Comments (Atom)
Posts
2 Responses to “Better Than Blogger Thumbnails”
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?
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