A Blog with Bigger Pictures

Article by Leah Witmond (1,296 pts ) , published Oct 12, 2008

Part two of this tutorial discusses how to transfer your new layout to your existing story or photo blog at Blogger and edit the HTML of your existing post to show big pictures.

Step Five – the transition

Once you're happy with the results, you can just carry them over to your existing story blog, knowing exactly what to do, and what not to do.

Step Six – big pictures

To make your existing pictures show up full size on your blog, you'll need to edit all your existing posts. Click Edit Posts and select which post to edit first.(Picture 6)

picture 6

Now, you'll have to go into "edit html" mode and edit the codes of all your uploaded pictures.

Below is a picture of what you need to look for. (Picture 7)

picture 7

I circled two pieces of code with red. The first one is the altered code, the second one the original.

You need to change the S400 into S800 in the HTML code of all your pictures. That's quite a bit of work, but that will do the trick - in most cases.

Our next picture is a screen shot of the preview, so you can see the difference!(Picture 8)

picture 8

You can, of course change all these codes manually, but if you've got MS Word installed on your computer, there's a much quicker and easier way to do this.

When you go into html view, copy and paste everything into Word. Place the cursor somewhere in the post field and press the "Ctrl" and "A" button, thus selecting everything within this field. (Picture 9)

Picture 9

Press "Ctrl" and "C" to copy the contents of your post, and paste it into a new Word Document using "Ctrl" and "V".Then hit Crtl + F and select the tab "replace"In the "Find what" field, type in s400and in the Replace with field: s800Then click replace all. (Picture 10)

Picture 10

After that, copy and paste your edited Word document into the HTML field of your blog post and hit publish.

Now, some of your pictures might actually be too big to fit your blog, but don't worry. All you need to do to get those pictures fit into your blog nicely again, is copy and paste the following piece of code into the HTML-code of those pictures:width="600" height="450" as shown in picture 11.

Picture 11

The value that's most important here, is the width="600". You will need to calculate the height of your picture accordingly (or let your picture editing program do that for you and just copy and paste the values it gives you) or simply leave out the values for height. Either way works.

Finally

For future chapters, you have two choices: Either you upload your pictures to Photobucket and copy and paste the html code they give you into your post (make sure you're in html-mode), or you upload to blogger/picasa and adjust the html-code the way I showed you.

Good Luck!

To see an example of a blog with big pictures, you can visit one of the following blogs:

The Queen of Hearts - by Leah (http://leahsimstories.blogspot.com)

Priest Cutie - by Leah (http://priestcutiestory.blogspot.com)

© 2008, Leah Witmond

 
Top Related Articles
Find More Results
Subscribe to Web Development
RSS
Get free weekly updates, directly to your inbox.
Browse Web Development