Joshiemoo!

Here's a little thingie I wrote up for some classmates about whacking blogger into an acceptable portfolio site. This is my random art blog here, so it's not following any of these rules xD, but for an example of one, here is my ACTUAL portfolio! >>> jessicadinh.blogspot.com

1. Remove all Blogger-y interface:

Remove posts information: Design > Layout > Blog Posts (Edit) > Uncheck ALL Post Page Options.

2. Put ALL of your artwork on the home page in the form of a SINGLE POST. This is important because when someone clicks on your first image, you want them to be able to scroll through the rest of your images, and that won’t happen if your work is located in several posts. I renamed my home page to Gallery. Design > Pages > Edit the title of the Home page.

Alternatively, if you have larger projects which each require breakdowns, you might consider placing thumbnails on your home page post instead. Then, while editing your home page post, link each image to a new page that you create for each project.

To create Pages: New Post > name of blog on top left > Pages > New Page. You can hide the page tabs for these projects (so that they are only accessible when you click on the thumbnail) if you go into Design > Layout > Edit Pages > uncheck all Pages you want hidden.

To make sure your images are working with Lightbox, go to Design > Settings > Posts and comments > Check YES for showcase images with Lightbox.

3. Put your name at the top, and your title right beneath or to the side. You must have a title, because people want to know what you do. Don’t just put artist!

To get this header, go to Design > Layout > Header.

4. Remove the weird gray-line hatching in the background of your interface. You don't want the background to distract from your art:

Go to Design > Template > And under where it says “Live on Blog”, hit Customize. (I’m using the Awesome Inc. Template, so maybe the other templates will look different). Go to Background and hit Remove Image.

Here you can also adjust the width of your blog under Adjust widths. This will be important if you decide to increase the size of your images. Under Advanced, change all your font colors to be as simple and readable as possible.

5. Increase the size of your images. Go to New Post > Click your blog title at the far top left > Edit your post. You want all of your images to have the same exact width so it doesn’t drive people’s eyes crazy when they’re looking at your stuff.

The default x-large size for blogger posts is 640 px. That is really too small; personally I think 800 px is the perfect size. Any bigger and it will cause people to scroll side to side, which is not good.

Do NOT check Original Size for the image because: if you upload your image at 800 px, it will show up nice in the thumbnail, yes, but when you enlarge it in Lightbox, it will not get any bigger . . . which is the point of Lightbox, to show your images a little bigger. And if you upload your image at a size of say, 1600 px, then the thumbnail will be too big.

SO:

The best way to showcase a larger thumbnail without using original size is to edit the HTML. At the top left, click the HTML tab instead of the Compose tab. I’m stupid with HTML so the following tips are for HTML noobs like me:

One image’s HTML should look something like this:

Look for those highlighted areas to find your images, or you can hack by going back to the Compose tab, throw in a few spaces around your image, and it will be easier to find in HTML. Now, you must locate the HEIGHT, WIDTH, and THE NUMBER WITH AN S IN FRONT OF IT. Actually, there are 2 of those numbers with s in front of it. LOOK FOR THE SECOND ONE.

That ‘s value’ determines the resolution of your image. If you just alter the width and height, it will scale up your image but make it blurry, so you must change the s value. Example:

Change the width and s value to 800. Now for some math :P You want to get a correct corresponding height, so if you divide 800 by 640 you will get 1.25. Multiply this by 289 and you will get 362.5:

Do this for all your images and you’re good to go :)

6. Make sure your email is on the home page, and every other page you create, clearly seen. This is in addition to putting your name and website on each and every one of your images in case people download your work and want to find you later.

7. Make a new page for your Resume. You don’t need a separate Contact Info. Page because your contact info will be on your resume. In addition to having a download link for a pdf. of your resume, post your resume in the form of text on that page. So they can see it immediately, and dl too if they like! Keep it short.

8. If you want to add a link to your random art blog, go to Pages > New Page > Web address, and input the link of your blog there. Save!

And that’s it!

Jessica