MOUSEOVER

MOUSEOVER ~ THE EASY WAY!

I am always on the look out for "blog improvement," and one of the ideas I have been working on over the last 6 weeks, is the idea of the buttons or tabs looking different when you scroll over them to indicate interaction. I was intrigued by Vin's article on mouseover found here. I really didn't understand those directions. I wanted to discover if I could use mouseover to create the interaction I needed on my navigational tabs! I did it! Try it for yourself. If you scroll over my nav tabs at the top of the blog, you will see the tabs change color, it is more interactive.

I found the coolest site today: It's HTML Basix and it has a mouseover image generator! WHOOTY WHOO! I'm so excited!!! I made the photo widget of my son right above this post. If you scroll over it you will see what happens teens get crazy...LOL!

To create your own mouseover:
Step 1 - Scrap your images
Scrap two images and upload them to HTML Basix. Generate the code. Save it.

Step 2 - Post the Code
Post the code as a widget. Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET and select a place to post (main column or side bar). I selected main post. When you click on the popup choose HTML/Java Script. When the popup window opens add the code you copied from Step 1. Select SAVE.

***Please note, you will need to delete the instructions in the code for a widget:

Delete these two lines from the code generated:
<!-- STEP ONE: Insert this code into the HEAD section of your HTML document
-->
and
<!-- STEP TWO: Insert this code into the BODY of your HTML document -->

Once these lines are deleted you can put into your HTML/Java Script box.

CAUTION:
If you use more than 5 images, let's say you made tabs (5 images) and you wanted to make a widget (6th mouseover image), then you need to change the number. The code generator just starts the numbers at 1 again. You can see how this could be a problem, if you're not careful! For example, my blog header took 5 images, so when I created the mouseover widget, I named all the images 6 instead of 1 which is what was automatically generated. As always, if you have any questions, please feel free to ask!

Navigational Tabs-Step 2

First, you should have completed Step 1. You will find instructions here.
Then you will need to create your tabs and upload then to your favorite photo hosting site (make sure that the size does not get changed when you upload to the site). I am including a sample tab for you to recolor to meet your specific needs. This tab size works perfectly to create 6 tabs with the sample blog header that will also be provided. Just scroll your mouse over the tab, and then right click, and select SAVE AS and save your tab template.

The 6-tab blog header has a measurement of 601 x 249 pxls. Here is the sample for it. This blog header is not sized to scale. Make sure you use the measurements given.

You will not be making the tabs and the header together. Each tab is a separate image, as well as the header.

Second, make a planning sheet to keep all the information simple. I use Word to create my planner. I listed each tab I wanted and put in the same code for each tab. The code will change with the TARGET URL and the IMAGE you want to post. I added the blog header at the end (because it will be at the end of the code). Here's what my planning sheet looks like:

Here is the code you will use for EACH TAB, and the Blog Header as well:

<a href="TARGET URL GOES HERE" target="_blank"><img border="0" src="DIRECT LINK TO PHOTO OF TAB HERE"/></a>

When you finish, your planning sheet will have each tab (with TARGET URL and PHOTO IMAGE LINK). Then you will delete all the labels on your planning sheet, and make sure there are NO SPACES BETWEEN CODES. Now, the code is naturally long, so there will be some spaces WITHIN the code, and you cannot delete that.

Here's a sample of what it looks like AS YOU DELETE THE LABELS, and REMOVE SPACES.

Then your final document will have all labels and spaces removed.

I save each word document (the planning document and the finished document).

Third, you will need to click on your header in the page elements section, and you will remove it. Don't get nervous, you can always add a header back if you completed the instructions in STEP 1 from yesterday. ***HINT: If your header will not offer an option to remove, then you haven't completed the steps from yesterday.

Fourth, you will go to your newly created 'Add a Gadget' in the header section of your PAGE ELEMENTS. Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET (in the header section). Select HTML/JAVA SCRIPT, when the popup comes up PASTE the code you created in planning document.

Then you will click SAVE and VIEW BLOG. THEN YOU WILL HAVE TABS. You can also get very creative! I was thinking of other items to use for my tabs, and I remembered these awesome glass pieces I got from Digitreats as a freebie a few months ago. Think outside the "tab." As long as you have the size right, then your code should work. Last night as I was changing my blog "dress" I initially made the tabs too big. FORTUNATELY, I saved my code from and just put it back, while I made all the adjustments. YES, I had to resize and re-upload every tab photo, and then make the changes in my planning document, and copy/paste it. It is work, but well worth the result. In addition, I am only changing my blog once a month...LOL!

Here's to more happy scrapping, and
Hugs from the heart,

Jeanette

Navigational Tabs-Step 1

Step 1 - As always, back up your blog template. You will find instructions here! You will have to create the option of adding HTML/Java Script to your LAYOUT in the PAGE ELEMENTS SECTION in the HEADER SECTION right below the NAVBAR yourself. The first illustration shows a blog without a HTML/Java Script as an option in the HEADER section. This is a screen shot of most standard blogs.

Now I will show you the screen shot of Easy Custom Blogs. You can easily see that I have additional "Add a Gadget" options on my Page Elements. Actually, I have two additional "Add A Gadget," and I'm not sure how I did that, but you only need one, and two is okay as well...LOL! Can you see the difference?

Now, how did I do that? When you make the following changes on your code, there is no option to preview to see if you did it correctly, so I kindly ask again, did you back up your template? If yes, then you may proceed:

Go to Customize/LAYOUT/Edit HTML. When you scroll to almost the bottom of your HTML code you will see a section regarding the header. I have highlighted the part of the code you will look for in the screen shot below, and you will see the changes we will make circled in hot pink!
***Just a HINT! On some of my blogs where I had made a lot of changes and posts, there was an additional set of 'showaddelement' and 'locked' so I did those sections as well. This was before the HEADER section ended.

Now you are going to change 'showaddelement' to YES instead of the standard NO. Then you are going to change the 'locked' to FALSE instead of the standard TRUE.
See the screen shot below to see the changes (they are highlighted in hot pink).

The changes will NOT show on your blog, so you will select SAVE TEMPLATE. Then you should be able to see the "Add a Gadget" on your PAGE ELEMENTS section. When you see this, you will be able to make a lot of changes, and add HTML/Java script to your header.

I will make another post for Step 2 to keep everything simple on creating the tabs, and the HTML/Java Script code you will add as your header.

FOR THOSE TRYING TO DELETE A GIF FILE (ANIMATED) HEADER:
If you have added a GIF file to your header and cannot delete it, these instructions are for you as well! Just follow the directions as posted above, including instructions for backing up your template. When you have completed the instructions and you have successfully created an "Add a Gadget" element to your PAGE ELEMENTS, you can click on your HEADER and REMOVE IT. Then click on "Add a Gadget," and then you can select PAGE HEADER in the list of choices. The nice benefit of creating an "Add a Gadget" in the header is that you can continue to use animation in your header and you should only have to do this step one time.

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette

Navigational Tabs - I DID IT!

I have tried for the last several weeks to learn how to make the tabs seen in my header. There were lessons on CSS and HTML, and ABC's and 123's LOL! However, I could not make sense of any of that. I will try to provide instructions soon, that is when I can figure out the simplest way to explain it. Basically I added a gadget (has to be in the header section-which is the first lesson I will share) giving each tab a URL. I will try to give more details as I sort through how I created this header with tabs, but needless to say, I am very excited about how I did it, and that it works. At first I was stuck with the tabs that the tutorials offered, not necessarily the colors I wanted or anything. As I practiced, and through trial and error, I figured it out.

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette