My Best Photo Blog Template To Date

"What Caught My Eyes" is the name of my new personal photo blog, and the template that I am using was inspired by Mike Matas fantastic Blogger blog,.. and was designed by me. The template is designed to just show pictures on the homepage, and no text,.. the only text that appears on the homepage is in the post titles. Both vertical (portrait style) and horizontal (landscape style) pictures of up to 800 pixels wide that are the first pictures in a post will appear centered on the homepage.



The template has a top navigation menu, a Blogger navbar that appears on mouse-over (which makes it easy to sign in, or make a new post), a widget in the header for Feedburner subscriptions or other social network icons, a customized Flickr widget in the footer section, a three column footer, and compact share buttons installed.

The template works fine in all browsers except any version of Internet Explorer (of course), people who visit the blog with IE will either see the complete post, or a small square the the pictures are supposed to be. They will also see a message that tells them that they can view the pictures by clicking on the post titles (only IE users will see the message).

Because of the issue with IE, I will only make this template available for download if enough people show interest in it through comments here (yeah, I need your comments too).

You can visit my new blog, and see the photo template HERE.

READ MORE OF THIS POST

Black Foto Free Blogger Template

Black Foto is another Blogger template designed by me with photo bloggers in mind. The template features a medium size automatic post summary image on the homepage, social network sharing icons installed in two locations, no externally hosted JavaScript files, compressed CSS for fast loading, and more.

LIVE DEMO | DOWNLOAD | TEMPLATE INSTRUCTIONS

READ MORE OF THIS POST

Another Free Blogger Template

Simple Brown is the name of my new Blogger template design, which is available for free download. This template would be excellent for bloggers who write a photo journalist type blog, or those who write travel journals.

LIVE DEMO | DOWNLOAD | TEMPLATE INSTRUCTIONS

READ MORE OF THIS POST

My Free Photo Blog Template

I went ahead and designed a template with photo bloggers in mind, which is available for free. The template was designed to be clean looking, without a lot of images to slow down loading, and without hosted java script files to foul things up later. I already wrote about using the blog on my Hacking The Hacked blog, and I do not want duplicate blog posts on the net, so please visit HERE to read about it and for the download, and please visit HERE to see a live demo. If you know just a little bit about CSS, it is very easy to reconfigure the Flickr widget to suit your needs better (or you can leave it as is).

READ MORE OF THIS POST

Free WP Photo Template

Last night I stumbled across this beautiful free WordPress template, which is available from Wordspop.

I do not have much to say about the template, as it is only made for WordPress right now (I'm sure you will see a version for Blogger soon). See the demo, and or, download it HERE.

READ MORE OF THIS POST

Hacking The Hacked

Hacking The Hacked is the title of my new blog, and it is dedicated to custom Blogger blog templates, and how to fix or add new features (hacks) to them. The reason for the name "Hacking The Hacked" is, most custom Blogger templates have been modified from original WordPress templates into many different versions. On the internet you can find many tutorials on customizing original Blogger templates, but not very many tutorials on templates that have already been customized to some degree, I hope to help fill that void. I will also talk about generic Blogger templates, but this blog is mainly focused on those that have already been customized. I hope the information that you will find there, will be useful. If you would like to read about using the template that I am using here on Foto Tips Online, and new hacks in the future, please visit Hacking The Hacked :)

READ MORE OF THIS POST

Book Recommendation

If you have been thinking about purchasing a book on learning about photography, I cannot think of any better than "The Ultimate Field Guide To Photography" from National Geographic. The book has been out for a few years now and it is probably possible to pick up a copy from a second hand book store, a yard sale, or anywhere else books are resold, although I can't imagine why anyone would want to part with their copy.

The book is suited for beginners to pros, and covers topics such as buying a camera, point and shoot cameras, basic rules of photography, advanced techniques, digital darkroom, making better prints, film photography, scanning, archiving, projects, and more.

The National Geographic Society also publishes the following field guide books on photography, I own the B&W book, and would recommend it as well.

"Action And Adventure," "Digital," "Digital Black & White," "Landscape Photography," "People & Portraits," "Travel," and "Photographing Birds."

READ MORE OF THIS POST

Free Photo Style Icons

If you would like to add some icons to your blog that are related to photography, then the icons below would be a great addition. The Polaroid style icons on the left come from Webtoolkit4.me and can be downloaded for free by visiting their site. If you download the Polaroid icons and look closely at the Stumbleupon icon, you will see that they misspelled it, using a "p" where the "b" should be. I fixed the icon and you may right click on it, and save it, along with the Technorati icon that I made, and which is not included in the set (below the first picture). The camera icons on the right come from WebTreats/IconsEtc.com and you may download them individually for free by visiting their site,.. they have far too many to show here, and the icons below are just a small sample of them. Their icons are very large when you download them, and you will have to re-size them yourself.



