photo recentposts1_zpsb327c1c1.png
Recent Posts with Thumbnails for BloggerPowered By Blogger Widgets

Sunday, April 8, 2012

Making a Menu of Blog Posts {Linking a picture to a post}

Have you seen my picture archives yet? I've got all my tutorials and free patterns and recipes done and am trying to keep up as I add more. I've envied those who have their archives in picture form and have seen a couple of tutorials for ways to do this. One popular one is to use a linky program and another involved some HTML coding... I've figured out a way to do it for FREE and with NO CODING! yeah! It looks something like this:
Pin It
okay, lets get started! First you need to edit your picture to what you want for your menu. I did most of mine in picnik... but we all know that rides almost over... SO...for this tutorial I used picmonkey. For the most part, its great... the biggest thing I've noticed is that you can't save to the site, only to your computer. Once its saved you can't undo any edits... But, for this menu editing, it works great!
Upload the picture you want to edit...you will see something like this... menu on the side.
 
you need to RESIZE first, otherwise when you crop you will just have a tiny bit of something...I want a final square of 150x150, so I resize to slightly larger than that.
 
Then I go to CROP, and get my final little square size.
 Now, I like to put a border around the square. So, next up is BORDERS.
 
I used the simple edge, followed by rounded corners.
 
Next up... TEXT. I like to put the title of the post clearly on the square.
Save to your computer. With the borders my square ends up just slightly larger than I started with. You need to keep them all the same or or you will end up with some that look out of place (you can see this in my tutorial and pattern page, opps!)
 
Now, open blogger (or other host) to the page you want your menu to be on. Upload your new edited photo. I center mine on the page and make it the small size.
 
Click on the picture to highlight it. While its highlighted, click the link button. You may have to click link twice, once to undo the original link (pictures are linked to themselves when they are uploaded) and another time to bring up this box. Make sure there is nothing in the text to display or link go lines.
 
The text to display will be blank always because you are linking to a picture, not text. Open (in a new window or tab) the blog post you want to link the picture to. Copy this address.

 Paste the address into the link line (To what URL should the link go?)
 Click OK...and...your photo should now be linked to your original blog post. You can check by clicking the picture (in edit mode) and see what link appears. 
So that's it! You can arrange the pictures however you want. I've made two per row because I wanted nice big thumbnails. 
Please let me know if you have any further questions... I'll update this tutorial as needed and hope its helpful to you!

Photobucket
linked to these great parties:
Sundae Scoop-I Heart Naptime with Chocolate Sundaes
Nifty Thrifty Things Sunday-Nifty Thrift Things 
Simply Klassic Sunday-Simply Klassic Home

Market Yourself Mondays-Sumo's Sweet Stuff
created by Emily Thompson at 4:29 PM
Labels: ,

13 comments:

  1. What a cute idea!! Great job on the tutorial as well! Very simple to follow!! I haven't messed with picmonkey much, but I need to since picnik is going away .... :*(

    ReplyDelete

  2. Good idea. Know I need to do something similar on my blog. I just haven't figured out the route I want to go. Thanks for the excellent tutorial though. I'll definitely keep this way in mind.

    ReplyDelete

  3. This is a fabulous tutorial....I'm totally doing this the next naptime I get! =) And thanks for using PicMonkey too!
    -Shara @ Palmettos and Pigtails

    ReplyDelete

  4. Being new bloggers we love seeing great tutorials like this! Thanks for sharing at our "Beautify It Monday" link party! We hope to see you back next week!

    ReplyDelete

  5. Thanks for sharing your tutorial! I haven't used PicMonkey but I've heard great things about it.

    ReplyDelete

  6. Thanks for sharing on Busy Monday at A Pinch of Joy! I've been using Gimp but after seeing your very clear tutorial, I think I need to go check out PicMonday. Very helpful.

    ReplyDelete

  8. I use Typepad as a host for my blog and it can be a bit difficult to add things to the sidebar but when I get a bit of time I am anxious to see if this will work for my blog too. Thanks so much and thanks for linking up to BeColorful. I am also featuring your post on this week's Motivated Monday.
    pam

    ReplyDelete

  9. Great tutorial. I'm going to be highlighting your post today in my link party.
    Thanks

    ReplyDelete

  10. Fabulous! saw you on Becolorful, pinning it to try later,... thank you!

    ReplyDelete

  11. This is great. I've been thinking of doing a picture based recipe page for a while now and just wasn't sure how to go about it. Thanks for sharing!

    ReplyDelete

  12. This is so fabulous for me (a newbie). Thank you so much for sharing! Now, if you could do a tutorial to show me how to add my pic on the side here like everyone else has you can see me! Thanks for a great tutorial!

    ReplyDelete

  13. Hi there, I'm following you now from the sharing time blog hop. Stop by sometime at http://2earthwithlove.blogspot.com

    ReplyDelete

Subscribe to: Post Comments (Atom)
Blogging tips