Easy Custom Blogs: Marquee

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

Image 2 – Jackie’s Home Page

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:

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.

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.

To add more images/websites add this code after the <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:

Click HERE for Word Document Instructions.

Here’s to happy scrapping, and

Hugs from the heart,

Jeanette

Monday, January 5, 2009

Let's ROLL!

Let's ROLL! Making a blog MARQUEE!

I've just learned how to make the rolling text (it's called a marquee) and it's soooooooo simple. It took me 3 hours longer to write the post than to create the marquee....so hopefully, it's HELPFUL!

Step 1 - Choose what type of marquee you'd like:
Look at the bottom of this post to determine what type of marquee you'd like. You have a choice of TEXT or IMAGE. There is a third option that allows for both text and images in the marquee, but with the use of digital scrapping, and the details required to do both, I thought the first two options were sufficient. My marquee is an IMAGE MARQUEE, as shown in the second example.

Step 2 - Create and upload your image
Create an image (GIF, JPG or PNG). My IMAGE MARQUEE is in PNG format, because I prefer the transparent background. Make sure your images are no larger than the following size options. When I am creating my images I always begin with a much larger image (to ratio) then I resize it for uploading.

Image sizes:
For your marquee below your header
660 x 50 pixels
For your marquee in your post column (that's where mine is)
400 x 50 pixels
For your marquee in the side column
220 x 50 pixels

Step 3 - Get the CodeFor the TEXT ONLY code, you will not need to create or upload anything. Isn't that nice for a change? For the IMAGE ONLY code, you will need to create, and upload your image to your favorite photo hosting site and get the direct link or URL to make the code.

To install the MARQUEE, you will need to go to CUSTOMIZE/LAYOUT/PAGE ELEMENT/ADD A GADGET. When the pop up screen appears, select HTML/Java Script. Do not put a title for your marquee, just put the MARQUEE code you selected from below in the block and click save. Then view your blog.

This image is being provided because the full codes for the MARQUEE cannot be posted on Blogger.

Because of Blogger's silliness, I cannot post these codes in full. You should have seen my runaway text. YIKES-A-RAMA! Instead, you will need to type the code from the sample image, or email me and I will send you the codes.

TROUBLESHOOTING UPDATE (1-7-2009): If you are having a difficult time with the code, just email by clicking in the Contact Me tab at the top of the blog for the codes. I will email them to you, and then you can copy and paste them.

SPECIAL NOTES:

1. On the TEXT MARQUEE, you can adjust the size of the font, and change the color by typing them into the code.

2. On the IMAGE MARQUEE, you MUST adjust the size of the image (the numbers are given for the main column post size). The numbers are in pixels.

As always, if you have any questions, please feel free to contact me. When writing, please include your blog address. I love to visit blogs to celebrate your successes with you!

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

TEXT MARQUEE SAMPLE 1:

Welcome to Easy Custom Blogs ~ Come Scrap Your Blog with Me!

IMAGE MARQUEE SAMPLE 2:

Easy Custom Blogs

Type in key words and search my blog here:

Sunday, June 21, 2009

Scrolling sidebar with links

Monday, January 5, 2009

Let's ROLL!

ONE SIZE TEMPLATE

Blog Archive