How To Add Review Widget In My Blogger Template

0
How To Add Review Widget/gadget/ In Blogger Template


Hello guys,today in this article we are going to teach you how to add review widget in blogger template.Before review widget/gadget can be use only in wordpress or any other paid platform.Now it's time to implement review widget tool in blogger and now it's possible.Have you ever thought to convert your blogger template into a review friendly blog or website? However from this review widget will able to grab visitors attention to your post and suppose you are having a blog or website like smartphones reviews,Movie reviews,Software reviews site,any game or gadget reviews site.And you website or blog is hosted on blogger platform so blogger area is not that much broad like wordpress,but from now  you can use review widget to give ranking to your desired content.Review widget have 2 features like you can show same review on all blog pages or you can choose individual reviews for each and every blog posts.Finally to grab this widget follow the steps mentioned below.

how to add fixed review widget for every post in blogger

To display the same ranking or ratings/score to all posts of your blogger follow this step to add widget in blogger post footer.

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard
Step 2. Now Click on -> Template -> Edit HTML
Step 3. Now Search for ]]></b:skin> by Pressing Ctrl+F keys. 
Step 4. Now  Paste the below code above/before ]]></b:skin> 
/*Review Widget by www.bloggersstand.com*/
.BstandReview-summary{position:absolute;z-index:2;bottom:0;font-size:14px;left:14px;right:14px}
.BstandReview-summary{opacity:1}
.BstandReview-summary p,.BstandReview-summary h3{margin:0}
.BstandReview-summary h3{font-size:20px}
.BstandReview-summary p{padding:10px}
.BstandReview-summary a{color:#FFF}
.bsd-review{border:1px solid #E7E7E7;margin-bottom:15px}
.review-item,.item-summary:first-child{border-bottom:1px solid #E7E7E7}
.review-item{padding:12px}
.review-item:last-child{border-bottom:0}
.rev-value-outer{background-color:rgba(0,0,0,0.10);overflow:hidden;box-shadow:inset 0 0 4px rgba(0,0,0,0.2)}
.rev-value{height:10px;background-color:#FF0000;box-shadow:0 0 5px rgba(0,0,0,0.3)}
.review-circle{padding-bottom:5px;overflow:hidden;font-size:14px}
.review-circle span{font-weight:400;float:right}
.review-box {width:75%}
.review-box{display:review-box;vertical-align:middle;margin-top:0;margin-bottom:0;float:left;margin:10px 0;margin-right:2%}
.review-wrapper .review-box{display:block; width:20%}
.item-summary{overflow:hidden;text-align:justify}
.item-summary h4{margin:0 0 10px;display:inline-block;padding:3px 8px;background-color:#FF0000;color:#FFF;text-transform:uppercase;font-size:16px}
.item-summary span{display:block}
.review-circle-place{padding:10px 12px;vertical-align:top}
.review-wrapper{border-left:1px solid #E7E7E7;width:140px;text-align:center;font-weight:600;padding:10px 10px 20px;vertical-align:bottom;background-color:rgba(0,0,0,0.03)}
.rev-score{font-size:50px}
.srev-place{position:absolute;top:0;right:0;color:#FF0000;font-size:30px;font-weight:600;width:50px;height:50px;text-align:center;line-height:50px;background-color:rgba(255,255,255,0.50)}
.items .srev-place{right:auto;left:0;font-size:17px;width:30px;height:30px;line-height:30px}
.c100.p51 .slice,.c100.p52 .slice,.c100.p53 .slice,.c100.p54 .slice,.c100.p55 .slice,.c100.p56 .slice,.c100.p57 .slice,.c100.p58 .slice,.c100.p59 .slice,.c100.p60 .slice,.c100.p61 .slice,.c100.p62 .slice,.c100.p63 .slice,.c100.p64 .slice,.c100.p65 .slice,.c100.p66 .slice,.c100.p67 .slice,.c100.p68 .slice,.c100.p69 .slice,.c100.p70 .slice,.c100.p71 .slice,.c100.p72 .slice,.c100.p73 .slice,.c100.p74 .slice,.c100.p75 .slice,.c100.p76 .slice,.c100.p77 .slice,.c100.p78 .slice,.c100.p79 .slice,.c100.p80 .slice,.c100.p81 .slice,.c100.p82 .slice,.c100.p83 .slice,.c100.p84 .slice,.c100.p85 .slice,.c100.p86 .slice,.c100.p87 .slice,.c100.p88 .slice,.c100.p89 .slice,.c100.p90 .slice,.c100.p91 .slice,.c100.p92 .slice,.c100.p93 .slice,.c100.p94 .slice,.c100.p95 .slice,.c100.p96 .slice,.c100.p97 .slice,.c100.p98 .slice,.c100.p99 .slice,.c100.p100 .slice{clip:rect(auto,auto,auto,auto)}
.c100 .bar,.c100.p51 .fill,.c100.p52 .fill,.c100.p53 .fill,.c100.p54 .fill,.c100.p55 .fill,.c100.p56 .fill,.c100.p57 .fill,.c100.p58 .fill,.c100.p59 .fill,.c100.p60 .fill,.c100.p61 .fill,.c100.p62 .fill,.c100.p63 .fill,.c100.p64 .fill,.c100.p65 .fill,.c100.p66 .fill,.c100.p67 .fill,.c100.p68 .fill,.c100.p69 .fill,.c100.p70 .fill,.c100.p71 .fill,.c100.p72 .fill,.c100.p73 .fill,.c100.p74 .fill,.c100.p75 .fill,.c100.p76 .fill,.c100.p77 .fill,.c100.p78 .fill,.c100.p79 .fill,.c100.p80 .fill,.c100.p81 .fill,.c100.p82 .fill,.c100.p83 .fill,.c100.p84 .fill,.c100.p85 .fill,.c100.p86 .fill,.c100.p87 .fill,.c100.p88 .fill,.c100.p89 .fill,.c100.p90 .fill,.c100.p91 .fill,.c100.p92 .fill,.c100.p93 .fill,.c100.p94 .fill,.c100.p95 .fill,.c100.p96 .fill,.c100.p97 .fill,.c100.p98 .fill,.c100.p99 .fill,.c100.p100 .fill{position:absolute;border:0.08em solid #FF0000;width:0.84em;height:0.84em;clip:rect(0em,0.5em,1em,0em);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
.pie-fill,.c100.p51 .bar:after,.c100.p51 .fill,.c100.p52 .bar:after,.c100.p52 .fill,.c100.p53 .bar:after,.c100.p53 .fill,.c100.p54 .bar:after,.c100.p54 .fill,.c100.p55 .bar:after,.c100.p55 .fill,.c100.p56 .bar:after,.c100.p56 .fill,.c100.p57 .bar:after,.c100.p57 .fill,.c100.p58 .bar:after,.c100.p58 .fill,.c100.p59 .bar:after,.c100.p59 .fill,.c100.p60 .bar:after,.c100.p60 .fill,.c100.p61 .bar:after,.c100.p61 .fill,.c100.p62 .bar:after,.c100.p62 .fill,.c100.p63 .bar:after,.c100.p63 .fill,.c100.p64 .bar:after,.c100.p64 .fill,.c100.p65 .bar:after,.c100.p65 .fill,.c100.p66 .bar:after,.c100.p66 .fill,.c100.p67 .bar:after,.c100.p67 .fill,.c100.p68 .bar:after,.c100.p68 .fill,.c100.p69 .bar:after,.c100.p69 .fill,.c100.p70 .bar:after,.c100.p70 .fill,.c100.p71 .bar:after,.c100.p71 .fill,.c100.p72 .bar:after,.c100.p72 .fill,.c100.p73 .bar:after,.c100.p73 .fill,.c100.p74 .bar:after,.c100.p74 .fill,.c100.p75 .bar:after,.c100.p75 .fill,.c100.p76 .bar:after,.c100.p76 .fill,.c100.p77 .bar:after,.c100.p77 .fill,.c100.p78 .bar:after,.c100.p78 .fill,.c100.p79 .bar:after,.c100.p79 .fill,.c100.p80 .bar:after,.c100.p80 .fill,.c100.p81 .bar:after,.c100.p81 .fill,.c100.p82 .bar:after,.c100.p82 .fill,.c100.p83 .bar:after,.c100.p83 .fill,.c100.p84 .bar:after,.c100.p84 .fill,.c100.p85 .bar:after,.c100.p85 .fill,.c100.p86 .bar:after,.c100.p86 .fill,.c100.p87 .bar:after,.c100.p87 .fill,.c100.p88 .bar:after,.c100.p88 .fill,.c100.p89 .bar:after,.c100.p89 .fill,.c100.p90 .bar:after,.c100.p90 .fill,.c100.p91 .bar:after,.c100.p91 .fill,.c100.p92 .bar:after,.c100.p92 .fill,.c100.p93 .bar:after,.c100.p93 .fill,.c100.p94 .bar:after,.c100.p94 .fill,.c100.p95 .bar:after,.c100.p95 .fill,.c100.p96 .bar:after,.c100.p96 .fill,.c100.p97 .bar:after,.c100.p97 .fill,.c100.p98 .bar:after,.c100.p98 .fill,.c100.p99 .bar:after,.c100.p99 .fill,.c100.p100 .bar:after,.c100.p100 .fill{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.c100{position:relative;font-size:120px;width:1em;height:1em;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;float:left;margin:0 15px 10px;border:9px solid #dcdcdc;border:9px solid rgba(0,0,0,0.1)}
.c100 *,.c100 *:before,.c100 *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
.c100 > .rev-score{position:absolute;width:100%;z-index:1;left:-0.28em;top:-0.28em;width:3.35em;line-height:3.35em;font-size:0.3em;display:block;text-align:center;white-space:nowrap;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}
.c100:after{position:absolute;top:0.08em;left:0.08em;display:block;content:" ";-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;background-color:transparent;width:0.85em;height:0.85em;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in}
.c100 .slice{position:absolute;width:1em;height:1em;clip:rect(0em,1em,1em,0.5em);top:-0.074em;left:-0.074em}
.c100:hover{cursor:default}
.c100:hover > .rev-score{color:#FF0000;-webkit-transform:scale(1.35)}
.c100:hover:after{top:0.04em;left:0.04em;width:0.92em;height:0.92em}
.top-revscrore{float:left;width:150px;text-align:center;height:150px;margin-right:10px;font-weight:600}
customization : 


To change the review widget color replace #FF0000 with your hex color value.you can choose color from our tool by visiting the color wheel picker and color hex code generator.

Step 5. Now search for <data:post.body/> by Pressing Ctrl+F keys,You will find three times but we will stop on second one.

Step 6. Now Paste the below code above/before <data:post.body/>
<div class="bsd-review">
<div class="review-item"><div class="review-circle">Widgets<span>8</span></div><div class="rev-value-outer"><div class="rev-value" data-value="8" style="width:80%"></div></div></div>
<div class="review-item"><div class="review-circle">Design<span>6</span></div><div class="rev-value-outer"><div class="rev-value" data-value="7" style="width:70%"></div></div></div>
<div class="review-item"><div class="review-circle">Graphics<span>5</span></div><div class="rev-value-outer"><div class="rev-value" data-value="8" style="width:80%"></div></div></div>
<div class="review-item"><div class="review-circle">SEO<span>9</span></div><div class="rev-value-outer"><div class="rev-value" data-value="9" style="width:90%"></div></div></div>

<div class="item-summary"><div class="review-circle-place review-box"><h4>Summary</h4><span>Bloggersstand.Com is a website for blogger tutorials,wordpress tutorials,blogspot responsive templates,tricks and tips for both and also provide free resources for websites and blog,also explain the smart earning method through online</span></div>
<div class="review-wrapper review-box"><div class="overall-inner"><div class="c100 p75"><div class="rev-score">7.5</div><div class="slice"><div class="fill"></div><div style="transform: rotate(270deg);" class="bar"></div></div></div><span>Overall Score</span></div></div></div>
</div>
Customization : 
  • To change review widget width,repace all data-value="8" and style="width:80%"
  • To change the post summaryn replace the above summary.
  • To change the overall rating replace the “rev-score">7.5 with different value.
Done !

How to Add review widget in selected blog posts

installations steps:

Step 1. First follow the above 4 steps.
Step 2. Now when you create a  new post then from post editor select HTML view and now add the below code.
<div class="bsd-review">
<div class="review-item"><div class="review-circle">Widgets<span>8</span></div><div class="rev-value-outer"><div class="rev-value" data-value="8" style="width:80%"></div></div></div>
<div class="review-item"><div class="review-circle">Design<span>6</span></div><div class="rev-value-outer"><div class="rev-value" data-value="7" style="width:70%"></div></div></div>
<div class="review-item"><div class="review-circle">Graphics<span>5</span></div><div class="rev-value-outer"><div class="rev-value" data-value="8" style="width:80%"></div></div></div>
<div class="review-item"><div class="review-circle">SEO<span>9</span></div><div class="rev-value-outer"><div class="rev-value" data-value="9" style="width:90%"></div></div></div>

<div class="item-summary"><div class="review-circle-place review-box"><h4>Summary</h4><span>Bloggersstand.Com is a website for blogger tutorials,wordpress tutorials,blogspot responsive templates,tricks and tips for both and also provide free resources for websites and blog,also explain the smart earning method through online</span></div>
<div class="review-wrapper review-box"><div class="overall-inner"><div class="c100 p75"><div class="rev-score">7.5</div><div class="slice"><div class="fill"></div><div style="transform: rotate(270deg);" class="bar"></div></div></div><span>Overall Score</span></div></div></div>
</div>
The best place for the review widget is post footer,so paste the above code after all your new post content.
That's it folks!
We hope this article helped you to learn How To Add  Review Widget/gadget in your blogger template.If you liked this article please Join us on Facebook,Twitter,Google Plus.
learn trick to Add review widget gadget score ranking ratings widget in your blogger template,adding best review widget for gadget,smartphone,softwares,movies reviews ratings blogger platform widget.
Hello guys,today in this article we are going to teach you how to add review widget in blogger...
SUMMARY

learn trick to Add review widget gadget score ranking ratings widget in your blogger template,adding best review widget for gadget,smartphone,softwares,movies reviews ratings blogger platform widget.

You Might Also Like:

We hope this article helped you to learn How To Add Review Widget In My Blogger Template. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Review Widget In My Blogger Template" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand