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
This one is quiet interesting but (once again) I'm too illiterate to follow along! LOL!
ReplyDeleteThis 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. :)
ReplyDeleteBetter 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.
ReplyDeleteThis 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