IJMuAN02pVKE2uZHXG2JnZAHGfjon49GBXjko1rk

Fake Rating 블로그스팟 적용 코드

블로소득
블로소득

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

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

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

Fake Rating 블로그스팟 적용 코드

여러분들께만 특별히 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

Related Posts

로드 중…
✖