Product Rating Widget: Custom Rating Icons With Price-Link Control

We are really excited to announce our latest affiliate products rating widget with stars rating options (with custom rating icons) with price control feature and product landing page link button. The widget is more suitable to the standalone websites/Blogger as there aren't enough third party plugins to back up their affiliate campaigns.

For WordPress, there are couple of advanced free and premium rating plugins. Every day we to strive for bringing in something new to our readers that would actually help them out in their online presence. So here we have, an advanced custom rating widget for affiliate (or any other products) that features price and a link to the landing page.

Follow the instructions below to add the widget to your blogs. But before we move on, you may like to get through our latest widgets:

Step #1 Configure Rating Widget First

First step is to configure the third party rating widget for your blog. Go to rating-widget.com/ and get a rating widget for your self. First you need to generate a unique user ID. Simply hit the button that says "Generate User-Key"

Once done, next click "Get Widget" Button (in green). The process is shown in the picture below.

Now simply note down the widget ID as shown in the picture above. DON'T hit Get Widget (No need of that).

Step #2 Customize The Rating Widget (Adding the code that you saved before)

Now Simply replace "YOUR USER ID" text in the code below with your rating code that you copied in the previous step.

<div id="ta_post_review_after">
<div>Add Product Description Here</div>
<div class="clear_space"></div>
<ul>
<li class="price">
<span>$49</span>
</li>


<div class="rw-ui-container rw-urid-1"></div>

<li class="after_button">
<div class="rating_btn">
<a class="ar_button ar_blue" rel="nofollow" target="_blank" href="PRODUCT LINK" itemprop="url">More Details</a>
</div>
</li>
</ul>
<div class="clear"></div>

<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:290px;
">
<a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></span>
</div>

<style>
.clear {
    clear: both;
}
.clear_space {
    clear: both;
    height: 5px;
}
.ta_magic_review {
    left: -9999px;
    position: absolute;
}
.ta_rating_container {
    border: 1px solid #E0E0E0;
    border-radius: 3px 3px 3px 3px;
    font-size: 14px;
    line-height: 20px;
    width: 300px;
}
#ta_rating {
    background: none repeat scroll 0 0 #F6F6F6;
    border: 2px solid white;
    border-radius: 3px 3px 3px 3px;
    clear: both;
    padding: 10px;
}
#ta_rating .ta_description {
    clear: both;
}
#ta_rating .rating_btn {
    clear: both;
    float: right;
    margin-top: 20px;
}
#ta_rating a {
    text-decoration: none;
}
#ta_rating a:hover {
    text-decoration: underline;
}
#ta_rating dt, #ta_rating dd {
    float: left;
    font-weight: normal;
}
#ta_rating dd {
    margin-bottom: 0 !important;
    margin-left: 15px;
}
#ta_rating dl {
    margin: 0;
}
#ta_rating dt {
    clear: both;
}
.ta_rating {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZ5u-UZ6uGgwptPHpSTGzvncy4k6ynMlt0l0hI58aIo911kMAGi_-UtHIlgiUtYZF1MhyphenhyphenZ_3wkbrI_bpK01j1c7QqpJzIqIkqi8hMQYVkW2C1U0gVDiZPmmYlmAp8WSx1Ec6-HRYz1i4/s1600/stars.png") repeat-x scroll 0 -16px transparent;
    height: 16px;
    position: relative;
    width: 80px;
}
.ta_rating .result {
    background: url("http://blogvkp.com/wp-content/plugins/author-hreview/images/stars.png") repeat-x scroll 0 0 transparent;
    height: 16px;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    z-index: 102;
}
.result {
    text-indent: -9999px;
}
.ta_headline_meta, .rating_date {
    color: #999999;
    cursor: help;
    font-size: 10px;
}
#ta_rating h3 {
    font-size: 14px;
    margin: 10px 0 5px;
}
#ta_rating div.hr {
    background: none repeat scroll 0 0 #E0E0E0;
    height: 1px;
    margin: 5px 0;
}
#ta_rating div.hr hr {
    display: none;
}
#ta_rating p {
    margin-bottom: 0.2em;
}
#ta_post_review_after {
    background: none repeat scroll 0 0 #F6F6F6;
    border-bottom: 1px dotted #DDDDDD;
    border-top: 1px dotted #DDDDDD;
    margin: 10px;
    padding: 15px;
}
#ta_post_review_after ul {
    margin-top: 10px;
}
#ta_post_review_after ul li {
    float: left;
    list-style: none outside none;
}
#ta_post_review_after .price {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGj3tG5QKF5D_OmnFvQYsJ4jkBR_U6SZnX-0UwKrDBW6Sm3_mSPEIHYefIrR_HGOxMMqrRp6qWJa1h2c4mFxg1RYi1MsulpRTDdNS3grfnTVVuehGSNHF2Psu-kJE4cy64wClxEcrtPsw/s1600/price.png") no-repeat scroll 0 50% transparent;
    height: 32px;
    padding-left: 40px;
    width: 100px;
}
#ta_post_review_after .price span {
    display: block;
    margin-top: 8px;
    position: relative;
}
#ta_post_review_after .after_rating {
    width: 160px;
}
#ta_post_review_after .after_button {
    float: right;
    margin-right: 20px;
    margin-top: 8px;
}
#ta_post_review_after dd {
    color: #333333;
    display: block;
    font-size: 110%;
    margin-bottom: 0 !important;
    margin-top: 5px;
}
#ta_post_review_after span {
    color: #999999;
}
.ar_button {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFYruld5W-2WlgcYLUhSZM6h0uV8UWBa9c3BMgz6jxju2R4f4UBLizkrdDimVsMB1fE-W-uoE4a6S_6FoInfqEDW-5lG6tvo_dOsw0X3hHQrSWPFbpRo5OWMj_NyHXzs1XlCEaChaF9vQ/s1600/bg_button.png") repeat-x scroll center bottom #777777;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline;
    font-weight: bold;
    padding: 5px 10px;
    text-decoration: none !important;
    text-shadow: 1px 1px #666666;
}
.ar_button:hover {
    background-position: 0 center;
}

.ar_button.ar_blue {
    background-color: #2C6DA0;
}

</style>


<div class="rw-js-container">
    <script type="text/javascript">
        // Async Rating-Widget initialization.
        function RW_Async_Init(){
            RW.init("YOUR USER ID",
            {
                advanced: {
                    font: {
                        color: "#000"
                    }
                },
                type: "star"
            });
            RW.render();
        }

        // Append Rating-Widget JavaScript library.
        if (typeof(RW) == "undefined"){
            (function(){
                var rw = document.createElement("script");
                rw.type = "text/javascript"; rw.async = true;
                rw.src = "http://js.rating-widget.com/external.min.js?t=js";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(rw, s);
            })();
        }

    </script>
</div>

Now replace the other colored tags with description and product price etc as mentioned. Finally once the widget is customized, follow the next step.

Step #3 Add The Widget To Blogger

Now simply navigate to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript and paste the entire customized widget code in it. Hit Save and you're DONE!