How to Organize your Blog Pages - Easy Blogger Tutorial

The New Year always makes me want to get my house organized and since we have been blogging for almost a year, I decided that it was time to clean up our blog pages. It is still a work in progress but I thought I would share a relatively simply tutorial for any of you out there who struggled with this as much as we did!!

I could never figure out how to make my buttons line up so I ended up just putting them one after another on the page - like this - 

While this wasn't completely horrible, I really wanted to be able to organize them by category and have the photo be a link directly back to the post.  After lots of trial and error and a jump start from 

Becoming Martha, I finally figured it out!!!!

Much better - don't you think?  Before I get down to the step by step here are a few tips that I figured out to make this process easier.  We are very new to blogging, so many of you may have already figured this out, but I thought I would share them anyway!

Tips from a Newbie

1.  Set up another private blog for you to practice on.  Blogger makes this very easy and it will allow you to try out all your changes and gives you time to complete them without leaving your blog in a state of disarray. 

2.  Always include a Square picture with a banner on your post. This will allow you to have everything all lined up neatly across the top without distorting any of your pictures.  Learned this the hard way and as you will see, I didn't go back and correct all of them.  The Banner just makes it easier to identify what the post is about since the pictures are rather small.  I use PicMonkey to edit all my pictures and you can easily crop your pictures to a square.

Now, down to business!  Here's the step by step - 

Organize your Blogger Pages

1.  Open your Page in one Tab and your actual blog in another - 

1.  Go to the actual Blog Post (click on the title so that the URL has the page title in it)

2.  Right click on the picture that you want to use and select "Copy Image URL"

3.  Go to the page in Blogger

4.  Select HTML  (Our practice/test blog is named Gus the Goat)

5. Select Insert Image

6.  Follow steps 1 - 4 in the next slide

7.  A box will come up and say your image has been added - select Done

8.  You will then see the HTML for your picture and it will look something like this - 

9. At this point you will want to highlight and delete the code in yellow -  Your numbers may differ but basically you want to make sure that your remove everything from imageanchor to the width.

  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqheMVHWvELrns_ezGuU45VdE1YWnyDeCuV6IrczRaEMvPb5_11dzXNVJdi4XCkDo2tB6wh_pucM7E57CrqspKrGEmbDkrBj8yXEs87Ibz-UGTvKn12OQremmvTjydNcg9WyJ9_R8Shc/s320/Thanksgiving+Mantel+11.jpg" imageanchor="1" style=""><img border="0" height="289" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqheMVHWvELrns_ezGuU45VdE1YWnyDeCuV6IrczRaEMvPb5_11dzXNVJdi4XCkDo2tB6wh_pucM7E57CrqspKrGEmbDkrBj8yXEs87Ibz-UGTvKn12OQremmvTjydNcg9WyJ9_R8Shc/s320/Thanksgiving+Mantel+11.jpg" /></a>

10.  Then Add the code in blue in the same position-  

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqheMVHWvELrns_ezGuU45VdE1YWnyDeCuV6IrczRaEMvPb5_11dzXNVJdi4XCkDo2tB6wh_pucM7E57CrqspKrGEmbDkrBj8yXEs87Ibz-UGTvKn12OQremmvTjydNcg9WyJ9_R8Shc/s320/Thanksgiving+Mantel+11.jpg" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqheMVHWvELrns_ezGuU45VdE1YWnyDeCuV6IrczRaEMvPb5_11dzXNVJdi4XCkDo2tB6wh_pucM7E57CrqspKrGEmbDkrBj8yXEs87Ibz-UGTvKn12OQremmvTjydNcg9WyJ9_R8Shc/s320/Thanksgiving+Mantel+11.jpg" width="180" /></a>

11. Then Add the width code in blue in this position -

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqheMVHWvELrns_ezGuU45VdE1YWnyDeCuV6IrczRaEMvPb5_11dzXNVJdi4XCkDo2tB6wh_pucM7E57CrqspKrGEmbDkrBj8yXEs87Ibz-UGTvKn12OQremmvTjydNcg9WyJ9_R8Shc/s320/Thanksgiving+Mantel+11.jpg" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqheMVHWvELrns_ezGuU45VdE1YWnyDeCuV6IrczRaEMvPb5_11dzXNVJdi4XCkDo2tB6wh_pucM7E57CrqspKrGEmbDkrBj8yXEs87Ibz-UGTvKn12OQremmvTjydNcg9WyJ9_R8Shc/s320/Thanksgiving+Mantel+11.jpg" width="180" /></a>

12.  Please note that 180 is a width that works well for me and allows me to have 3 images in each row.  You may have to play with this number to arrive at one that works for your blog.

13.  Select the Compose button and your image will appear.

14.  Click to the right of the image then drag your cursor back over the image to select it.  Your image will then be grayed out.

15.  Select Link - when you do this the cursor will "Pop" back the right of the image.  Drag back over the image to highlight it again and select Link again.  Don't know why this happens but it happens every time!!!

Once you select Link for the second time you will be able to paste your web page URL into the box, Select Open in New Window, and then OK.

12.  Click Publish and then go to your page to test the link.  Your image should now be a link.

13.  To add additional images, simply select html and start the process all over again.

Note that you shouldn't have any <br /> between your pictures or they will be on separate pages - the code will look something like this once you add your second image -   You can hit return in the HTML page to add blank lines between the image code to make it easier to see, but the blank lines will not show up when you select compose because there isn't any code.

Always make sure to update your page if you are getting in and out of it and Test it often!

I hope this isn't too hard to follow.  Keep in mind that we are newbies so a lot of our terms may be incorrect and this may not be the most "Correct" way to create these kind of pages, but it works for us!

Let me know if you this works for you - I hope that it will be helpful!