Monday, 8 April 2013

How to Make a Scrolling / Rolling Blogroll (Marquee tag)

carmen Jenner Author
Book Me!

This is one of the most sought after html codes in the blogging world! It cleans up your blog and adds eye catching movement. Can I also say it is a great deal easier than it seems, it is here spelled out for you below...

I won't bore you with too many details, and just get straight into it...

This is the code for each entry (button from other's sites) you will need to complete. You can just copy their code from their buttons Grab Box but directly inserting this into the code, may not give you the look you are after. Quite a few codes do not contain the Title sections and therefore, when you hover over their image in the blog roll, it will not display their name. This may not be important to you and the speed of simply inserting any code may be a better use of your time

To begin your blog roll code, start with this...


<center><marquee align="center" direction="up" height="250"onmouseout="this.start()" onmouseover="this.stop()"scrollamount="4" width="300"><div align="center">


To end the blog roll code, finish with this...

</div></marquee></center>


In the center you can place the copied code from a sites button Grab Box (one after the other for multiple buttons) like this, leaving an "enter" space so you can find each entry easier (to remove or edit it later). Spaces or Enters in a html code, do not mean a space or new line is added, they will not make the appearance any different, it just makes it easier to see where you are up to!


<a href="http://easydesigntipsandtricks.blogspot.com.au/"><img title="Design Tips" src="https://lh5.googleusercontent.com/-ALQoAVUHxas/UCDnPAt00eI/AAAAAAAAASI/luhe6L4cru0/s125/Design+Tips+Button.jpg" alt="Design Tips" target="_blank" /></a>

<a href="http://easydesigntipsandtricks.blogspot.com.au/"><img title="Design Tips" src="https://lh5.googleusercontent.com/-ALQoAVUHxas/UCDnPAt00eI/AAAAAAAAASI/luhe6L4cru0/s125/Design+Tips+Button.jpg" alt="Design Tips" target="_blank" /></a>

<a href="http://easydesigntipsandtricks.blogspot.com.au/"><img title="Design Tips" src="https://lh5.googleusercontent.com/-ALQoAVUHxas/UCDnPAt00eI/AAAAAAAAASI/luhe6L4cru0/s125/Design+Tips+Button.jpg" alt="Design Tips" target="_blank" /></a>

This was a random website three times but you get the idea.

In completion, your code would look like this.


<center><marquee align="center" direction="up" height="250"onmouseout="this.start()" onmouseover="this.stop()"scrollamount="4" width="300"><div align="center"> 

<a href="http://easydesigntipsandtricks.blogspot.com.au/"><img title="Design Tips" src="https://lh5.googleusercontent.com/-ALQoAVUHxas/UCDnPAt00eI/AAAAAAAAASI/luhe6L4cru0/s125/Design+Tips+Button.jpg" alt="Design Tips" target="_blank" /></a>

<a href="http://easydesigntipsandtricks.blogspot.com.au/"><img title="Design Tips" src="https://lh5.googleusercontent.com/-ALQoAVUHxas/UCDnPAt00eI/AAAAAAAAASI/luhe6L4cru0/s125/Design+Tips+Button.jpg" alt="Design Tips" target="_blank" /></a> 

<a href="http://easydesigntipsandtricks.blogspot.com.au/"><img title="Design Tips" src="https://lh5.googleusercontent.com/-ALQoAVUHxas/UCDnPAt00eI/AAAAAAAAASI/luhe6L4cru0/s125/Design+Tips+Button.jpg" alt="Design Tips" target="_blank" /></a>
</div></marquee></center> 

The other option, if you want each button to display the websites name when you hover over the button in your scroll, is to copy the code from each sites Grab Box and copy information from it, pasting it into the following code, some Grab information will already resemble this and all the good Button Codes will (see my previous post here)...

<center><a href="Website's URL Goes Here" title="Name you want to appear when hovering over the button" target="_blank"><img src="Website's Blog Button Image URL Goes Here" alt="Name to Give the Image Goes Here" style="border:none;" /></a> 

Then it would be simply adding the beginning code, the finishing code and any other button codes in between! So again, your final code would look something like this...

<center><marquee align="center" direction="up" height="250"onmouseout="this.start()" onmouseover="this.stop()"scrollamount="4" width="300"><div align="center">

<center><a href="Website URL" title="Name you want to appear when hovering over the button" target="_blank"><img src="Image URL" alt="Website Name" style="border:none;" /></a>

<center><a href="Website URL" title="Name you want to appear when hovering over the button" target="_blank"><img src="Image URL" alt="Website Name" style="border:none;" /></a>
<center><a href="Website URL" title="Name you want to appear when hovering over the button" target="_blank"><img src="Image URL" alt="Website Name" style="border:none;" /></a> 

</div></marquee></center>

And WHALA! Done! All you need to do now is to post the completed code into your blog's layout by following these steps, it works better in a larger widget area, in case some of the buttons you wish to display are large:
  1. Go to your blog's "Layout".
  2. Click Add Gadget
  3. Scroll down to HTML/Javascript
  4. In the title box, most people write something like "Favourite blogs..."
  5. Post your completed code into the content box and click save! 
Tweaking the code

Below are some ways to tweak the code for your site, for example, sizing. You will want to put up the box and then edit it to try different settings.

direction="up": This determines the direction the buttons scroll. You can have it scroll up or down, in single file, or left/right doubled up. just change the word "up" to "down" for example.

height="250": This determines how tall the widget it. Most blog buttons are 125 x 125, though not all, so a height of 250 px will allow two to be seen at once. Change it to a higher or lower number to suit your vision!

scrollamount="4":  this determines the speed at which it moves. Increase the number for a quicker speed. You can also use decimal points - 2.5 for instance.

width="300":  this determines the width of the gadget. Most buttons are 125 but many are 150 or greater! You want it large enough for the buttons to be seen but small enough to fit into your sidebar.

A border on each Button: The give Button code can be tweaked a little by adding a border, changing the border's width and colour, and even making all of the buttons the same width and height (be careful if they are rectangular buttons!)


Where it says style="border:none;", use the following instead:


style="border: solid 2px #hex colour code here" width="125" height="125"


Change the yellow amount to a larger number for a wider border around the button, change the pink to a hex colour code of your choice, adjust the width (blue) and height (red) to make all your buttons look uniformed. 


And that's it folks! They look amazing and again, feel free to comment with a link so I can come and check out your creation!


All the best, and if you have any questions, 
or would like to know how to add a border to the entire thing, in the colour of your choice, 
please contact me.


No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me