Friday, August 21, 2020

How to Add Post Rating Widget End of Blogger Blog Post

How to Add Post Rating Widget End of Blogger Blog Post Blog Post rating widget is not an official widget of Blogger. This is just a manual rating system for your Blog post. However This widget will show your visitors about Post information like Post title, Author, Category, rating and votes. Generally we can add this widget the end of Blog post, I mean above Related post or comment section. Though by watching this widget a visitor will get details information about post so you can use this widget instead of breadcrumb. However the rating option is fixed and it won't change the value and readers won't able to rate your content. Because Google Blogger doesn't support rating system. But still this widget is very attractive for the readers and Bloggers. So for adding this widget please follow the below steps- Step 1Log in to yourBlogger accountand Go to yourBlogger Dashboard Step 2Click on- Template - Edit HTML Step 3Now find]]/b:skinby Pressing Ctrl+F (Windows) or CMD+F (Mac) Step 4And Paste the below code above/before]]/b:skin #post-rating { font-weight: 700; Color:#333333; padding: 10px; padding-bottom: 0; background: #FFFFFF; text-decoration:none; } #post-rating a:hover { Color:#333333; font-weight: 700; text-decoration:none; } .post_byfix { float: left; background: #FFFFFF; Color:#333333; width: 100%; overflow: hidden; clear: both; margin-bottom: 10px; } .post-img { display: block; float: left; padding: 4px!important; margin-left: 2px!important; padding-right: 10px!important; margin-top: 5px!important; overflow: hidden; } .post-img img { width: 100px; height: 100px; } .post-by { float:right; color:#333333; width: 100%; font:normal 12px 'Trebuchet MS',Helvetica, sans-serif; text-decoration:none; } .post-by ul { margin: 0; padding: 0; margin-top: 9px; } .post-by li { list-style: none; padding: 3px 10px!important; } Step 5Now finddata:post.body/by Pressing Ctrl+F (Windows) or CMD+F (Mac) You will find 3/4 times this code go for second one. Step 6And Paste the below code above/beforedata:post.body/ b:if cond='data:blog.pageType == quot;itemquot;' !-- Widget by www.bloggerspice.com -- div id='post-rating' div class='post-by' div class='post-img' b:if cond='data:post.thumbnailUrl' img class='post-thumbnail radius tooltip' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/ b:else/ img alt='no image' class='post-thumbnail radius tooltip' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISqUBZkxcHQ3t1x2cR7UPcWzzJidI8-IU4xrlYcYnAVnSTN7lIkpXZDrY5gY2tJRzVz9yZ-oGS-LWR7h284XJ0jN5uB4stfet4Vfk-3b_tjPqAvLYRVUocJIRoKHwElizDqFgNc5Ee8Yl/s1600/no_image.jpg'/ /b:if ul libTitle :/b a expr:href='data:post.url' expr:title='data:post.title'data:post.title//a/li libAuthor :/b span class='post-author vcard' b:if cond='data:post.authorProfileUrl'span class='fn' itemscope='itemscope' itemtype='http://schema.org/Person'meta expr:content='data:post.authorProfileUrl' itemprop='url'/a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'spandata:post.author//span/a/spanb:else/span class='fn' itemscope='itemscope' itemtype='http://schema.org/Person'spandata:post.author//span/span/b:if/span/li libCategory:/b span class='post-labels' b:if cond='data:post.labels' b:loop values='data:post.labels' var='label' a expr:href='data:label.url' rel='tag'data:label.name//ab:if cond='data:label.isLast != quot;truequot;' i class='icon-angle-right'/ /b:if /b:loop /b:if /span/li li div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate' bRating :/b span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating' span itemprop='average'100%/span /span based on span itemprop='votes'10/span ratings. span itemprop='count'5/span user reviews. /li /ul div itemscope='' itemtype='http://data-vocabulary.org/Review' div style='position:fixed;z-index:-500;opacity:0;top:0px;left:0px;' div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate' Item Reviewed: span itemprop='itemreviewed'data:post.title//span span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating' span itemprop='average'9/span out of span itemprop='best'10/span based on span itemprop='votes'10/span ratings. span itemprop='count'9/span user reviews. /span div class='clear'/ /b:if Step 7Now simply hit theSave Templatebutton. To check the widget please visit any post from your Blog and see the widget. Post image, title and category will change post by post. But rating will be fixed and you will able to change rating manually . For any further help you can write us. Thank you.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.