[Tistory] 티스토리 블로그 공감 버튼 변경

티스토리 공감 버튼이 변경되면서 기존의 방법이 무용지물이 되었습니다.

이에 다시 변경된 공감 버튼에 클릭 유도 글귀와 크기 버튼 변경 및 중앙 정렬하는 방법을 살펴 보겠습니다.

 준비 : jQuery 

공감 버튼 소스의 형식은 아래와 같이 공감, SNS, 신고의 3개의 버튼으로 설정되어 있습니다.

<div class="container_postbtn">
	<div class="postbtn_like">
		<div class="like_btn">
			<label class="uoc-icon">
				<span class="ico_postbtn ico_like"></span>
				<span class="txt_like uoc-text">공감</span>
				<span class="txt_like uoc-count" style="display: none;"></span>
				<input type="button" class="inp_btn uoc-button">
			</label>
		</div>
		<span class="ico_bar"></span>
		<label>
			<span class="ico_postbtn ico_sns">sns</span>
			<input type="button" class="inp_btn">
		</label>
		<span class="ico_bar"></span>
		<label>
			<span class="ico_postbtn ico_report">신고</span>
			<input type="button" class="inp_btn">
		</label>
	</div>
</div>

중앙 정렬및 문구 삽입을 위한 사전작업 (태그 추가)

위와 같은 구조에 태그를 추가하고 "공감 클릭" 유도 문구를 추가 하기. 위하여 다음과 같이 </body> 위에서 자바 스크립트를 실행합니다.

<script type="text/javascript">
	$('.container_postbtn > .postbtn_like').wrap('<div class="recommendation"><span>');
	$('.container_postbtn > div > span > .postbtn_like > .like_btn').before('<p><strong class="text-danger f-Nanum-G-8">방문</strong>은 선택!</p><p><strong class="text-danger f-Nanum-G-8">공감</strong>은 필수!</p>');
</script>

이제 공감 소스는 다음과 같이 변경되었습니다.

<div class="container_postbtn">
	<div class="recommendation">
		<span>
			<div class="postbtn_like">
				<p><strong class="text-danger f-Nanum-G-8">방문</strong>은 선택!</p>
				<p><strong class="text-danger f-Nanum-G-8">공감</strong>은 필수!</p>
				<div class="like_btn">
					<label class="uoc-icon">
						<span class="ico_postbtn ico_like"></span>
						<span class="txt_like uoc-text">공감</span>
						<span class="txt_like uoc-count" style="display: none;"></span>
						<input type="button" class="inp_btn uoc-button">
					</label>
				</div>
				<span class="ico_bar"></span>
				<label>
					<span class="ico_postbtn ico_sns">sns</span>
					<input type="button" class="inp_btn">
				</label>
				<span class="ico_bar"></span>
				<label>
					<span class="ico_postbtn ico_report">신고</span>
					<input type="button" class="inp_btn">
				</label>
			</div>
		</span>
	</div>
</div>

이제 jQuery를 이용한 HTML 변경은 완료 하였습니다.

다음은 "스타일시트(CSS)"를 이용하여 신고 버튼을 제거 하고 크기를 크게 변경하고 중앙 정렬을 위하여 작업 합니다.

.container_postbtn > div > span > .postbtn_like > span.ico_bar:nth-child(7n+6),
.container_postbtn > div > span > .postbtn_like > label:nth-child(7n) {
	display: none;
}
.container_postbtn{
	padding: 2em 0 4em 0 !important;
}
.container_postbtn > div > span > .postbtn_like .ico_bar {
	background: #dc3545!important;
}
.container_postbtn > div > span > .postbtn_like {
	padding: 0.7em;
	transform: scale(1.35);
	transform-origin: top left;
	border-color: #dc3545!important;
	text-align: center!important;
}
.container_postbtn > div > span > .postbtn_like > p {
	font-size: 0.7em;
	line-height: 1.5;
}
.container_postbtn > .recommendation {
	display: -ms-flexbox!important;
	display: flex!important;
	display: -ms-flexbox!important;
	display: flex!important;
}

문구는 변경가능합니다.