How to make Blogger Comments Avatar Image Round {Blogger Tutorial}

Last week I showed you how to turn your Blogger About Me widget image from square to round. This week I am showing you how to make your commentors avatar image round. Again, just like last week, this update will take you about 30 seconds.

How to Make Blogger Comments Avatar Image Round: A Blogspot Tutorial

1. Go to Dashboard > Template > Edit HTML.
2. A few lines down you'll find <b:skin>--</b:skin>




3. Click the arrow next to it to expand your blogs template code.
4. Scroll down until you find #comments .avatar-image-container img
5. Just after the { but before the closing } you will need to add the following code.

-webkit-border-radius: 50em; 
-moz-border-radius: 50em; 
border-radius: 50em;

6. And change the border width from 1px to 0px.
7. Save your template.

Viola you are done! Again bask in the awesomeness of your round avatar.

If you have any questions feel free to leave a comment and I will be happy to answer them. If you apply this update to your blog, I would love to see it in action. Leave a comment and post a link to your blog.

How to make blogger 'about me' profile picture round{Blogger Tutorial}

Tonight (yes tonight! I blog when I can. Kiddos are asleep!) I have a really simple update you can make to your blog in about 30 seconds. Circles and triangles are all the rage right now in the design world. And thats fine with me. I'm a minimalist and I LOVE minimalist designs and the simple circle is the best form of minimal design.

Seriously, this is the fastest update ever. I think it would take you longer to read this then it would to implement this.

How to Make Blogger "About Me" Profile Picture Round: A Blogspot Tutorial

1. Go to Dashboard > Template > Edit HTML.
2. A few lines down you'll find <b:skin>--</b:skin>


3. Click the arrow next to it to expand your blogs template code.
4. Scroll down and find ]]></b:skin> copy and paste the following code just ABOVE it.

.profile-img { margin:0 auto 0; -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; }

5. Preview your template - make sure it worked.
6. Save your template.

Viola, you are done! Now bask the awesomeness of your round profile avatar.

The border-radius property is a shorthand property for setting the four border properties. This property allows you to add rounded borders to elements. You can learn more about the border-radius property here.

If you have any questions feel free to leave a comment and I will be happy to answer them. If you apply this update to your blog, I would love to see it in action. Leave a comment and post a link to your blog.

Wanna know how to make your commenters profile picture a circle, like here on Loving Life Designs, to match your new and improved profile about me avatar? (like pictured below?)

Sorry. You'll have to read about it next week - shameless plug, I know.

How to Add a Custom Search Gadget to Blogger part II

Today I would like to present to you the second part of my two part tutorial on how to customize a search function.  You can read about the first part here.

The great thing about this is that with just a little effort and not much code you can make a functional search box that matches your blogs design.

Lets jump right in.

Our original code for the search form should look like this.

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

The form should look like this - 

• • • • • 

How to change the "execute search" button

Using the code from above. First delete the code value="search".

Then change type="submit" to type="image". Not to be confused with type="text" found earlier in the form. Don't delete that.

Next, add your image by adding the code src="IMAGEURL.PNG" before the type="image" but after id="search-btn".

Now you'll want to align the image by adding align="top" before the id="search-btn" code but after the input code. This is not necessary but if you having alignment issues adding this could be the solution.

The form should now look like something like this -   depending on the image you used.

and your code should look like this

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="30" type="text" /> <input align="top" id="search-btn" src="IMGURL.png" type="image" /></form>

Note:
If you are in need of an image to use I have this one    and this one .

The url for the first is http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/SearchButton.png

and the url for the second is http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/search_btn.png

 for more search buttons do a quick internet search, you'll find thousands of ideas.


• • • • • 

How to change the Border and Background colors of the search form

This one is pretty easy. All you need to do is add an inline style to the search form. I've added it after the name="q" and before the size="30" codes.

Example 1 - 

In this first example I added a red dashed border by adding the following code style="border: 1px dashed red"

Example 2 - 

