Your Own Rating System for your PP - very simple!

[climber]

A quick tutorial, how to add a automaticly star-rating-system to your PP, copied from my german PP Sonnenblut.

All what you have to do is searching a free space on your PP, where you would like to add this rating-system and copy the following code inside there.

Code:

<div id="rating">
<img src="http://steinyeti.st.funpic.de/rating/status.png?n=#VISITOR&lang=en" border="0"><br>
<ul class='star-rating'>
<li class='current-rating'></li>
<li><a href="http://www.neopets.com/~#NAME?n=#VISITOR&r=1" title="1 of 5 stars" class="one-star">1</a></li>
<li><a href="http://www.neopets.com/~#NAME?n=#VISITOR&r=2" title="2 of 5 stars" class="two-stars">2</a></li>
<li><a href="http://www.neopets.com/~#NAME?n=#VISITOR&r=3" title="3 of 5 stars" class="three-stars">3</a></li>
<li><a href="http://www.neopets.com/~#NAME?n=#VISITOR&r=4" title="4 of 5 stars" class="four-stars">4</a></li>
<li><a href="http://www.neopets.com/~#NAME?n=#VISITOR&r=5" title="5 of 5 stars" class="five-stars">5</a></li>
</ul>

<img src="http://steinyeti.st.funpic.de/rating/info.png?lang=en">
<br>
<br>
<a href="~Sonnenblut" title="Click here for your own rating system">-Information about the ratingsystem-</a>
</div>

<style /> #rating { width:170px; height:auto; text-align: center; font-size: 10px; font-family: verdana; margin:auto; } #rating a { text-decoration:none; color: #000000; } #rating a:hover { text-decoration:underline; cursor:default; } .star-rating{ list-style:none; margin: 0px; padding:0px; width: 100px; height: 20px; position: relative; overflow:hidden; background: url('http://steinyeti.st.funpic.de/rating/stars.gif') top left no-repeat; margin:auto; } .star-rating li{ padding:0px; margin:0px; width:20px; height:20px; float: left; } .star-rating li a{ display:block; width:20px; height: 20px; line-height:20px; text-decoration: none; text-indent: -9000px; z-index: 20; position: absolute; padding: 0px; overflow:hidden; } .star-rating li a:hover{ background: url(http://steinyeti.st.funpic.de/rating/alt_star.gif) left bottom; z-index: 2; left: 0px; border:none; } .star-rating a.one-star{ left: 0px; } .star-rating a.one-star:hover{ width:20px; } .star-rating a.two-stars{ left:20px; } .star-rating a.two-stars:hover{ width: 40px; } .star-rating a.three-stars{ left: 40px; } .star-rating a.three-stars:hover{ width: 60px; } .star-rating a.four-stars{ left: 60px; } .star-rating a.four-stars:hover{ width: 80px; } .star-rating a.five-stars{ left: 80px; } .star-rating a.five-stars:hover{ width: 100px; } .star-rating li.current-rating{ position: absolute; height: 20px; display: block; text-indent: -9000px; z-index: 1; width:50px; } a:active{ outline: none; } </style />

If you're familiar with html and css you can edit this code as you like to. Please not remove the link to the PP.

And thats all. Really simple, isn't it?

[Shoyru_Lover]

Niiice very nice. I'll implement this on my pet pages.

Do you have a page up somewhere on PPT? I'd like to promote this.

[climber]

Hm, until now I was to lazy to create a nice design, so I created a page not yet.
Perhaps, we could integrate this in a pinkpt standard layout?

[Shoyru_Lover]

Perhaps, we could integrate this in a pinkpt standard layout?

Do you mean create a page on PPT for this? Yep we can do that. Just send me a private message with the relevant details and I'll put one up today/tomorrow depending on when I read the private message.

[Siouxper]

Love this script I put it on my petpage and advertised it on the BD Chat a bit

[climber]

thanks for you support
130 Raiting Systems are used currently.