Fake Rating 블로그스팟 적용 코드

VTrick 테마의 장점 중 하나가 바로 Fake Rating(거짓 평점) 시스템이었는데요!

글을 작성하면 자동으로 평점이 정해지고, 검색엔진에도 반영되는 재미있는 기능이었습니다.

많은 분들이 VTrick 테마와 Fiksioner 테마 중에서 고민했던 것도 바로 이 기능 때문인데요!

여러분들께만 특별히 Fiksioner 테마에서도 Fake Rating 적용코드를 알려드리겠습니다.

[주의] Fake 라는 점에서 발생하는 모든 책임은 사용자에게 있습니다

Fake Rating 블로그스팟 적용 과정

Fake Rating 시스템을 블로그스팟에 적용하기 위해서 3개의 코드가 필요합니다.

1) Style CSS 코드 : Head에 붙여넣기

2) 자바스크립트 : Body에 붙여넣기

3) 본문(글)에 구현하기 위한 코드

1번과 2번은 블로그스팟 테마 > HTML 편집에 들어가서 붙여넣기 하면 됩니다.

그리고 글을 작성하고 평점(별점)이 반영되고 싶은 글에 코드를 넣으면 됩니다.

1. Style CSS 코드

아래 코드를 복사해서 </head> 앞에 붙여넣기 합니다.

<b:if cond='data:blog.pageType in {&quot;item&quot;, &quot;static_page&quot;}'>
<style type='text/css'>
/*<![CDATA[*/
#post-rating {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #666;
  text-align: right;
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#post-rating .rating {
  display: flex;
  align-items: center;
}

#post-rating .stars {
  display: inline-block;
  position: relative;
  height: 20px;
  width: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z' fill='%23e0e0e0'/%3E%3C/svg%3E");
  background-size: 20px;
  background-repeat: repeat-x;
  margin-right: 10px;
}

#post-rating .stars .score {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z' fill='%23ff9800'/%3E%3C/svg%3E");
  background-size: 20px;
  background-repeat: repeat-x;
}

#post-rating .rate-info {
  display: flex;
  align-items: center;
}

#post-rating .rate-value {
  font-weight: bold;
  margin-right: 5px;
}

#post-rating .rate-count {
  color: #999;
  font-size: 12px;
}

#post-rating .rate-count::before {
  content: '(';
}

#post-rating .rate-count::after {
  content: ')';
}
/*]]>*/
</style></b:if>

2. 자바스크립트

아래 코드를 복사해서 </body> 앞에 붙여넣기 합니다.

참고로 아래 수치를 변경하면 해당 범위내에서 랜덤으로 결정됩니다.

var rateValueMin(최소 평점) = 4.2;
var rateValueMax(최고 평점 / 5점 만점) = 4.8;
var rateCountMin(최소 투표수) = 78;
var rateCountMax(최고 투표수) = 199;

<b:if cond='data:blog.pageType in {&quot;item&quot;, &quot;static_page&quot;}'>
<script type='text/javascript'>
//<![CDATA[
(function() {
  function round(n,r){var o=Math.pow(10,r||0);return Math.round(n*o)/o}
  function randomBetween(min, max) {
    return Math.random() * (max - min) + min;
  }
  var rateValueMin = 4.2;
  var rateValueMax = 4.8;
  var rateCountMin = 78;
  var rateCountMax = 199;

function initRating() {
  var ratevalue = round(randomBetween(rateValueMin, rateValueMax), 2);
  var ratecount = Math.floor(randomBetween(rateCountMin, rateCountMax));
  var ratevl = document.querySelector('#post-rating .rate-value');
  var ratecnt = document.querySelector('#post-rating .rate-count');
  var ratestar = document.querySelector('#post-rating .score');

  if (ratevl && ratecnt && ratestar) {
    ratevl.textContent = ratevalue.toFixed(1);
    ratecnt.textContent = ratecount;
    ratestar.style.width = (ratevalue / 5) * 100 + '%';
  } else {
    console.error('Rating elements not found');
  }
}

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initRating);
  } else {
    initRating();
  }
})();
//]]>
</script></b:if>

3. 본문에 구현하기 위한 코드

새로운 글을 작성하고 HTML 보기를 눌러서 맨 마지막에 추가합니다.

<div class='entry-labels' id='post-rating'>
  <div class='rating'>
    <span class='stars'>
      <span class='score'></span>
    </span>
    <span class='rate-info'>
      <span class='rate-value'></span>
      <span class='rate-count'></span> ratings
    </span>
  </div>
</div>

이렇게 하면 아래와 같이 적용되는 것을 확인할 수 있습니다.

다시한번 말씀드리지만, 이 기능을 사용함에 있어 책임은 전적으로 사용자에게 있습니다.

아직까지 큰 문제는 없지만 어디까지나 이런 기능이 있구나 정도로만 생각해주시면 감사하겠습니다.

악용할 경우 검색엔진에서 어떤 조치를 취할지는 아무도 모르기 때문에.. 주의해주시기 바랍니다.

ratings

Fake Rating 블로그스팟 적용 과정

1. Style CSS 코드

2. 자바스크립트

3. 본문에 구현하기 위한 코드

Related Posts