In this example I added a purple border and a pink background by added the following code style="border: 1px dashed #8d38c9; background:#FAAFBA;"

Example 3 - 

In this last example I added a goldenrod background by added the following code style="background:#FAAFBA;"

My completed form code for example 3 looks like this:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" style="background:#FAAFBA;" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

Here are some useful resources to help with color and border properties.

• For more information on CSS borders take a look at this tutorial by W3Schools . 
• For more information on HTML color codes take a look here at computer hope . 
• For ideas on color combinations take a look here at colorlovers web trends.  

• • • • • 

How to Change the Text Properties of the search form

To change your text properties, like changing the text color or making the text uppercase,  you again need to add an inline style to the search form.

To change the text transformation add text-transform:uppercase;.

Example 1 - 

To change the text color you need to add a color: #HTMLCODE;.

Example 2 - 

*Remember you need to add words to the search box in order for this option to work. You can learn about that from my last tutorial.

My completed search form code for the above example looks like this:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" style="text-transform:uppercase; color:#c38ec7;" size="30" type="text" value="keyword search" /> <input id="search-btn" type="submit" value="Search" /></form>

Here is a great resource on text properties from HTML help.

There you have it folks a simple, totally customizable, yet powerful search function. I hope that this tutorial is helpful. Please let me know if you have any questions I will be happy to try and help.

Happy Coding.

How to Add a Custom Search Gadget to Blogger

I can't believe that the last time michelle and I posted anything on this blog was April 25th. Seriously SO SORRY.

We're still here I promise.

Today have a two part tutorial on how to add a custom search gadget to blogger. The title should almost be a SIMPLE Custom Search Gadget for Blogger. It really is that easy to add and customize.

Having a search feature on you blog can save readers a bunch of time if they are looking for something specific or a certain topic. Plus, like I said earlier, adding one is so incredibly easy that there isn't a reason in the world you shouldn't have one; and you'll wonder why it took you so long to add it.

The easiest way to add search function is to add the blogger team designed gadget "search box".  It's a fine option if you wish to have a generic look to the search box. It says it's a custom google search but that just means you can add different variables to search; for instance you could have it search not only your blog, but google, and your blog roll. That seems to be all the customization available.

And it would look something like this.

Doesn't inspire too much creativity does it. After all you've spent countless hours making your blog look the way you want it to look. A generic search function just stands out and doesn't blend with the look and feel of your custom blog design. Wouldn't you rather it look something like this?

or this?

or maybe even this?

So here we go How to Add a Custom Search Gadget to Blogger

First things first lets add the search box to your page and then we'll discuss a few quick changes.

1. Go to Dashboard > Design > Page Elements > and select "Add a gadget" > then click the plus sign (looks like this   ) next to the HTML/Javascript.

2. Copy and paste the following code to the content box.

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

3. Save and Viola, you are done.

Now lets show you some quick ways to customize the search function.

Add words to the search box.  Currently the box is blank. add the following code value="keyword search" right after the code type="text" but before the />. You can change the text inside the quotes to whatever you want. For example you could have it say "search" "search loving life" or "enter keyword". It's whatever floats your boat, it's your search function.

Change the word in the enter button. This is easy! Find the code value="search" and again change the text inside the quotes to whatever you want. For example it could say "go" or "find". Seriously whatever.

Change the width of the search box. lets say that you want this in your sidebar but it's too long. Find the code size="30" and adjust the number up or down. A larger number will make a longer search box, a smaller number will make a shorter text box. Play around with the number to find the right feel.

I think that is all for now. Next post I'll show you how to change the background color, the border, the text and switch the search button to a picture.

If you are having trouble with the search function or have a question leave a comment or email us and we will see what we can do.

EDIT:

I was asked how to make the search box higher not wider. The best way to do that is add some style to the search form.

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="30" style="height:30px;" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

Adding a style="height:30px;" makes it look like this. 

Add a Hover Effect to Blogger Navbar - Blogger Tutorial

Have you ever noticed the blogger navbar at the top of Lovinglife?

