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*/customization :
.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}
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">Customization :
<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>
- 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.
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.
That's it folks!
<div class="bsd-review">The best place for the review widget is post footer,so paste the above code after all your new post content.
<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>
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.