designs for your weblog!

Photoblog Tutorial

For previews, check out Photoblog Preview. Hint, you can click on the sidebar links to change the colors to see which one you like best!

For the codes to copy and paste into MT, check out Photoblog Template and Styles.

New!: 2 sets of new styles are available for a small fee - they work along with this tutorial and only require pasting a new stylesheet into Movable Type.

Uses a design based on Snap!, Kristine's personal photoblog.


This photoblog format has the following specifications:

If you fit that profile and want to learn how I use this format for my photoblog, welcome to the tutorial. Otherwise, I can be hired to create something which will fit your needs better.


Setup: Create a new blog. Turn on Individual and and Category and Monthly Archives. Turn off Convert Line Breaks in the Blog Config. Use the Codes on this site for the Main Index Template and the Individual Archive Template and the Date-Based Archive and the Category Archive templates. Pick one of the 4 stylesheets [preview] and paste it into the styles-site.css
optionally: Create categories for your images to go into - keep the basic because when you upload pictures, you can put them into similar folders.

Prepping pictures: As the files transfer in off my camera, I run an action in photoshop to make them 500px x 333px. Then I save them as .jpg files into a categorized directory.

Posting: When you want to make a new entry, click the upload button. Browse to your picture. Upload to your Local Archive Path, and if you wish, put a category name as the directory name (this keeps things a bit more orderly.) Click Upload.

Leave "Create a new entry using this uploaded file" checked, and check "Create a thumnail for this image." Change the width to 100px and the height will automatically change to 66px. Click Embedded Image.

A new entry screen will open up. Fill in the title and select a category.

You'll see something like this in the Main Entry Text box:
<a href="http://love-productions.com/snap/shot/family/littlemegan.jpg"><img alt="littlemegan.jpg" src="http://love-productions.com/snap/shot/family/littlemegan-thumb.jpg" width="100" height="66" border="0" /></a>

Copy http://love-productions.com/snap/shot/family/littlemegan (note - its only the path, no extention on it) into the Additional Entry Text box.

Delete everything in the Main Entry Text box and type the description of your picture. Mine looks like this:
This is little Megan. She's my sisters doll that sits in her car. My little Kristine sits on my desk. So I promised I'd take a picture and put it up of little Megan so little Kristine wouldn't be so lonely. :)


Click Save!

Repeat, repeat, and repeat! Marvel at the beauty of your photoblog.
Sister site to Blogplates & love-productions


Has this site helped you?
donations will help with the upkeep of the site, and encourage me to add more features!


©2001-2003, blogstyles.
Where to?
Home

Two Column Styles
Three Column Styles
Photoblog Styles

Styles by Color

MT Tutorials
Contact

blogstyles: designs for your blog!
link to blogstyles!
last 50 visitors