You know this UGLY thing?

Have you ever hovered your mouse over that area (on lovinglife) and noticed that it appears and then disappears when you move your mouse away? Ever wanted to do the same thing on your blog?

It only takes a minute. Give it a try.

How to add a hover effect to blogger navbar: A Blogspot Tutorial

1. Go to your design tab in your blogger dashboard.  Click on edit HTML.

2. Scroll down and find

body {

3. Copy and add the following code just above it.

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

4. Save your template.

Viola, you are done! Now view the awesomeness of the hover effect for the blogger navbar.

If you have any questions feel free to leave a comment and I will be happy to answer them. If you apply this to your blog, I would love to see it in action. Leave a comment and post a link to your blog. 

*I don't generally suggest deleting the Blogger navbar because it is useful in Blogger SEO (Search Engine Optimization). Adding the hover effect doesn't do anything to your blogs SEO.

Instagram Sidebar Widget for Blogger

The other day I was asked about my Instagram sidebar widget that I have on my personal blog. They wanted to know where I had gotten it. Truth be told I made it. It's just a simple HTML/Javascript widget that anyone can do. I figured it would be a great idea to post a tutorial on how to make the widget. SERIOUSLY SO EASY!

First things first your going to need to have an instagram account. I'll let you figure that out.

Next you'll want to signup for Followgram.

 Followgram is a web app developed as a way to extend those Instagram's basic functions so appealing to millions of users already. At least that's what they say. It's just a way to see your instagram pictures online in a gallery setting. It's twitter for pictures. Sort of like Pinterest is twitter for creative ideas. 

Before you create the widget you'll need to pick the instagram pictures you would like to use for your widget and get the url of the picture. You can have as many pictures as you would like. I have like 8 pictures on my widget.

To find the URL - First login to followgram and get to your dashboard.

Next click on the picture you would like to use and get to that individual pictures dashboard.

Right click on the image and select view image

The picture now should be the only thing on the screen.

On this screen, in the address bar, there should be the direct link URL to the image.

The direct link URL to this Winnie the Pooh quote is

http://distilleryimage6.s3.amazonaws.com/9b878340695e11e180d51231380fcd7e_7.jpg

Copy the code and save it to a simple text editing document (notepad for PC and textedit for Mac. Don't open a complex word processing application like Microsoft Word. Just use something simple.)

Now go back to your Followgram Dashboard and follow those same steps again until you have gotten the URL's to all the pictures you would like to use. 

These are the 4 pictures I've chosen to use in this widget.




See how I have the unique URL to each image copied to my text editor.

Now it's time to start and finish building the Widget.

Copy and paste the following code into your text editor.

<img src="UNIQUE URL" alt="UNIQUE ALT" height="100%" width="100%" />

Replace UNIQUE URL with one of the URL's that you have retrieved and saved. For Web Accessibly change the UNIQUE ALT to a short description of the picture. No need to change the height or width. The 100% percentage code will automatically make the image the size of your sidebar.

I was looking at my example blog and I noticed that the 100% code renders different in different browsers. For instance on safari it stretches the photo and in google chrome the picture looks correct. I am adjusting my instructions and I think it would be more advantageous to code the image with the sidebars pixel width. 

on my example blog the side bars width is 220px. Instead of having the width and heights be 100% change it to 220px. your height and width code should look like this.

height="220px" width="220px"

For example this will be the code for the Winnie the Pooh quote.

<img src="http://distilleryimage6.s3.amazonaws.com/9b878340695e11e180d51231380fcd7e_7.jpg" alt="winnie the pooh quote" height="100%" width="100%" />

*PLEASE NOTE: DO NOT DELETE THE QUOTATION MARKS OR IT WON'T CODE RIGHT.

Here is a look at the final code for all four images.

<img src="http://distilleryimage6.s3.amazonaws.com/9b878340695e11e180d51231380fcd7e_7.jpg" alt="winnie the pooh quote" height="100%" width="100%" /><img src="http://distilleryimage9.s3.amazonaws.com/6bd510d65cc011e1b9f1123138140926_7.jpg" alt="Heber Valley" height="100%" width="100%" /><img src="http://distilleryimage3.s3.amazonaws.com/c5b3fb445b3f11e19e4a12313813ffc0_7.jpg" alt="audrey at bestbuy" height="100%" width="100%" /><img src="http://distilleryimage4.s3.amazonaws.com/3cf14ed85b3f11e19e4a12313813ffc0_7.jpg" alt="Temple Square" quote" height="100%" width="100%" />

Finally create a new sidebar gadget. Select the HTML/Javascript widget gadget and add YOUR final code to the widget gadget. I suggest building the code in the text editor and then just copy/pasting it in the HTML/Javascript gadget.

Viola! You are done!


*ONE FINAL NOTE: This is not an automatically updating widget. If you want to change the images to more current pictures you will have to do this all over again. But once you've done it a few times you'll be a pro.

To see what the widget looks like with these 4 images you can see it on my example blog. To just see the widget with other images you can view it on my personal blog.

If you have any questions on how to do this please feel free to leave a comment and I will be happy to answer your question. And if you apply this to your blog I would love to see it in action. Leave a comment and post a link. 

I'll be posting a tutorial on how to add the view my gallery link to your blog soon.

Two Little Chefs Blog Redesign

Kelly, one of the co-writers for the blog Two Little Chefs is an old friend of ours and best friends with our older sister Katherine. A while ago I asked Kelly if she would be interested in a free redesign of her blog and she graciously agreed to us designing the blog.

Two Little Chefs is the first non-family site that I have ever ventured to create. I was really excited about the idea of doing something for an actual client. Kelly thanks again for being willing to be my first client and thanks for the wonderful praise you made about us.

It took us a few weeks to finish. Mainly, we don't have all the time in the world to devote to creating our free designs, but we attempted the best we could to have a quick turn around.

One of the things I love about the blogs new design is that it's fully customizable for Kelly and Caroline. Everything, other than the header, is created with HTML and CSS. If in 2-3 months they decide to add a new widget to the side bar, they simply just have to create the widget and the HTML and CSS take care of making it look like all the rest. If they decide to add another page to the site. BOOM! Done! No need to contact me to create the page or create an image file for the navigation bar.

Lets take a look at this blog design, shall we?

Michelle handled the header. Which I personally think turned out great.

And I handled the sites design.

We're in the final stages of the design, just adding a few tweaks and what not, but it's basically done.

Go over and take a look at their amazing cooking blog. They have hundreds of recipes that they have tried and tested and every single one looks absolutely delicious. I've tried my hand at one or two...but I'm not much of a chef.

Delete "Showing Posts with label..." message in Blogger Tutorial

Today's blogger tutorial is on how to get rid of the "Showing posts with label..." message that appears at the top of your blogger blog when someone is looking at your labels. (pictured below)

I don't know if it is something that bothers other people but it's something that I have never liked. I really can't quite put my finger on the reason.

It is a really simple HTML fix that should only take about 2 minutes to do.

• First, you're going to want to log into your dashboard, click on the design tab and then Edit HTML.

*NOTE: Before you do any thing that is going to mess with your template - Download and Save your template....you don't want to ruin your blog if you make a mistake. I can not stress that information enough.

• Next, you will check the box that says Expand Widget Template.

• Hit ctrl F for the find function and you're going to want to find the following line of code.

div class='status-msg-wrap'

• Then delete the following 10 lines of HTML code. Make sure you get the 3 </div> lines at the end of the code otherwise your template editor with give you an error message.

• Now save your template and then go test your labels.  

It worked for Loving Life Designs Blog, SEE, it should work for yours.

Happy Coding.

How to Create an Automatic Fading Slideshow in Blogger Part 2

*UPDATE - February 27th, 2013: Since this tutorial has been having so many problems I have created a new tutorial with a better slideshow method. Check it out. 

*UPDATE - September 22nd, 2012 @11:40PM: I found the problem to the static image that was talked about in the comments. The unique IDs in the first container "slideshow" and "slideshow background" got switch. I've made the correction. If the static image continues to be a problem please let me know. 

*UPDATE - September 22nd, 2012 @11:00PM: I've had a few comments about how this slideshow doesn't work. I'll see what I can do about fixing the problem. I am sorry for the trouble and the inconvenience. 

Today I am finishing up my post on how to create a fading photo slide show in blogger. An example of the slide show can be seen here.

If you missed my previous post on this subject you can catch-up here.

Last time I focused on prepping the slide show. This time we'll be learning how to place the slide show on the blog. 

Like I said in my last post. I found the majority of my information from this site.  They do a really great job on teaching you how to create the slide show but there is a lot of information and I wanted to make it "easy" for non HTMLers to use the slide show. Plus they wrote the code for a generic website and I wanted to focus it for blogspot users, sorry wordspress.  However, we'll be using the sites provided javascript to make the slide show run.

The slide show is split into 3 different parts.

1. A container for the slideshow
2. Javascript to make the slideshow function
3. and another container that runs the slide show.

For our container we'll be using a <div> tag.  Basically a <div> tag defines a section in the HTML document. For our purposes the <div> tag will act as our container.

Before we can create our container we must first give our slide show a home on the blog. The slide shows home will be a custom widget that we create. To create the widget go to your blog setting and click on the design tab and then the page elements link.

After that you are going to want to click on the add a page element link.

In the window that appears scroll down til you find the HTML/javascript widget.

The configure widget window is where we will be building our slide show widget. Don't give the widget a name otherwise text will appear above the slideshow....unless you want that. You can say something like "Our trip to Disney"  or "Our Family Portraits." It's whatever you want. It's your widget.

Now that we have given our widget a home lets get to coding.

First thing we need to do is create the container for the slideshow and in this container we need to specify our slide shows background image, assign the background image a unique id, assign our container a unique id, specify our background images url, and define the dimensions of the slide show. 

My containers unique id is slideshow and my background images unique id is slideshowbackground. This is important for later and if you want to have more than one slide show on your blog. If you want more than one slide show you'll have to change the unique id's of the second slide show element.

You're going to want to type the following code into the content box.

<div id="slideshowbackground><img border="0" div="div" gt="gt" height="your height" id="slideshow" src="your images URL" width="your width" />

Like I explained above I've assigned my container a unique id and my background image a unique id. I've also specified my containers dimensions within this <div> tag. Those dimensions should match the dimensions of your images. Your width= should reflect your images width and your height= should reflect your images height. You'll also need to define your images URL source.

Your code should look similar to this

<div id="slideshowbackground"> <img border="0" height="234" id="slideshow" src="http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg" width="900" /></div>

I created 3 images that were 900px wide and 234 px high. So I have appropriatly placed those numbers in the code. My source images url is http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg.

DON'T PRESS SAVE & CLOSE THE CONFIGURE BOX WE ARE NOT DONE YET!

Just as a refresher here are my images once more. 

Following along okay?

Next thing we need to do is create the Javascript that defines the slide shows functions. This is easy peasy simply copy and paste the following after our containers division tags </div> end code.

<script type="text/javascript">

// Browser Slide-Show script. With image cross fade effect for those browsers

// that support it.

// Script copyright (C) 2004-2008 www.cryer.co.uk.

// Script is free to use provided this copyright header is included.

var FadeDurationMS=1000;

function SetOpacity(object,opacityPct)

{

  // IE.

  object.style.filter = 'alpha(opacity=' + opacityPct + ')';

  // Old mozilla and firefox

  object.style.MozOpacity = opacityPct/100;

  // Everything else.

  object.style.opacity = opacityPct/100;

}

function ChangeOpacity(id,msDuration,msStart,fromO,toO)

{

  var element=document.getElementById(id);

  var msNow = (new Date()).getTime();

  var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;

  if (opacity>=100)

  {

    SetOpacity(element,100);

    element.timer = undefined;

  }

  else if (opacity<=0)

  {

    SetOpacity(element,0);

    element.timer = undefined;

  }

  else 

  {

    SetOpacity(element,opacity);

    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);

  }

}

function FadeInImage(foregroundID,newImage,backgroundID)

{

  var foreground=document.getElementById(foregroundID);

  if (foreground.timer) window.clearTimeout(foreground.timer);

  if (backgroundID)

  {

    var background=document.getElementById(backgroundID);

    if (background)

    {

      if (background.src)

      {

        foreground.src = background.src; 

        SetOpacity(foreground,100);

      }

      background.src = newImage;

      background.style.backgroundImage = 'url(' + newImage + ')';

      background.style.backgroundRepeat = 'no-repeat';

      var startMS = (new Date()).getTime();

      foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);

    }

  } else {

    foreground.src = newImage;

  }

}

