해당 게시물에서는 블로거에서 별표 평점 위젯을 만드는 방법에 대해 잘 알려지지 않은 사실과 이것이 중요한 이유에 대한 튜토리얼을 공유하겠습니다.
Blogger에서 별점 위젯을 만드는 방법
이제 다음 단계를 따라 튜토리얼을 시작하겠습니다.
- 1단계: 우선 로그인하세요. 블로거 대시보드.
- 2단계: 블로거 대시보드에서 테마를 클릭하세요.
- 3단계: '사용자 정의' 버튼 옆에 있는 화살표 아이콘'▼'을 클릭하세요.
- 4단계: HTML 편집을 클릭하면 편집 페이지로 리디렉션됩니다.
- 5단게: 이제 코드를 찾아
</head>
바로 위에 다음 CSS 코드를 붙여 넣습니다. - 6단계: 그런 다음 아래 HTML 코드를 복사하여
<data:post.body/>
아래에 붙여넣으세요. - 7단계: 그런 다음 제공된 JavaScript 코드를 복사하여
</body>
위에 붙여넣습니다. - 8단계: 마지막으로 이 아이콘을 클릭하여 변경 사항을 저장합니다.
/* Post Star Rating Widget */ <style type='text/css'> #wpac-rating:before { content: "Rate This Article"; top: -15px; text-align: center; position: relative; width: 100%; } #wpac-rating .wp-stars .wp-star:hover:before { z-index: 999; padding: 3px 11px; background: #1a1d23f0; color: #fff; font-size: 12px; border-radius: 2px; white-space: nowrap; position: absolute; line-height: 1.4; text-align: center; -ms-transform: translateX(-30%); -moz-transform: translateX(-30%); -webkit-transform: translateX(-30%); transform: translateX(-30%); top: 100%; margin-top: 9px; } </style>
<div id="wpac-rating"></div>
<script type = "text/javascript"> wpac_init = window.wpac_init || []; wpac_init.push({ widget: 'Rating', id: 31970 }); (function () { if ('WIDGETPACK_LOADED' in window) return; WIDGETPACK_LOADED = true; var mc = document.createElement('script'); mc.type = 'text/javascript'; mc.async = true; mc.src = 'https://cdn.widgetpack.com/widget.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling); })(); </script>
결론
위 게시물은 블로거에서 별표 평점 위젯을 만드는 방법에 대한 튜토리얼이었습니다. 어떤 섹션에서든 문제가 발생하거나 질문이 있는 경우 댓글에 문의해 주세요. 감사합니다.