Joss & Main Exclusive online private sales for the home

Friday, January 31, 2014

Blog Changes

A few people have inquired about the recent changes to my blog layout, so I figured I'd share some of what's been going on behind the scenes here.  Some of the new additions to my blog include adding a photo header that highlights some of my favorite projects, creating a project gallery page, adding "Pin it" buttons to all of my photos, and adding a "Share this" bar at the bottom of each of my posts.  Read on if you'd like to find out how I did each of these!

1. Project highlights photo header.  I edit my photos in Picasa because it's free and easy to use.  (However I am currently in the middle of a 30-day free trial of Photoshop and it's reallllly making me want to shell out the extra dough to have it permanently.  We shall see).  The one thing I can't seem to get the hang of in Picasa is making collages.  So I did some research and found this other (free) site, Pixlr which has really easy collage-making functions.

To make a photo collage for a header, you first need to find how how wide your blog is.  You can do this on blogger by going to Template>Customize>Adjust Widths... at the top, the number to the right of where it says "Entire Blog" is the width you want to use.  Mine is 980 px.  Jot your number down.

Then go to Pixler.com and click on Pixler Express>Collage.  Click on the box at the bottom that says "layout" and choose one of the short and wide options for a header.  Add your pictures by clicking on each box, zoom and position them in the box the way you like, and play with the spacing, colors, etc using the options at the bottom.  Then click finish.  (I forgot to mention that you should edit each individual photo before uploading it to your collage.  Once you click "finish" it turns it all into one file and you can no longer edit the individual pictures).

Next, click the "Adjust" box at the bottom left and choose "resize".  Here you want to enter in your blog width as the photo's width.  Make sure "Keep proportions" is on so it doesn't distort your pictures.  Then click "apply" and it will take you back to the main menu where you can add text, borders, etc.

To add your collage to your blog, go to Layout and click edit on your header gadget.  Upload your picture. If you have your blog title on your photo, check the box that says "Instead of Title and Description".  You still need to put something in the title box, but it won't show up.

Bam... a fancy blog header... easy peasy!!



2. Project Gallery page.  This one, I will admit was not quite "easy peasy".  It's not really difficult, but tedious and a tiny bit scary because it's all html code (made me with I had paid more attention in my college programming class).  Craftivity Designs has an awesome "beginner-friendly" tutorial, which is what I followed my make my project gallery page.  I still want to make a few adjustments, but it will do for now.

3. Pin-it buttons for photos.  This is another one that was kind of intimidating because it required html coding AND CSS, but I tried it out and it worked, so I'm confident that you can do it too!  Code it Pretty has great tutorials for all kinds of fancy blogger stuff.  I used the basic "pin it" buttons tutorial, but she has since added several different options, which seem to be a bit simpler than what I did.  Apparently Pinterest came out with "official" buttons that are much easier to install.

4. "Share this" bar at bottom of posts.  I used this website to add the "Share It" bar at the bottom of each of my posts.  There is an option for blogger (and also for wordpress) that makes it really easy.  You can customize the look and choose which social media outlets you want to include.


A lot of this stuff is probably second nature to a lot of you seasoned bloggers, but it's all new to me and I'm learning as I go!!  Hopefully this helped some of you out there who are beginners like me!  Leave me a comment if you decide to try out any of these... I'd love to know how you make out.

Have a great weekend everyone!  Hopefully next week I will be able to show you my painted study!

14 comments:

  1. That's great information. Thank you for sharing it.

    ReplyDelete
  2. Thanks Colette...you are the best!

    ReplyDelete
  3. Thank you! I just did a banner, love it! :)

    ReplyDelete
  4. NICE! I love FREE and the header is adorable! #SITS

    ReplyDelete
  5. Looks great! I never heard of Pixler before, bookmarking it now! Thanks! #SITSBlogging

    ReplyDelete
    Replies
    1. Great! Yea, I really like Pixler because it's very easy to use and free of course.

      Delete
  6. Great upgrades. I just upgraded my entire blog this week, what a great feeling to have a few new things, right? #SITSBlogging

    ReplyDelete
  7. Your blog looks great. Pixlr is really good, it has many of the same functions as Photoshop in the editing part.
    Thanls for sharing how you made all your improvements. There's always something to be tweaked with a blog, but I haven't done anything in a while, I must get on that! :)

    ReplyDelete
  8. The blog looks great. I like to use pic monkey for my picture editing. Looks like you did a good job with all those updates. I would have been a bit terrified. I'm on wordpress and a lot of those things have plugins which is great.

    ReplyDelete
  9. Your blog looks great. You have some great tips here that I'm going to try. I need to do some work on my blog also.

    ReplyDelete
  10. Thanks for the great tips! I am a newbie blogger so I am always looking for great tips like these. #SITSBlogging

    ReplyDelete
  11. Thanks for sharing what you have learned. It can be overwhelming to set up and keep up a blog. Very helpful! Visiting from SITS Comment Challenge.

    ReplyDelete
  12. I did a header for myself at first before I had someone else do a different one - fun! I love having a pin-it button too. #SITSBlogging.

    ReplyDelete
  13. I love the design, and I can't wait to hear about more projects you have going on, now following =)

    ReplyDelete

I am so thrilled that you stopped by and I loooove comments! Leave me some love and I will respond shortly. Peace and love – Colette.