var slideCache = new Array();

function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)

{

  var imageSeparator = imageFiles.indexOf(";");

  var nextImage = imageFiles.substring(0,imageSeparator);

  FadeInImage(pictureID,nextImage,backgroundID);

  var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage;

  setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",displaySecs*1000);

  // Cache the next image to improve performance.

  imageSeparator = futureImages.indexOf(";");

  nextImage = futureImages.substring(0,imageSeparator);

  if (slideCache[nextImage] == null)

  {

    slideCache[nextImage] = new Image;

    slideCache[nextImage].src = nextImage;

  }

}

</script>

Make sure you copy the entire thing. It's a long code.

The last thing we need to do is create a container that runs the slide show and that defines the images that we want to use for the slide show.

Paste the following code into your configuration box. After the javascripts end code </script>

<script type="text/javascript"> RunSlideShow("slideshowbackground","slideshow","your list of images",5); </script>

In place of your list of images you're going to list the direct link url of all your images. My three urls are

1. http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg
2. http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow2-1.jpg
3. http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow-1.jpg

you'll list them within parenthesis separated ONLY by a comma. My direct link list should look like this - "http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg, http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow2-1.jpg, http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow-1.jpg"


REMEMBER - you need to list your background image first. If you don't the slide show will do crazy things. I totally learned that the hard way.

