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.  
Subscribe to:
Post Comments (Atom)
 
 
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.