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

Scrap your sidebar titles

Request by: Faye at Angels that Scrap

and Cara at Sweet Tomato Designs

I reviewed a lot of sites just to see the different sidebar titles, and I found some titles to be linked, and others not. Just remember the gap YOU see as the blog creator/owner, is not what others see. If you want to see how your blog looks to others, sign out of your blog, and then look at it.

Step 1 - Create your sidebar title.

The final dimensions for a 2-column minima blog are

220 pixels width (height is up to you)

96 Resolution

I scrap mine at 2200 pixels and resize for clarity.

Step 2 – Upload your image.

Upload your image to your favorite photo hosting site. I like Photobucket and Scrapbook Flair. Get the DIRECT LINK code, and save it for later.

Step 3 – Add your gadget.

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

A window will popup with various choices, select PICTURE. You will then add your web address (DIRECT LINK) from STEP 2.

Within that window, you may add a title (which will be displayed above your title, so not recommended) and a link if you like. Adding a link would be great if you want to add a link to your CT members’ blog, or your store, etc.

Step 4 – Save and view blog.

You will need to move your gadget around to be in the proper place. You can add a title to note what they are for placement, and then remove the title after you’ve placed your sidebar title. If you want to scrap your FOLLOWERS then the gadget needs to be placed above your followers.

Now you have side bar titles.

Many thanks to Patchas at Scraps of Sunshine for suggesting the Word Documents for the instructions! Click HERE for Word Document Instructions.

Here’s to happy scrapping, and

Hugs from the heart,

Jeanette