how I . . . your blog design questions

Because I organize the new blogger blog hop, I get emails from new bloggers asking for help with specific blog design questions every so often.  When I would get these emails last year, I usually could only respond with "I have no idea but I'd love to know the answer to that question too - I'll let you know if I figure anything out."  But very surprisingly to me, this year I actually know some of the answers - crazy!!!  So, I figured I would write some short, simple answers about some of those blog questions.

How I resize my photos:

For 99% of my photo editing, I use either Picasa or PicMonkey.  I try to take mostly horizontal photos and try to crop them in a uniform size (this is not always possible but is getting easier as I work on my photography.)  After adding in a little fill light or highlights when needed and other edits, I resize the photos to 600px which ideally works out to 600px x 400px but depending on my cropping, sometimes it is a little over or under 400.  To do this in Picasa, I click the export button and choose resize to 600px plus I choose Normal for the quality.  In PicMonkey, I use the resize option and choose "keep proportions" so this also usually works out to 600 x 400 and I would probably choose the middle quality choice here too - it depends on the photo.  Most importantly, right after I upload the photo to blogger, I click on the photo and choose "original size" since this brings the photo up to the size I already set during the editing.  

How did I decide what size photos to use:

Your desired photo size might be different than mine depending on how you set your width for your blog but my blog is currently set at 1160px for the entire blog and 340px for the right sidebar.  To check or change your width: choose "template" from the blogger menu, then underneath where it shows a little box with a pic of your blog, click on customize.  From the menu in the upper left corner, choose adjust widths and then just use the slidebar to adjust the widths until you are happy.  I might try adjusting these numbers at some point so that my photos line up with the edges of my text (right now the photos are smaller) but I honestly didn't even realize that until I was writing this post.  Edited to add: I have been adjusting the widths on my blog recently so these may not be the exact numbers when you are reading this.  

How I made my links for flickr, bloglovin', etc.:

For this you need to start with a high-resolution blank white image.  There are lots of ways to do this - I have a blank that I've just been reusing since I found it last year (I can't remember where.)  I think there are also ways to use photo editing programs to create this or even starting with a high resolution photo - if you know what I'm talking about and have a suggestion, email me and I'll update this post.  Also, Ellison Lane Quilts has one here.  

So, let's say you have found or created a high resolution blank white image. Open that image in PicMonkey and using your preferred fonts and graphics, create your first "button."  For this first button, you use the longest word or phrase since you'll be reusing this same template for all your buttons.  Crop the image so there is just a little bit of space above, below, and a tiny bit of space to the left and right of the word/graphic (you need some space so they aren't all squished together but just a little.)   Resize to a good size for your sidebar - I resized to 279 x 55.  And if you are wondering, my font size is 30.  But don't use the combine/merge option since you are going to go back and change the text for the next button.  Save it using the high quality option and upload it to a photo hosting site - I use photobucket.  Then go back to PicMonkey and click on the text, delete it, and write your next label.  Repeat.  

Once everything is uploaded to photobucket, go into the blogger menu and choose layout.  Decide where you want your buttons and click on "add a gadget" and choose the html/java script option.  Here is the code you need:

<a href="where the link goes" target="_blank"><img src="direct link that is under your photo in photobucket" border="0" /></a>

Replace where the link goes with where you want your link to go - (to get the link, you just need the url from your blog's page on flickr, bloglovin', instagram . . .)  Then replace direct link that is under your photo in photobucket with the code under your photo in photobucket that says direct link.  Make sure to leave the "" where they are - just replace the parts in bold.  Do this for each button and voila, you are done!  Easy peasy, right?

Okay, that is about all I think I can do for today!  I have a few more of these "how I . . ." answers to write up.  If you any questions or suggestions, leave a comment or send me an email.  Hopefully, some of this makes sense- there are way better tutorials out there with screen shots and more specifics but I hope this helps a little.