Neocities Tips & Tricks

Internet Bumper Sticker Scroller
HTML

            
<div class="internetbumperstickers">
    <marquee scrollamount="10">
        <img src="https://www.internetbumperstickers.com/066811/n01/napster.gif">
        <img src="https://www.internetbumperstickers.com/066811/n01/no_trolls.gif">
        .
        .
        .
        <a href="./credits" target="_blank"><img src="https://www.internetbumperstickers.com/066811/c01/citation_needed.gif"></a>
    </marquee>
</div>

CSS

            
.internetbumperstickers {
    position:fixed;
    width:100%;
    height:40px;
    padding:10px 5px;
    bottom:0;
}

To add your own stickers, go to Internet Bumper Stickers, and take a look around.
Once you find something you like, just right click and select "Copy image link" from the menu.
Come back to your website, and create a new <img> tag, and paste the link into the quotes for the source="".

To change scroll speed, change the value in <marquee scrollamount="10">
Scroll speed is measured in pixels/iteration. 5 is pretty slow, and 20 is a bit fast, so I chose 10. Feel free to make it as fast or slow as you'd like.

If you want your stickers to show up at the top instead, go into your website's CSS file and change bottom: 0; to top: 0;.
If you don't like the space between the stickers, change padding: 10px 5px; to padding: 10px 0;.

I also elected to add a link to my credits on the last sticker, but if you don't want that, just remove the <a> tag at the end.
If you decide to keep it, you will have to make sure that an index.html exists at home/credits on your website.

To learn more HTML/CSS, check out these tutorials!