지금 보시는 블로그는 Juo님이 워드프레스용 Notepad 스킨을 티스토리용으로 컨버전한 것을 이용하고 있습니다. ^^ (Juo님 용자!) 다운로드 및 설명은 여기 링크에서 볼 수 있습니다. 이 포스팅은 노트패드 스킨에 라이브리를 적용하는 법을 설명드리는 글입니다.
정말 예쁜 스킨이고, 특히 iPAD에서 깔끔하게 보여 저도 이용하려고 맘 먹던 중이었습니다. 그런데 @littlepeace1979 님께서 이 스킨에는 라이브리 설치가 안된다고 제보를 주셨습니다. 바로 테스트해보려고 했는데 구정도 끼고, 이리저리 일에 치이다 보니 이제서야 제대로 설치해봤네요.
일단, 라이브리를 설치하는 방법은 http://LiveRe.co.kr 와 기본적으로 같지만 아래와 같이 하시면 됩니다.
정말 예쁜 스킨이고, 특히 iPAD에서 깔끔하게 보여 저도 이용하려고 맘 먹던 중이었습니다. 그런데 @littlepeace1979 님께서 이 스킨에는 라이브리 설치가 안된다고 제보를 주셨습니다. 바로 테스트해보려고 했는데 구정도 끼고, 이리저리 일에 치이다 보니 이제서야 제대로 설치해봤네요.
일단, 라이브리를 설치하는 방법은 http://LiveRe.co.kr 와 기본적으로 같지만 아래와 같이 하시면 됩니다.
1) </head>바로 앞에 1번 소스코드를 넣는다. (원래 티스토리용과 동일합니다.)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.livere.co.kr/ver5/livere.jsp" charset="utf-8" ></script>
<script type="text/javascript" src="http://www.livere.co.kr/ver5/livere.jsp" charset="utf-8" ></script>
2) 2번 소스코드 앞뒤에 <h4> 태그를 입혀, 삽입합니다. (아래 예시를 참조하세요.)
<h4 id="livere">
<div id='layer'>
<script language="javascript">
var rep = document.domain+"/99";
var title = "[Notepad 스킨에 라이브리(LiveRe) 설치하기]";
livereReply = new Livere( rep , "livere" , title , "해쉬태그", "트위터아이디" , "default" , "openwhite" , 15);
livereReply.init();
</script>
</div>
</h4>
<div id='layer'>
<script language="javascript">
var rep = document.domain+"/99";
var title = "[Notepad 스킨에 라이브리(LiveRe) 설치하기]";
livereReply = new Livere( rep , "livere" , title , "해쉬태그", "트위터아이디" , "default" , "openwhite" , 15);
livereReply.init();
</script>
</div>
</h4>
즉, div 설정에 앞서 <h4>로 지정해주면, 잘 인식되더라구요^^ (노가다로 찾느라고 진땀뺐습니다.)
3) 추가적으로 노트패드 스킨에 '더' 맞게 조절하는 법
CSS를 설정해주기 위해서, style.css에 아래와 같이 추가해줍니다.
h4#livere {
width: 99%;
background-color: #FDFDE8;
margin-bottom: 10px;
}
width: 99%;
background-color: #FDFDE8;
margin-bottom: 10px;
}
* 참고적으로 설명을 좀 더 드리면 (아시는 분은 아시겠지만 ^^)
3-1) width: 99% 는 우측이 1~2px 정도 살짝 짤리는 현상을 해결해주고,
3-2) background-color 는 라이브리(LiveRe)가 댓글 리스트에 귀돌이(?) - 모서리 - 부위에 효과를 주느라고 이미지 파일 처리가 되있는데, 흰바탕이라서, 노랑 배경인 이 스킨에 안 어울립니다. 그래서 중간 색상 (기본 댓글 입력창 색)을 배경색으로 지정해 주니 훨씬 나아보이네요.
3-3) margin 은 댓글 리스트 아래에 여백을 주려고 설정했습니다.
생각보다 시간이 오래 걸리긴 했지만, 뿌듯하네요.
덕분에 저도 이 스킨으로 계속 쓰렵니다. ㅋ
#덧. 2차 블로그 주소 설정하실 때, www. 를 빼고 넣으셔야 댓글이 잘 출력된다고 합니다 :)
3-1) width: 99% 는 우측이 1~2px 정도 살짝 짤리는 현상을 해결해주고,
3-2) background-color 는 라이브리(LiveRe)가 댓글 리스트에 귀돌이(?) - 모서리 - 부위에 효과를 주느라고 이미지 파일 처리가 되있는데, 흰바탕이라서, 노랑 배경인 이 스킨에 안 어울립니다. 그래서 중간 색상 (기본 댓글 입력창 색)을 배경색으로 지정해 주니 훨씬 나아보이네요.
3-3) margin 은 댓글 리스트 아래에 여백을 주려고 설정했습니다.
생각보다 시간이 오래 걸리긴 했지만, 뿌듯하네요.
덕분에 저도 이 스킨으로 계속 쓰렵니다. ㅋ
#덧. 2차 블로그 주소 설정하실 때, www. 를 빼고 넣으셔야 댓글이 잘 출력된다고 합니다 :)
