Sunday, 3 January 2010

SCROLLING MARQUEES

I get the cutest scrapbooking fonts at Free Scrapbook Fonts! kevinandamanda.com/fonts
























This is a fun one to do - instead of having every blog button in a separate box, straggling down your sidebars, you can neaten them up into one scrolling marquee. 

You can adjust this so the box scrolls upwards or down, and also adjust the speed and the width of the pictures. This is great for grab buttons, blog awards, favourite sites - and the buttons are clickable too!

First, go to Layouts and add an html/javascript box - this is where you will put your button codes.

Next, construct your scrolling marquee. 

Most blogs will have a sidebar between 180px and 220px wide, so you don't want the marquee to be wider than that or it will stick out into the blog background.

You also don't want the marquee to be too long - as it will take forever for the pix to roll round, and you'll have a lot of blank space. So, if you have a lot of buttons to add, you might want to make it 400px in height. If you only have a few, maybe 250px high will be enough. You can always adjust this later.





With the html/javascript box open, put your title in the top section.










Copy&paste this code into the top of actual box.

<center><div class="textwidget"><marquee direction="down" width="200" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()" height="300" align="center">

This is the start of the script instruction.

Give yourself a few spaces, then copy and paste this code at the bottom of the box. This is the end of the script instruction - all your links will be sandwiched between them.

<marquee></div></center>

Button codes will go in between these two codes, like this typical grab button code:

<a href="http://1stfloorflatblogology.blogspot.com/"><img border="0" src="http://i385.photobucket.com/albums/oo299/susiejefferson/b2d7dab3.jpg"/></a>

Just keep adding as many buttons as you like. However, each button code you add MUST start with <a href= and end with </a> or it won't work.



If the buttons are too close together when scrolling, separate each block of code with either of the codes shown in the pix.




TROUBLESHOOTING

Making a scrolling marquee is easy if your links are grab buttons, because they will have all the coding for the button done already.

But what happens if the buttons are only pictures - without any code? Where you inserted a picture widget and put the url in the little box above, and entered the picture from your computer?

Don't panic - there IS a way...

Construct your marquee in the usual way, inserting an html/javascript box into your sidebar. Put the code in at the top and the bottom, leaving a big space in between where you'll put the button codes.

Click to edit the picture link, which will open the link box for you as you see here.

Copy the url and put this in the first part of the coding (the address of the link) starting with:
<a href="http and finishing with ">

Right-click on the picture and click Copy Link Location, then paste into the second part of the code, beginning src="http and ending with /a> (the source of the picture or object). That's it!

SPACING PROBLEMS

Normally, putting a space between each picture is easy (see the codes in the illustrations).

This works beautifully with blog buttons, as they all tend to be made pretty much the same size (a little smaller than the average sidebar, ie: 180px - 220px, depending on the template). But what if you are putting odd sizes in your marquee? Some very narrow... and you want to put some text or a caption underneath (say, blog awards or cards and tags)...

Then your spacing is all over the place, as you can see. Making a space doesn't always make the caption go underneath, if there is room for it to go to the side.

This is when you need to put in a line break.

For a very narrow piece followed by a wide one, you might want to put in a break after the picture, then two (or more) breaks before the next section of coding.



THERE'S NO URL!

Another problem you might find, when transferring your picture into a marquee from a picture widget - is that you loaded it from your computer at home, and therefore do not have a url.

Again, there is a way around this. This time, when entering the first part of the code - just leave the address bit blank: the bit that fits between the two " marks. Just don't leave a space in between them.

Enter the picture by right-clicking the Copy Link Location into the second section, as before. The code will look like this:

<a href=""><img border="0" src="http://i385.photobucket.com/albums/oo299/susiejefferson/b2d7dab3.jpg"/></a>

I'VE GOT TONS OF BUTTONS TO ADD

You have a lot of buttons to add - it's going to take forever! Well, it is tedious and you do have to pay attention, as a space between a section of code, like this: "  http will break the code and stop it working.

But you can speed things up by writing one entry in full, with spaces or breaks where you want them, then copy&paste this several times. Then go back in and amend the urls to the addresses you need.

Have fun! 

post signature
your photo name

9 comments:

  1. How sweet of you! I started and stopped on my blog and website redo until my son goes back to school. It was just getting too crazy. This sounds like something I may use. Can't thank you enough for sharing.

    ReplyDelete
  2. Go for it! It's fun, it works (you can have several dotted about your sidebars) and it doesn't make your eyes go Woo Woo like too many blinkies.

    Any probs, just scream...

    ReplyDelete
  3. Wow! This is so great - can't wait til I get home tonight and give it a try. Thank you so much!! Dru

    ReplyDelete
  4. Susie,
    This is yet another marvelous post!!!! I love how the important parts are highlighted with an arrow & has "thought" bubble" attached with little comments!!! Its Genius & it makes your tutorial soooo easy to follow!
    I was looking for ways to do this on my makeup blog & came up with colorsplash. I love your method also. How do you do it?

    Thanks again,
    Nickie

    ReplyDelete
  5. Awesome!
    Thanks Susie!
    I'll give it a try soon.
    You're always so generous to teach us these tricks to bring our blogs up to speed - and you make it easy!! Normally I'm just plain ditzy with anything involving html..
    My blogs definitely need a facelift, I've been out of pocket lately and neglecting them.
    Look for an email in the next couple days!
    Much love,
    Celia

    ReplyDelete
  6. ... and I meant to tell you how much I love this background! You're very talented!
    XO

    ReplyDelete
  7. I DID IT!! With your help, I DID IT!.. But I do have a question.. Many people's buttons started and ended with something about "center"??.. Can I not enter those as written??.. Next big giant leap.. a new header, or a new background (0; or BOTH!! Thanks again, Susie! ((Big Hugs)) ~tina

    ReplyDelete
  8. Yaaaay, Tina! I took a look, and it looks great - perfect, in fact.

    RE your query: where the buttons start/end as 'center' it's so that any particular button will position itself in the centre of the sidebar. Some designers put this into the code, some don't. It all depends whether people like their buttons all down the centre of a sidebar, or all default to the left, or the right, whichever looks best on any particular blog.

    With the coding in my tutorial, you've already told all the buttons to centre when you put the very first bit of code in (at the beginning of the marquee) before you start adding your buttons.

    So it's a bit superfluous - you're telling the buttons to centre twice - and sometimes they decided to position themselves centre of your first centre instruction, so in fact lean a little to the right! (I'm convinced these things have a mind of their own, lol.)

    This is where you can in fact change things so they set out how you want them: left, center or right. Just replace any 'center' instruction with the one you want, instead - or simply delete them.

    Hope this helps - scream if it doesn't!

    ReplyDelete
  9. Thank you so much for sharing this tutorial! I've been wanting to do this for awhile now. I love your blog design too! So original and different!

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.