LiveRe 댓글창 보이고 숨기기

티스토리의 라이브 댓글 방식인 라이브리라는 댓글이 있습니다.
jquery를 포함한 방식인데. 여하튼 이 댓글이 티스토리의 댓글과 라이브리 댓글과 같이 보여지는 방식이기 때문에 좀 귀찮은 부분이 있습니다.
방문하는 모든 방문자가 전부 라이브리 댓글을 사용하는것은 아니니 평상시에는 감쳐져있고 클릭을하면 보여지는 형식을 선택했습니다.

티스토리에서는 그런 방식이 없지만 라이브리를 사용하면 jquery 가 자동으로 삽입이 되니 간단한 jquery를 사용하면 됩니다.
자 보여지고 감쳐지는 라이브리 댓글창을 만들어봅시다.

먼저 완성이 되면 어떻게 보여지는지 한번 보겠습니다.
평상시에는 닫쳐있다가 클릭하면 이미지의 색깔이 변하면서 댓글창이 보입니다.

평상시 닫쳐있는 라이브리

 

클릭해서 펼쳐져있는 라이브리

첫번째. 먼저 준비물인 이미지가 있어야겟지요.

아래의 이미지를 스킨편집창에서 파일업로드를 통해 업로드합니다.

 

두번째. 라이브리 댓글 플러그인 설정.

플러그인 설정에서 사용자설정을 클릭하고 저장을 합니다.
그래야 원하는 장소에 넣을수가 있습니다.

 
이 부분을 생략하고 하면 댓글,트랙백위 즉 본문 바로 아래에 댓글 라이브리가 보이기 때문에 이 부분을 설정하는것이 좋습니다.
저는 개인적으로 댓글,트랙백 보이기와 나란이 보이기를 원해서 그렇게 했습니다.
공간 활용을 한거죠....

세번째. 라이브리 html 코드넣기.

어느 부분에 넣느냐를 유심히 보시기 바랍니다. 
라이브리 버튼은 태그, 댓글,트랙백보이기 옆에 보이고, 나중에 펼쳐졌을때는 그 밑에 모든것이 보이는 형식입니다.

<div class="tagWrap">
	<div class="tagTrail">태그부분</div>
	<div class="actionTrail">댓글 보이고 감추기 부분</div>
	<!-- liveRe button -->
	<div id="liveRe_button">
		<button type="button" id="liveRe_open" class="liveRe_open">
			<span>liveRe Open</span>
		</button>
		<button type="button" id="liveRe_close" class="liveRe_close">
			<span>liveRe Close</span>
		</button>
	</div><!-- //liveRe button -->
</div><!-- //tagWrap -->
<!-- liveRe -->
<div class="liveReWrap">[#\#_LiveRePlugin_##]</div>

간단이 말하면 tagWrap 은 태그, 댓글 트랙백 보이기, 라이브리 버튼을 모두 감싸는 div 입니다.
맨아래 독자적으로 liveReWrap 이 클릭을 해서 보여지는 부분입니다.

또한 liveRe_button 이 클릭할 요소인 이미지 버튼이 있는곳입니다.

네번째. 스타일 설정.

아래의 코드를 css 편집창 맨아래에 넣어주세요.

/* -------- 플러그인 추가시 설정 -------- */
#liveRe_button { position:absolute; bottom:0; right:0; display:block; width:120px; z-index:100; cursor:pointer; }
#liveRe_button span { visibility:hidden; }
#liveRe_button button { cursor:pointer; z-index:103; }
#liveRe_button .liveRe_open, #liveRe_button .liveRe_close { display:block; width:120px; height:40px; }
#liveRe_button .liveRe_close { display:none; }
#liveRe_button { border:0 none;}
#liveRe_button button { background:none; border:0 none; }
#liveRe_button .liveRe_open { 
	background-image:url(images/liveRe.png);
	background-repeat:no-repeat;
	background-position:0 0; 
}
#liveRe_button .liveRe_close { 
	background-image:url(images/liveRe.png);
	background-repeat:no-repeat;
	background-position:0 -40px;
}

다섯번째로 자바스크립트 삽입.

아래의 코드를 html 편집창에서 </body> 위에 삽입하면 됩니다. 

<script type="text/javascript">
(function($) {
	// liveRe 
	$(".liveReWrap").css("display","none");
	$("#liveRe_open").click(function() {
		$(".liveReWrap").slideDown("slow");
	});
	$("#liveRe_close").click(function() {
		$(".liveReWrap").slideUp("slow");
	});
	$("#liveRe_button button").click(function () {
		$("#liveRe_button button").toggle();
	});
})(jQuery);
</script>

이로써 모든 작업이 끝났습니다.