PNG images that can be saved:

If you would like to add the Polaroid style icons to your Blogger template like I have below each of my posts on my Demo Blog, please visit Webtoolkit4.me and download the icons first so that you may host them yourself (I cannot give any guarantees about performance if you use the links to the icons below,.. bandwidth may be exceeded in the future). If your post column is wider than 620px, you may need to resize the icons, or remove a few so they will fit. Please try the following on a test blog before adding the icons to your regular blog.

Step One: Log into your Blogger account and go to your Dashboard, click on Layout, click on Edit HTML, download your current template in case a mistake is made during the installation of the icons, and then click on the Expand Widget Templates box.

Step Two: Copy the code below and paste it above ]]></b:skin> in your template so that you can make any adjustments to the height, width, margins, and padding that might be needed-

.bookmarkbox {
height:72px;
margin-top:30px;
width:600px;
padding:0px 8px;
}

Step Three: Copy the code below and paste it in Note Pad, Microsoft Word, or something similar so you can make a few changes to it. Change the icon links with those of your hosted icon images, add your Twitter ID to the Tweet This icon, and add your Feedburner subscription ID (subscription address with Feedburner) to the Feedburner icon.

<div class='bookmarkbox'>

<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'><img alt='Digg' height='78' src='http://i45.tinypic.com/vy7hb6.png' width='62'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Reddit'><img alt='reddit' height='78' src='http://i46.tinypic.com/wjco7n.png' width='62'/></a>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' height='78' src='http://i50.tinypic.com/21c5wt0.png' width='62'/></a>

<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' height='78' src='http://i47.tinypic.com/2myuivm.png' width='62'/></a>

<a expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot;YOUR TWITTER ID &quot; + data:post.url' title='Tweet it on Twitter'><img height='78' src='http://i46.tinypic.com/osbz0h.png' width='62'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' height='78' src='http://i46.tinypic.com/9hm7w9.png' width='62'/></a>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank' title='Facebook'><img alt='Facebook' height='78' src='http://i48.tinypic.com/2a5c2zb.png' width='62'/></a>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER SUBSCRIPTION ID&amp;loc=en_US' target='_blank' title='Subscribe Via Feedburner'><img alt='Feedburner' height='78' src='http://i46.tinypic.com/bgzsaw.png' width='62'/></a>
</div><div class='clear'/>

Step Four: If your template does not have the automatic read more hack installed, paste the above code imidiately after <data:post.body/> or <div class='post-footer-line post-footer-line-1'> Again, you should try this on a test blog first so you can see where the icons will appear before adding them to your regular blog (it is always best to try things on a test blog first).

If you do have the automatic read more function installed, paste the above code <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> <--HERE--> </b:if>

The icons should only appear on your post pages so you will have to save your template before you can see the icons.

READ MORE OF THIS POST

Cool Flickr & Picasa Widget

I stumbled across this very cool little widget on Roy Tanck's blog today. The widget works much like the popular Labels/Tag cloud widgets that rotate when you place your cursor over them, you can see a working example of one that uses the RSS feed from my Flickr account in sidebar of my DEMO BLOG,.. the same can be done with your Picasa account. If you click on a picture in the widget, you will be taken to the picture on my Flickr photostream, I can only guess the same would apply if you use Picasa. Anyway, to get the widget, visit Roy Tanck's blog and follow his very simple instructions.

Once you have the generated code, and if you are using Blogger, log into your Blogger account, and go to your Dashboard, click on Layout, and then click on Add A Gadget from where you want the widget to appear,- choose HTML/Java Script, and paste your code, then click save and you are done :)

To add a simple static Flickr widget to your blog, visit Blogger Buster.com and follow Amanda's very simple instructions.

READ MORE OF THIS POST

How To Photograph Cats

Cats are much more difficult to photograph than you might think,.. first you need to find a cat to photograph. If I have a hard time locating a cat, I know I can usually find one pressing his huge paws on my computer keyboard, and making a mess of things. In the event that a there is not a cat near my computer, then I know there is a good chance that one can be found somewhere else,.. where he is not supposed to be.

Once you locate a cat, you should try to photograph them while they are looking at you. The picture below is a good example of a bad picture of a cat, it would have been much nicer if the cat had been looking in my direction when the picture was taken.

