Pink Poogle Toy Forum

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.

<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?

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.

_________________

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?

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.

_________________

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

_________________

thanks for you support
130 Raiting Systems are used currently.