블로거(blogger) 사이트에서 별점 평가 위젯을 만드는 방법

해당 게시물에서는 블로거에서 별표 평점 위젯을 만드는 방법에 대해 잘 알려지지 않은 사실과 이것이 중요한 이유에 대한 튜토리얼을 공유하겠습니다.

블로그-사이트-별점-평가-위젯

Blogger에서 별점 위젯을 만드는 방법

이제 다음 단계를 따라 튜토리얼을 시작하겠습니다.

  1. 1단계: 우선 로그인하세요. 블로거 대시보드.
  2. 2단계: 블로거 대시보드에서 테마를 클릭하세요.
  3. 3단계: '사용자 정의' 버튼 옆에 있는 화살표 아이콘'▼'을 클릭하세요.
  4. 4단계: HTML 편집을 클릭하면 편집 페이지로 리디렉션됩니다.
  5. 5단게: 이제 코드를 찾아 </head>바로 위에 다음 CSS 코드를 붙여 넣습니다.
  6. /* 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>
    
  7. 6단계: 그런 다음 아래 HTML 코드를 복사하여 <data:post.body/>아래에 붙여넣으세요.
  8. <div id="wpac-rating"></div>
    
  9. 7단계: 그런 다음 제공된 JavaScript 코드를 복사하여 </body> 위에 붙여넣습니다.
  10. <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>
    
  11. 8단계: 마지막으로 이 아이콘을 클릭하여 변경 사항을 저장합니다.

결론

위 게시물은 블로거에서 별표 평점 위젯을 만드는 방법에 대한 튜토리얼이었습니다. 어떤 섹션에서든 문제가 발생하거나 질문이 있는 경우 댓글에 문의해 주세요. 감사합니다.

댓글 쓰기