You can try different things to get their attention, a toy that resembles a mouse usually works, or if you do not have toy mice in your home, you can try pressing your tongue to the roof of your mouth, and make a sharp *tick* *tick* *tick* sound. I almost had the cat's attention in this picture, but didn't quite get it.

When photographing cats, you have to work fast, otherwise they might lose interest, cop an attitude, etc. and all your trying will have been in vain. I was making some progress when I took this picture, but it still wasn't what I wanted...

In a split second the cats attitude changed, and I knew the photo shoot was over.

Photography shouldn't be about constantly following rules, it is meant to be fun. There is no reason for this post, other than me just wanting to take pictures of something, anything :)

READ MORE OF THIS POST

More Image Effect Tricks

I have already written about this first bit of code in previous posts which can be used for things like enlarging pictures, giving pictures a mouse-over/hover effect, and for showing hidden images:

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

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

<img src="SHOWN PICTURE DIRECT IMAGE LINK" onmouseover="this.src='HIDDEN PICTURE DIRECT IMAGE LINK';" onmouseout="this.src='SHOWN PICTURE DIRECT IMAGE LINK';" />

Examples:



Now I will tell you about two mores scripts that give neat image effects, but are much easier to use once the scripts are added to your template.

The first script comes from BloggerStop.net and changes the opacity to any of your images that have class="linkopacity" placed in the image code like so:

<a class="linkopacity"><img src="http://xxxxxxxxxxxxxxxxxx.jpg"/></a>

Linked image example:

<a class="linkopacity" href="http://www.fototipsonline.com/"><img src="http://xxxxxxxxxxxxxxxxxx.jpg"/></a>

CLICK HERE FOR LIVE DEMO

To get the script, visit BloggerStop.net and follow the very easy instructions given there.

This next script comes from DynamicDrive.com and enlarges any of your images that have class="expando" placed in the code. Like so:

<img class="expando" src="http//xxxxxxxxxxxxxxxxx.jpg" width="200" height="150">

CLICK HERE FOR LIVE DEMO

To use the script with Blogger, STEP ONE will be to copy the text below and paste it in Note Pad, or Microsoft Word (or something similar).

<style type="text/css">
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>
<script type='text/javascript'>
//<![CDATA[
<--Paste all code here from .js file -->
//]]>
</script>

/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>

STEP TWO, will be to visit DynamicDrive.com and either download the .js file by right clicking on the .js file link and saving it, or click on this LINK and copy the file/script.

STEP THREE, paste the script you just got from Dynamic Drive where the text in red is,.. from the first step.

STEP FOUR, log into your Blogger account, go to Layout, click on EDIT HTML, download your template just in case anything goes wrong while adding the code (nothing should go wrong, but it is better to be safe than sorry), and then find the closing head tag which looks like this </head>, now paste everything immediately before the closing head tag and save your template.

Now whenever you want to post an image that expands, just add class="expando" to the image code, and make your image smaller by defining the shrunken size with width="size in px" height="size in px" in the code.

The hack for adding the .js file comes from Blogger Resources, which is an excellent blog for learning all sorts of hacks/tricks that can be used on your own blog.

This will probably be my last post for image tricks/hacks for blogs, unless I find something really good, and I will get on to posting about photography (taking pictures).

READ MORE OF THIS POST

Free Blogger Photo Templates

If you have been a returning visitor of Foto Tips Online, you have undoubtedly seen this blog change templates often. The reason for these changes are in most part do to many things not working correctly in Internet Explorer, and other lesser problems have occurred with Java Script files that were hosted online, and hot linked to my blog. Rather than go into a long rant about how horrible Internet Explorer is (just had a feeling of deja-vu), and that people should stop using it for security reasons alone, I put together a short list of blog templates that are specifically designed with photography bloggers in mind, so that other people can hopefully avoid some of the troubles I have encountered.

The blogs templates below can be found in many places on the net, however for the sake of ease, I have linked them all to BTemplates.com, where you can see live demos, and download them for free if you wish (for Blogspot/Blogger blogs). I will include links to other free template sites at the bottom of this post. The template on the right of this paragraph is one of my favorites, but unfortunately it is not suited to my needs (I may write a post about that particular template in the future). "The Latest" template listed last, would be an excellent template for anyone who writes a photo-journalist type blog.

Without further ado, here are the templates...

Photoplus Light	Gallery
Hybrid Gallery	Showcase
Showcase Light	Dreamy
Portfolio Press	My Showcase
sGallery	TheLatest

More Free Blog Templates

• Deluxe Templates
• Free Blogger Template
• BTemplates
• Falcon Hive
• Blogger Themes
• Theme Craft
• Blogger Styles
• Templatemo
  

READ MORE OF THIS POST