Contents
▼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 {"item", "static_page"}'>
<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 {"item", "static_page"}'>
<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>
이렇게 하면 아래와 같이 적용되는 것을 확인할 수 있습니다.
다시한번 말씀드리지만, 이 기능을 사용함에 있어 책임은 전적으로 사용자에게 있습니다.
아직까지 큰 문제는 없지만 어디까지나 이런 기능이 있구나 정도로만 생각해주시면 감사하겠습니다.
악용할 경우 검색엔진에서 어떤 조치를 취할지는 아무도 모르기 때문에.. 주의해주시기 바랍니다.