How to use CSS to display rating stars in Blogger, Blogspot

Rating stars are widely used in Blogger blog posts. Everyone will be Reviewing some or the other things using Blogger. But I have never come across any of the posts which will describe how to use CSS to display rating stars in Blogger. Hence, I am writing this post to describe how to display rating stars in Blogger.

Rating stars are star like images that indicates the rating of an item. The more stars, the better is the product. Usually we find a scale of 0 to 5 stars, and most often these are in increments of half-stars of even full-stars only.

In this tutorial we’ll discuss how we can "use CSS to display the stars" in a very elegant manner. It even allows to show any rating very clearly, so you’d be able to distinguish a rating of 3.8 from a rating of 4.2!

5 star rating system in action:

Before starting, lets have a look here at this system in action. Look at the reviews posted for Bollywood Movies on this posts. We have inserted Star rating after describing each reviews.

How to use it in Blogger Template:

The stars are constructed out of only two images. A bright , and a faint star: .

The html for these stars is very simple – one DIV inside another:

 
<div class="rating_bar">
  <div style="width:51%"></div>
</div>

The style attribute for the inner DIV is what determines how many stars are displayed. A rating of 100% corresponds to 5 full stars. A rating of 40% corresponds to 2 stars, a rating of 42% corresponds to a little more than 2 stars, and so on.

So, you have to use above code in your blog posts as it is. But remember you should not write this on different lines, else Blogger blog post will show Bright and fainted images on different lines.

The class on the outer DIV allows us to apply CSS. The CSS used is as follows:

.rating_bar {
  width: 55px;
  background: url(/img/star_x_grey.gif) 0 0 repeat-x;
}

.rating_bar div {
  height: 12px;
  background: url(/img/star_x_orange.gif) 0 0 repeat-x;
}

1. To place this code, Goto Design -> Edit HTML -> Expand Widget Template.
2. Backup your template.
3. Search for <style>
4. Place above code before this tag.

The first rule-set applies to the outer DIV. It defines the width for the entire set of stars. The width determines how many stars will be visible. In our case, we have stars that are 11 pixels wide and we want 5 of them – hence 55 pixels wide. The faint star image is set as the background image.

The second rule-set applies to the inner DIV. The height needs to be the height of your star image. The bright star image is set as the background image.

This all combines to create our example:


You can think of it as two layered boxes. The lower one is filled with the faint stars and takes up the entire width. The upper one contains the bright stars and it’s width is what conveys the bar’s meaning.

Did this tutorial solved your problem? Is it Pretty simple? Write in your comments to keep this blog alive and share your experiences too.

You can ask your questions in Comments.

Read more »

Posted in: How-Tos

How to find out Human Head Weight?

How much your head weighs? If someone asks this question, it seems to be funny to us. But did we ever try to get answer of this question? How can I weigh my head?
Well, sometimes answer to this question may be terrible as well!!! Because some people might think that to weigh a head, I should ask some magician who will detach my head, then weigh it and again fix it.










What about lying down and placing head on a scale?













Thank God, Science has answer to it. So we should not rely upon above solutions.

1. Get a (very) large metric measuring tub placed into another tub and a friend.

2. Ask him to tie a rope on your leg and hang you upside down.



3. Fill the tub with enough water to fully submerge your head.

4. Make sure the tub is fully filled with water and allow some time so that water gets rest.

5. Ask your friend to drop you down, so that your head is completely dunked into the water. You’re your mouth closed and puckered to get rid of as much air as possible.



6. As soon as had dunks into the tub, excess water will come out in the outer tub.

7. Now, measure volume of water displaced in cubic centimeters. Water has a density of 1 gram per cubic centimeter. Thus, the volume of displaced water in cubic centimeter should be equal in number to the mass of the displacing object in grams. Here, displacing object is our head.

Why This Method?
Water is major and important things to all living beings. In some organisms, up to 90% of their body weight composed of water. Talking about Human body, Up to 60% of the human body is water, brain is composed of 70% water and lungs are nearly 90% water. Lean muscle tissue contains about 75% water by weight, as is the brain; body fat contains 10% water and bone has 22% water. About 83% of our blood is water, which helps digest our food, transport waste, and control body temperature. And finally Scientists have discovered that Human Head consists of 90% of water.
Hence, this method will give you 90% accurate results. Average Human Skull weighs around 4 to 5.5 KG.
So, next time when your friends ask you question that how much your head weighs. Don’t forget to follow up TechSac suggested method.
Do write in your comments and Don’t forget to share this article with your friends if you liked it.

Read more »

Posted in: Sci-Tech