Type in key words and search my blog here:

Loading

Sunday, June 21, 2009

Scrolling sidebar with links

SIDEBAR LINKED IMAGES WITHIN A VERTICAL SCROLL

Request by: Cara at Sweet Tomato Designs (requested a CT scroll with links) and

Jackie at Scap U (requested a vertical scroll)

Step 1 - Create each image you want in your sidebar scroll.

The final dimensions for a 2-column minima blog are

220 pixels width (height is up to you, but should not exceed 220 pixels)

96 Resolution

I scrap mine at 2200 pixels and resize for clarity.

***IMPORTANT – For quality make sure all your images are the same size.

Step 2 - Upload your image.

Upload your image to your favorite photo hosting site. I like Photobucket and Scrapbook Flair. Get the DIRECT LINK codes, and place them on your planning document.

Step 3 – Create a planning document.

In a word document write down each of the images you would like to be included in your scroll and list the URL (web address) with it. When you get your DIRECT IMAGE LINK you will add that too. Here’s a sample of a planning document:

Image 1 – Cara’s Home Page

<a href="http://sweettomatodesigns.blogspot.com/" target="_blank"><img border="0" src="Cara’s image I scrapped and uploaded website goes here"/></a>

Image 2 – Jackie’s Home Page

<a href="http://scrapu.blogspot.com/" target="_blank"><img border="0" src="Jackie’s image I scrapped and uploaded website goes here"/></a>

Continue making your planning document. When you are finished, you can delete all the spaces and words and leave just the code so it will be similar to our marquee code below. You will then copy and paste this code into the marquee code to complete your sidebar vertical scroll.

Step 3 – Make your code on your planning document.

Your final code will look like this:

<marquee behavior="scroll" direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="5"><a href="URL #1" target="_blank"><img border="0" src="DIRECT IMAGE LINK#1"/></a><a href="URL #2" target="_blank"><img border="0" src="DIRECT IMAGE LINK#2"/></a><a href="URL #3" target="_blank"><img border="0" src="DIRECT IMAGE LINK#3"/></a><a href="URL #4" target="_blank"><img border="0" src="DIRECT IMAGE LINK#4"/></a></marquee>

Here is my ACTUAL CODE that I have on my test blog (DO NOT COPY THIS ONE) for those of you that are visual learners. You can see this code in action by clicking HERE.

<marquee behavior="scroll" direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"><a href="http://easycustomblogs.blogspot.com/" target="_blank"><img border="0" src=" http://i647.photobucket.com/albums/uu195/MemoryKeepersphotos/BLOGSCROLL1.png"/></a><a href="http://horseheavenstables.blogspot.com/" target="_blank"><img border="0" src="http://i647.photobucket.com/albums/uu195/MemoryKeepersphotos/BLOGSCROLL4.jpg"/></a><a href="http://www.connectionchurch.us/" target="_blank"><img border="0" src="http://i647.photobucket.com/albums/uu195/MemoryKeepersphotos/BLOGSCROLL5.png"/></a><a href="http://fayettecountydrama.blogspot.com/" target="_blank"><img border="0" src=" http://i647.photobucket.com/albums/uu195/MemoryKeepersphotos/BLOGSCROLL3.jpg"/></a></marquee>

Step 4 – Add your code by adding a gadget.

Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET.

Select the ADD A GADGET from your sidebar. A window will popup with various choices, select HTML JAVA SCRIPT. You will then add your FINAL CODE by inserting information into the code below. The number on the code is the speed. The higher the number the faster the scroll rolls. URL is the web address! IMAGE LINK is where you uploaded your image.

<marquee behavior="scroll" direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="5"><a href="URL #1" target="_blank"><img border="0" src="DIRECT IMAGE LINK#1"/></a><a href="URL #2" target="_blank"><img border="0" src="DIRECT IMAGE LINK#2"/></a><a href="URL #3" target="_blank"><img border="0" src="DIRECT IMAGE LINK#3"/></a><a href="URL #4" target="_blank"><img border="0" src="DIRECT IMAGE LINK#4"/></a></marquee>

To add more images/websites add this code after the <a>

<a href="URL" target="_blank"><img border="0" src="DIRECT IMAGE LINK"/></a>

To subtract number of images/websites delete the portion you do not need. Always delete the code beginning with the <a href and ending with the <a>.

Step 5 – Save and view blog.

If you do not like the action of your scroll, then you can just remove it by clicking on the gadget and selecting REMOVE.

Now you have scrolling sidebar websites with images.

TO MAKE THE SCROLL WITH TEXT ONLY:

<marquee behavior="scroll" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">TEXT FOR #1</a> <a href="URL#2">TEXT FOR#2</a> <a href="URL#3">TEXT FOR #3</a> </marquee>

Click HERE for Word Document Instructions.

Here’s to happy scrapping, and

Hugs from the heart,

Jeanette

4 comments:

  1. This one is quiet interesting but (once again) I'm too illiterate to follow along! LOL!

    ReplyDelete
  2. This is so PERFECT, Jeanette. I'm having each of my scrap a picture of themselves with the same kit (and same size) and then I can scroll them with links to their blogs. So amazingly cool. I'm going to work on scrapping my side bar titles next week, too. :)

    ReplyDelete
  3. Better late than never, the scroll is up and it looks fantastic...and it worked on the FIRST try. :) Thanks so much...the word instructions were very helpful.

    ReplyDelete
  4. This worked great on my vintagecatnip blog, thank you! Would you happen to know how to center it in the sidebar (adding center code didn't work)?

    ReplyDelete

Thanks for taking time to leave a comment. I would love for you to include your blog address

Just copy and paste the following in your comments and add your blog address and blog name, and you will easily post it in your comments. Don't leave any spaces!

<a href="YOUR BLOG ADDRESS HERE/">YOUR BLOG NAME HERE</a>

-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-

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

ONE SIZE TEMPLATE

ONE SIZE TEMPLATE
Blog Background Template