If you notice in our slide show run container we have listed the unique id's of our slide show and slide show background. If you want to have multiple slide shows you're going to want to change the unique id's in your slide shows container div and in your run container div. I don't know if you will have to repeat the javascript I haven't tried it yet. You HTML adventures try it and let me know.

Your run slide container division code should look like this

<script type="text/javascript"> RunSlideShow("slideshow","slideshowbackground","http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg; http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow2-1.jpg; http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow-1.jpg",5); </script>

Now you can close the configure box and admire your coding work.

Happy Coding.

Please let me know if you are having troubles. This is my first time creating a tutorial and I want to make it easy to read and follow. 

Incase you need to make sure you've placed everything correctly, below is a final HTML code of the side shows configure box.

<div id="slideshowbackground"> <img border="0" src="http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg" width="900" height="234" id="slideshow" />
</div> 

<script type="text/javascript"> // Browser Slide-Show script. With image cross fade effect for those browsers // that support it. // Script copyright (C) 2004-2008 www.cryer.co.uk. // Script is free to use provided this copyright header is included. var FadeDurationMS=1000; function SetOpacity(object,opacityPct) { // IE. object.style.filter = 'alpha(opacity=' + opacityPct + ')'; // Old mozilla and firefox object.style.MozOpacity = opacityPct/100; // Everything else. object.style.opacity = opacityPct/100; } function ChangeOpacity(id,msDuration,msStart,fromO,toO) { var element=document.getElementById(id); var msNow = (new Date()).getTime(); var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration; if (opacity>=100) { SetOpacity(element,100); element.timer = undefined; } else if (opacity<=0) { SetOpacity(element,0); element.timer = undefined; } else { SetOpacity(element,opacity); element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10); } } function FadeInImage(foregroundID,newImage,backgroundID) { var foreground=document.getElementById(foregroundID); if (foreground.timer) window.clearTimeout(foreground.timer); if (backgroundID) { var background=document.getElementById(backgroundID); if (background) { if (background.src) { foreground.src = background.src; SetOpacity(foreground,100); } background.src = newImage; background.style.backgroundImage = 'url(' + newImage + ')'; background.style.backgroundRepeat = 'no-repeat'; var startMS = (new Date()).getTime(); foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10); } } else { foreground.src = newImage; } } var slideCache = new Array(); function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs) { var imageSeparator = imageFiles.indexOf(";"); var nextImage = imageFiles.substring(0,imageSeparator); FadeInImage(pictureID,nextImage,backgroundID); var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage; setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",displaySecs*1000); // Cache the next image to improve performance. imageSeparator = futureImages.indexOf(";"); nextImage = futureImages.substring(0,imageSeparator); if (slideCache[nextImage] == null) { slideCache[nextImage] = new Image; slideCache[nextImage].src = nextImage; } } </script> 

<script type="text/javascript"> RunSlideShow("slideshow","slideshowbackground","http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg; http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow2-1.jpg; http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow-1.jpg",5); </script>

How to Create an Automatic Fading Slideshow in Blogger Part 1

Today I taught myself how to create a fading photo sideshow for blogger.

To see a working example of the slide show click on the image below.

At first I thought it was going to be a daunting task but once I started reading about it, researching it and examining HTML code I found out it was pretty straight forward and really easy to do.

I found the majority of my information from this site.  They do a really great job on teaching you how to create the slide show but there is a lot of information and I wanted to make it "easy" for non HTMLers to use the slide show. Plus they wrote the code for a generic website and I wanted to focus it for blogspot users, sorry wordspress.  However, we'll be using the sites provided javascript to make the slide show run.

The slide show seems to be split up into 3 different parts. A container for the slide show (we'll be using a simple div tag to define the container) The javascript to make make the slide show function and a container that "runs" the slideshow. More on that later. 

Today we will be focusing on prepping the slideshow.

In my example slide show I placed it below my blogs header but above my posts and sidebar. You can easily make this slide show directly above your post or have it be part of your sidebar, you'll just have to prep a little differently than you would a slide show directly below the header.

First things first you want to figure out how wide your intended area is.

If you're planning on placing it below the header than your going to want to find out the dimensions of the outer wrapper. If you are planning on placing it directly above your posts only, then you're going to want to find the dimensions of your main wrapper and if you are planning to place this somewhere in your side bar, you're going to want to find the dimensions of your sidebar wrapper.

In your blogger setting click on your design tab and then click on the edit HTML link.

Next your going to want to locate the following line of HTML code.

#outer-wrapper {

If you intend to place the slide show above your posts, beside your sidebar, locate the following line of HTML code.

#main-wrapper {

If you intend to place this somewhere in your sidebar, locate the following line of HTML code.

#sidebar-wrapper {

Make note of the width of your intended areas wrapper.  This width will be the width of your image collage.  If you don't make all your images the same size the slide show won't work correctly and will "jitter" as it fades between the photos. *note: If your using one of the new blogger templates your going to want to go into template designer and find out your blogs widths from the adjust widths tab. 

Now comes the fun part. Open your favorite photo editing software and create a few collages to use for your slide show. The following images are the images that I created for my simple slideshow. (I repeated the same three images to make it easier, and plus I didn't want to search my computer for the "perfect images" forever, I'm just lazy like that, plus I like these pictures I took when I went to Italy) I only created 3 different collages but you can have as many collages as you would like.

*NOTE: My outer wrappers pixel width is 900px and so I created these images at 900px wide and 243px high.

Once you've created your image collages you're going to want to upload them to a image hosting site. I used photobucket to host my images.

I guess that should keep you busy for the time being. Enjoy making those image collages. It should be loads of fun. Next installment will be on how to create the slide show.

Have fun and take luck.