Pure Simple CSS Rating Review Widget For Web And Blog

These days reviews provide good income and many companies and start ups requires reviews from various blogger to increase their reach and to get some good impression among the users and various people.Check this blogger star rating widget.

There are many Rating Review Widget are available over internet that contain so many codes and files that are heavy to load and not fully customization so here we have a simple Rating Review Widget coded in pure CSS to load quickly. This Rating Review Widget can be used any where in your posts or sidebar. Its best to review any products on your web that will give a quick answer to reader.

Features:

1.) No JQuery File Added.
2.) No JavaScript Code Added.
3.) Only CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<!--[if gte IE 9]>
<style type="text/css">
.gradient {filter: none;}
</style>
<![endif]-->
<style>
#exe_review {
width:280px;
height:400px;
border:1px solid #000;
padding:10px;
font-size:14px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
-webkit-box-shadow: 1px 1px 10px #6B6B6B;
-moz-box-shadow: 1px 1px 10px #6B6B6B;
box-shadow: 1px 1px 10px #6B6B6B;
}
hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image:-moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image:-ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image:-o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
#exe_review span{
font-size:30px;
color:#83bf2a;
}
#rating_text {
float: left;
padding: 10px;
font-size: 16px;
}
#rating {
float: left;
width:150;
height:40px;
background-color:#83bf2a;
}
/*
Width For Rating:
1-Star = 40px
2-Star = 70px
3-Star = 100px
4-Star = 130px
5-Star = 170px
*/
</style>

HTML:

<div id="exe_review">
<span>Review Status:</span>
<hr />
<b id="rating_text">Rating 4.5/5:</b>
<div id="rating"><img src="https://i.imgur.com/wBbIkj6.png"/></div>
<div style="clear:both;height:5px;"></div>
<hr />
<p>Product Name: <b>HP Laser Jet Printer</b></p>
<hr />
<p>Product Company: <b>HP Laser Jet Printer</b></p>
<hr />
<p>Product Description: <b>HP Laser Jet Printer</b></p>
<hr />
<p>Product URL: <b>HP Laser Jet Printer</b></p>
<hr />
<p>Product Price: <b>HP Laser Jet Printer</b></p>
<hr />
<div style="text-align:center;font-weight:bold;">Thanks For Visiting...</div>
</div>

Customization:

1.) You can change the CSS if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…