친효스킨! 아이허브 모듈 적용 방법
아이허브(iHerb) 커미션을 사용하시는 분들을 위해서, 그리고 친효스킨을 사용하시는 분들을 위해서 아이허브 모듈을 하나 만들었습니다. 이 방법은 다른 스킨에서는 제대로 적용이 되지 않습니다. 오직 친효스킨만을 위한 아이허브 모듈 입니다. 사이드바에 설치하는 방식이며 설정 방법도 간단합니다.
CSS 세팅
먼저 아래의 첨부파일을 다운로드 받습니다.
/* 아이허브 모듈 */
#sidebar aside .rgy-iherb ul {
padding: 0 5px;
}
#sidebar aside .rgy-iherb li {
padding: 5px;
margin: 5px 0;
}
#sidebar aside .rgy-iherb li:not(:last-child) {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
#sidebar aside .rgy-iherb li a {
display: block;
font-size: 15px;
font-weight: bold;
}
#sidebar aside .rgy-iherb li a:hover {
color: #FF5544;
color: var(--mouseHoverColor);
}
#sidebar aside .rgy-iherb li a::before {
content: "\f105";
font-family: "FontAwesome";
margin-right: 5px;
}
#sidebar aside .rgy-iherb li a > p {
margin-top: 5px;
font-size: 12px;
font-weight: normal;
color: #777;
}
#sidebar aside .rgy-iherb li p.rgy-iherb-text {
font-size: 13px;
color: #777;
}첨부파일에는 위의 CSS 스타일 코드가 들어 있습니다. 모두 복사해서 친효스킨 CSS에 붙여넣기를 해주시면 됩니다. 꾸미기 > 스킨편집 > HTML편집 > CSS탭으로 들어가서 붙여넣기 하시면 됩니다. 이때 빈공간을 확보하시고 적당한 공간에 붙여넣기를 하면 됩니다. 괄호 안에 넣으시면 안 됩니다.
HTML 세팅
마찬가지로 아래의 첨부파일을 다운로드 받습니다.
<div class="rgy-sidebar-title rgy-iherb" id="rgy-iHerb">
<h3>아이허브 할인코드</h3>
<ul>
<li><a href="https://kr.iherb.com/?rcode=리워드코드" target="_blank">리워드코드<p>(신규/기존회원 모두 5% 할인 : 무제한 사용)</p></a></li>
<li><p class="rgy-iherb-text">클릭하시면 위의 코드가 모두 적용된 아이허브 홈페이지로 바로 이동합니다.</p></li>
</ul>
</div>이 코드를 그대로 사용하는게 아니고, 안쪽에 보시면 한글로 "리워드코드" 라고 되어 있습니다. 여기를 자신의 코드로 변경해서 사용하면 됩니다. 변경된 코드는 사이드바의 HTML 배너 출력을 사용하여 그대로 코드를 붙여넣기해서 적용하시면 됩니다.
이렇게 적용하면 됩니다. 만약 기본 모듈에 HTML 배너출력 항목이 없다면 플러그인에 가서 "배너출력" 플러그인을 활성화 하면 됩니다. HTML 배너출력 항목의 +버튼을 누르면 사이드바1에 등록이 되고, 등록된 HTML배너출력 배너를 편집하여 수정된 아이허브 HTML코드를 그대로 붙여넣기해서 사용하면 됩니다. 어렵지 않습니다.
칸을 늘리고자 할 때
아이허브에서는 자주 할인 이벤트를 합니다. 그때마다 프로모션 코드를 제공하는데 그러려면 아이허브 모듈의 칸을 늘려서 알려줘야 합니다. 이럴때는 아래의 코드를 하나 더 복사해서 사용하면 됩니다.
<li><a href="https://kr.iherb.com/?rcode=리워드코드" target="_blank">리워드코드<p>(신규/기존회원 모두 5% 할인 : 무제한 사용)</p></a></li><ul>안쪽에 위의 코드가 있을 겁니다. <li>부터 </li> 까지가 하나의 칸 입니다. 따라서 추가하고자 하는 프로모션 코드가 있을 때 위의 코드를 그대로 하나 더 복사해서 수정 후 적용하면 됩니다. 끝.
