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

Product Rating Widget
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>

<!-- Add this element exactly where you want the Rating-Widget to appear -->
<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("http://4.bp.blogspot.com/-QwEpFi2o2Ls/UGx4XF2yZHI/AAAAAAAAGzY/MfF4Yr88ats/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("http://1.bp.blogspot.com/-S5pnVYhpNd0/UGx4AvG66BI/AAAAAAAAGzQ/1_PWO84JIIY/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("http://2.bp.blogspot.com/-dyrBbYgC75I/UGx3wgxAaPI/AAAAAAAAGzI/CqB1Ktt0TKM/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>


<!-- Add this javascript code immediately before the </body> tag -->
<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! smile

Need Help?


Hope you guys liked the widget. Leave out your problems below. I'll try to get back as soon as possible. Stay safe guys and Best of Luck! Cheers!

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Product Rating Widget: Custom Rating Icons With Price-Link Control
Product Rating Widget: Custom Rating Icons With Price-Link Control
http://2.bp.blogspot.com/-fk_UbPh-eTE/UEOXhKbpo5I/AAAAAAAAGGs/3qx3ROmLC4Y/s320/jquery-star-rating-widget-plugin.jpg
http://2.bp.blogspot.com/-fk_UbPh-eTE/UEOXhKbpo5I/AAAAAAAAGGs/3qx3ROmLC4Y/s72-c/jquery-star-rating-widget-plugin.jpg
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/09/product-rating-widget-custom-rating.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/09/product-rating-widget-custom-rating.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade