[Portfolio 스킨] 07. 공감 박스 위에 공감 유도 문구 넣기
별이소리ㆍ2024. 12. 3. 02:13
728x90
다른 분들은 공감버튼을 크고 화려하게 꾸미던데 실력도 없고 그렇게 본격적으로 블로그를 운영할 것 같진 않아서ㅎ
그래도 공감 버튼을 눈에 띄게 하는 방법 중에 멘트를 삽입하는 게 제일 편해보였다.
적용 모습
스킨 수정 과정
1. 편집화면으로 들어간다.
- 꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집
2. 아래 두가지 방법 중 하나를 선택해서 위치에 알맞게 입력하면 된다.
방법 1
- CSS 편집으로 들어간다.
- 적당한 위치에 아래 코드를 입력한다.
/* -- 공감 유도 문구 s */
/* 말풍선 박스 */
.postbtn_like::before {
content: "이 글이 좋았다면 ♡를 눌러주세요^-^";
position: absolute;
left: 0px;
top: -2px;
background: #FFC0D9;
color: #F9F9F9;
font-size: 12pt;
padding: 8px 14px;
border-radius: 10px; /* 테두리를 둥굴게 */
box-shadow: 3px 3px 10px rgb(0 0 0 / 10%); /* 오른쪽 아래, 아래, 그림자 색 정도 */
}
/* 말풍선 꼬리 */
.postbtn_like::after {
position: absolute;
left: 18px;
top: 32px;
width: 0;
height: 0;
border-top: 7px solid #FFC0D9;
border-bottom: 7px solid none;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
content: "";
}
/* -- 공감 유도 문구 e */포트폴리오 스킨의 경우 공감박스 이름은 postbtn_like다.
스킨마다 공감박스 이름이 다르기 때문에 확인 후 수정하면 된다.
말풍선 위치는 left와 top 값들을 바꿔보면서 적절하게 조절한다.
방법 2
- HTML 편집으로 들어간다.
- <body>와 </body> 사이에 아래 코드를 입력한다.
<!-- 공감 유도 버튼 s -->
<script>
$(document).ready(function() { var heartTag = '<div class="like_heart"><span class="heart_tooltip">이 글이 공감이 되었다면 ♡를 눌러주세요^-^</span></div>'; $(heartTag).insertBefore($('.container_postbtn').children().eq(0)); });
</script>
<style>
.heart_tooltip {position:absolute;left:0;top:-5px;background:#FF90BC;color:#F5F5F7;font-size:10pt;padding:7px 12px;border-radius:10px;box-shadow:3px 3px 10px rgba(0,0,0,0.1);}
.heart_tooltip::after {position:absolute;left:21px;bottom:-6px;width:0;height:0;border-top:7px solid #FF90BC; border-bottom:7px solid none;border-right: 7px solid transparent;border-left: 7px solid transparent;content:" ";}
</style>
<!-- 공감 유도 버튼 s -->말풍선 위치는 left와 top, bottom 값들을 바꿔보면서 적절하게 조절한다.
3. 코드 수정이 끝났다면 적용을 누른다.
728x90
